ある画像をクリックすると別の画像に変わって、もう一度クリックすると最初の画像に戻る、みたいな事って出来ますか?スタイルシートやJavaScript使ってでも良いですので、あれば、ぜひ教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

Netscape4.x では、IMG の onClick がサポートされていないので、No.1や2の方法では動きません。


通常、画像に対する処理を書く場合は、画像をAタグで囲んで、その onClick に処理を書きます。
また、初めは表示されない画像は、Imageオブジェクトを作って、予め読み込んでおきます。

<HTML>
<HEAD>
<SCRIPT language="JavaScript"><!--
var count = 3;       // 画像数
var files = new Array("a_1.gif", "b_1.gif", "c_1.gif");  // 画像ファイル名
var objs = new Array(count);

function init() {    // 初期化(イメージのプリロードなど)
  for (i = 0; i < objs.length; i++) {
    objs[i] = new Image(32,32);   // 画像サイズ
    objs[i].src = files[i];
    objs[i].bak = document.images["image"+i].src;
    objs[i].flg = 0;
  }
}

function change_img(n) {  // 画像変更
  if (objs[n].flg == 0) {
    document.images["image"+n].src = objs[n].src;
  } else {
    document.images["image"+n].src = objs[n].bak;
  }
  objs[n].flg = 1 - objs[n].flg;
}
//--></SCRIPT>
</HEAD>

<BODY onLoad="init()">
<A href="javascript:void(0)" onClick="change_img(0)"><IMG name="image0" border="0" src="a_0.gif"></A>
<A href="javascript:void(0)" onClick="change_img(1)"><IMG name="image1" border="0" src="b_0.gif"></A>
<A href="javascript:void(0)" onClick="change_img(2)"><IMG name="image2" border="0" src="c_0.gif"></A>
</BODY>
</HTML>

必要に応じて、画像数や画像ファイル名、画像サイズは変更して下さい。
    • good
    • 0
この回答へのお礼

ありがとうございます!希望通りのものが出来ました。
IMGのonClickがサポートされてないっていうのも聞いたことがあったので、良かったです。

お礼日時:2001/12/22 13:45

少し面倒かもしれませんが,画像をページに貼り付け,画像そのものにリンクを貼る方法ではまずいですか?



1枚目
<BODY>
<P><A href="2枚目のページ.html" target="_self"><IMG src="最初の画像.jpg"></A></P>
</BODY>
2枚目
<BODY>
<P><A href="3枚目のページ.html" target="_self"><IMG src="2枚目の画像.jpg"></A></P>
</BODY>
3枚目
<BODY>
<P><A href="1枚目のページ.html" target="_self"><IMG src="3枚目の画像.jpg"></A></P>
</BODY>

いかがなものでしょう?
これなら,何枚画像があっても大丈夫だと思いますが・・・。

蛇足ですが,こんなことも可能です。
<BODY>
<P><IMG src="2枚目の画像.jpg" usemap="#2枚目の画像(拡張子無しのファイル名)"></A></P>
<MAP name="2枚目の画像(拡張子無しのファイル名)">
<AREA href="最初のページ.html" target="_self" shape="rect" coords="sx1,sy1,ex1,ey1" alt="前の画像">
<AREA href="Indexなどのページ.html" target="_self" shape="rect" coords="sx2,sy2,ex2,ey2" alt="元に戻す">
<AREA href="3枚目のページ.html" target="_self" shape="rect" coords="sx3,sy3,ex3,ey3" alt="次の画像">
<AREA shape="default" nohref>
</MAP></BODY>
このようにすると,画像のクリックする部分によって,前の画像や次の画像,または,一覧ページなどに戻すことも出来るようになります。
(sxは最初のX座標,syは最初のY座標,exは終わりのX座標,eyは終わりのY座標です・・・「範囲指定の」ですよ)
    • good
    • 0
この回答へのお礼

画像はメインに使うものでは無いし、読み込み時間を出来るだけ少なくしたいので、リンクよりはスタイルシートかJavaScriptなどが良いのです。私の説明不足ですみません。でも、ご回答ありがとうございました。

お礼日時:2001/12/21 08:45

前のやつにちょっと手を加えてみました。



<script language=javascript>
var clicked = new Array();
function mouseclick(n) {
if (clicked[n]) {
window.event.srcElement.src = "最初の画像.gif";
clicked[n] = false;
} else {
window.event.srcElement.src = "2枚目の画像.gif";
clicked[n] = true;
}
}
</script>
<img id="image1" src="最初の画像.gif" onclick="mouseclick(1)">
<img id="image2" src="最初の画像.gif" onclick="mouseclick(2)">
<img id="image3" src="最初の画像.gif" onclick="mouseclick(3)">
    • good
    • 0
この回答へのお礼

ありがとうございます!助かります。
ところで、もし使う2枚の画像がそれぞれ違う、3組のボタン(ボタンに使ってます)を置きたい時も、どうすれば良いのか教えてもらえますか?これ↑を試してみて、それぞれ色だけ変えても良いなぁ、なんて思ったんです。
1個目のボタンは赤系の色、2個目は青系、3個目は黄色系で、押すと色が鮮やかになり、もう一度押すと元の色に戻る、みたいな感じで出来ますか?何度も質問することになってしまい、申し訳ありませんm(_ _)m

お礼日時:2001/12/21 08:43

JavaScriptで出来そうです。



↓こんな感じ。

<script language=javascript>
var clicked = false;
function mouseclick() {
if (clicked) {
image1.src = "最初の画像.gif";
clicked = false;
} else {
image1.src = "2枚目の画像.gif";
clicked = true;
}
}
</script>
<img id="image1" src="最初の画像.gif" onclick="mouseclick()">

※ ネットスケープだとうまくいかないかもしれません。(^^;
    • good
    • 0
この回答へのお礼

ありがとうございます(^-^)試してみたら、1つだと出来ました!でも同じページに3つそういうものを置きたいのですが(3つとも、使う2枚の画像は同じものです)、3つ書いてみると出来ませんでした。3つでも出来る方法はありますか?

HTMLのカテゴリで書いたけど、JavaScriptの方に移した方が良いでしょうか。。。

お礼日時:2001/12/20 08:28

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Qスタイルシートでかけるものはスタイルシートを使った

非推奨タグでなくても、スタイルシートでかけるものはスタイルシートを使ったほうが良い?

htmlでサイトを作ってるのですが、スタイルシートを使うべきかhtmlで書くべきか、
どちらでもかける場合があります。

その際どちらを使ったほうがいいのでしょうか?

Aベストアンサー

判断は、「どちらでもかける場合があります」ではありませんよ。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という根本を理解していないと、この質問になります。
 HTMLは、あくまで文書構造をマークアップするものです。例えば、太字で表示したい語句があったとします。
[例文]
 「構造とプレゼンテーションの分離」という概念を理解しておかなければなりません。
 いにしえの昔の武士の侍が、馬から落ちて落馬して、・・・【中略】・・・腹を切って切腹した。

 ここで、「構造とプレゼンテーションの分離」が重要なのでしたら
<p>
 <strong>「構造とプレゼンテーションの分離」</strong>という概念を理解しておかなければなりません
</p>
でしょうし
<p>
 <b>いにしえ</b>の<b>昔</b>の<b>武士</b>の<b>侍が、<b>馬から落ちて</b><b>落馬</b>して、・・・【中略】・・・<b>腹を切って</b><b>切腹</b>した。
</p>
 でしょう。

 その上で、スタイルシートで
p strong{color:red;font-weight:normal;}
p b{color:green;font-weight:normal;text-decoration:underline;}
とか・・
 しかし、すくなくとも
<p>
 <span class="stong">「構造とプレゼンテーションの分離」</span>という概念を理解しておかなければなりません
</p>
とかいて
p span.strong{font-weight:bold;color:red;}
とするのは、望ましくはありません。

 もっと、良く指摘されるのが、配置をtableを使って行うことです。tableは、二次元以上のデータをマークアップするものですが、これを他の用途に使うのは誤りです。

 それぞれのタグの用途は仕様書に書かれています。
 ⇒要素索引( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html )
 から要素名をクリックして説明を読んでください。

>その際どちらを使ったほうがいいのでしょうか?
 それは、その要素が何であるかがわからないので、一概には答えられません。--これもわかると思います。
 HTMLは、その文書を読み解き、その文書を構成する要素に分解して、それぞれの要素をタグでマークアップしていく言語です。文書を書く本人しか、その要素(部品)をどの要素とは判断できないのです。
 そのうえで、スタイルシートで自由にプレゼンテーションを変更できる。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
と考えたら答えは出ると思います。

(注)HTML4.01では、この文書構造を示すタグ--要素が足りませんでした。そのため、DIV,SAPNという要素が用意されて
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 とされていましたが、ご存知の通りこれが正しく理解されずに<div id="wrapper"><div id="contener"><div id="Left">のようなおかしなマークアップが氾濫してしまいました。本来は、<div class="article"><div class="section"><div class="nav">のようになるはずでした。
 その反省から、「HTML5 では、文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」header,section,footerなどの新しい要素が採用され、DIVやSPANは原則使わない--他に適当な要素がないときの最後の手段となりました。

>その際どちらを使ったほうがいいのでしょうか?
 これで悩むことがありませんよう、役立てば良いです。
 1度仕様書を通しで読んでみましょう。答えはそこにあります。

判断は、「どちらでもかける場合があります」ではありませんよ。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という根本を理解していないと、この質問になります。
 HTMLは、あくまで文書構造をマークアップするものです。例えば、太字で表示したい語句があったとします。
[例文]
 「構造とプレゼンテーションの分離」という概念を理解しておかなければなりません。
...続きを読む

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

Qスタイルシート(CSS)の中にテーブルのようなスタイルシートをつくりたいです。

Dreamweaver8にてHPを作成しております。

今回CSSをやってみようと思い試行錯誤しながらがんばっているのですが、
現在スタイルシートのfloatタグなどを使って、
ヘッダー、メニュー、コンテンツ、フッターというよくある構成で作っております。
そしてコンテンツ部分以外はテンプレート機能を使い共有できるようにしています。

そして新しいページを作る際、コンテンツ部分だけを編集していくのですが、真ん中で2つにわかれた2段組の文章をつくりたくて、テーブルを使用したところ、テーブルが縦に長くなるとCSSで指定した範囲を超えてしまいレイアウトが崩れてしまいます。

これがテーブルでなく文章でなら縦に長くなっても自動的にCSSの高さが長くなってくれます。

ですので、題名のようにCSSでテーブルのような機能のあるものを教えていただきたいのですが、素人でなにぶん申し訳ないですがよろしくお願い致しますm(_ _)m

Aベストアンサー

横に2つ並べるのでしたら「float: left;」を入れると横に並びます。
ただ、テーブル幅を狭く設定して<div class="table">~</div>をずらっと
並べてしまうと、その分だけ横にテーブルが並んだようになってしまうので
その場合はひとつひとつ指定しなくてはならなくなります。

> 画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。
これはテーブルの背景に画像を挿入されているということでしょうか?
それともbodyの中にということでしょうか?
枠線の色をかなり薄いグレーに設定しているので(#cccccc)
そこを別の色に変えると出てきませんか?

> その幅ではできずテキストを入力するにつれて枠線の幅も自動的的に伸びていくという感じです。
下記のCSSの記入方法で何度か試してみたのですが、テキストは延々と伸びていかず
きちんと自動的に折れ曲がってくれるのですが…。spanではなくdivで書かれてみてはどうでしょうか。

CSSファイル例

.table{
float: left;
width: 200px ;/*テーブルの幅*/
background-color: #ffffff;/*テーブルの色*/
background-image : url(sample.gif);/*テーブルの中に入れる画像(画像ファイル名は任意) */
margin: 10px;/*テーブルとテーブルの余白*/
border: solid 1px #000000;/*テーブルの枠の色(今回は黒)*/
padding: 0.5em;/*文字周りの余白*/

html記入例

<body>
<div class="table">文字など文字など文字など文字など文字など文字など文字など文字など</div>
<div class="table">文字など文字など文字など文字など文字など文字など文字など文字など</div>
</body>

横に2つ並べるのでしたら「float: left;」を入れると横に並びます。
ただ、テーブル幅を狭く設定して<div class="table">~</div>をずらっと
並べてしまうと、その分だけ横にテーブルが並んだようになってしまうので
その場合はひとつひとつ指定しなくてはならなくなります。

> 画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。
これはテーブルの背景に画像を挿入されているということでしょうか?
それともbodyの中にということでしょうか?
枠線の色をかなり薄いグレーに設定...続きを読む

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Q画像の左端をクリックした時にJavascriptを動作させたい

任意の縦横サイズの画像の左端の外側についてる幅4pxの枠をクリックすると特定の
Javascriptメソッドを呼ぶHTMLコードを書きたいのですが、どうCSSと
組み合わせても枠が画像より短かったり逆にヤケクソに長くなったりして
うまくいかないのですが、実際のところこのような芸当は可能なのでしょうか?

Aベストアンサー

いっそのこと枠線じゃなくて枠のとこまで全部画像にして
クリッカブルマップにするとかダメでしょうか

http://tezuka.s9.xrea.com/tips/gazou03.htm

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

Qスタイルシートで特定IDかつ特定クラスの要素のスタイルを設定するには?

<div id="hoge" class="piyo">~</div>
上記のように特定IDかつ特定クラスの要素にのみスタイルを適用させるには
CSSにどのように記述すればよいでしょうか?
div#hoge.piyo、div.piyo#hogeいずれも試してみましたがうまく動きませんでした。

Aベストアンサー

というか・・・

idはユニークなはずですから、idで指定しているという時点でidの
スタイルが適用されてよいのでは?

またclassは複数指定ができますので、
<div id="hoge" class="piyo hogepiyo">~</div>として
hogepiyoクラスに対してimportantで、より強いスタイルを指定すれば
よいかもしれません

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Qスタイルシートと画像リンクの下線

現在HPを作成しています。
スタイルシートで、ページ内指定で、リンクについて下線を表示させています。テキストから下線を少し離したいので以下のような記述をしています。
A:link{text-decoration:none;border-bottom-style:solid;border-width:1px;padding-bottom:0.3p
x;color:#000000;}
そして、そのページ内にある画像からもリンクを設定したいのですが、画像には下線がついて欲しくないのです。
何かよい方法がありますでしょうか?
よろしくお願いします。

Aベストアンサー

質問者さんのやり方ですと、Aタグすべてにスタイルが適用されてしまいます。

CLASSで分けられてはいかがでしょうか?

<a class="u_line">と下線を設定したい部分に記載していただき、スタイルシートの記述には、
.u_line{text-decoration:none;border-bottom-style:solid;border-width:1px;padding-bottom:0.3p
x;color:#000000;}
とする。


人気Q&Aランキング

おすすめ情報