• ベストアンサー

画像IMGとイベントの関係

イベントオブジェクトは独立しているので、documentから たどるのは無理かもしれませんが、方法がわからず困っています。 以下のようにBのイメージをクリックした場合、Bと表示するように したいのですが、どうすればよいでしょうか? IEとFireFoxを使っています。 function test(){ // ここでBのイメージをクリックしたなら、Bと表示させたい。 } <img alt="A" src="test_A.gif" onClick="test()"> <img alt="B" src="test_B.gif" onClick="test()"> <img alt="C" src="test_C.gif" onClick="test()">

質問者が選んだベストアンサー

  • ベストアンサー
  • talepanda
  • ベストアンサー率58% (45/77)
回答No.2

<script language="JavaScript" type="text/JavaScript"> function test(){ var se=null; try{se=arguments.callee.caller.arguments[0].target}catch(e){se=window.event.srcElement;} alert(se.getAttribute("alt")); } </script> <img alt="A" src="test_A.gif" onClick="test()"> <img alt="B" src="test_B.gif" onClick="test()"> <img alt="C" src="test_C.gif" onClick="test()">

その他の回答 (3)

noname#20964
noname#20964
回答No.4

function test(obj){ alert(obj.getAttribute('alt')) } <img alt="A" src="test_A.gif" onClick="test(this)"> <img alt="B" src="test_B.gif" onClick="test(this)"> <img alt="C" src="test_C.gif" onClick="test(this)">

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

http://okwave.jp/qa2445334.html が参考になると思います。 変更して良ければ、 test() にthis を渡してやるようにするのが簡明です。 <img alt="B" src="test_B.gif" onClick="test(this)"> function test(el){ alert(el.alt); }

回答No.1

私の質問ですが http://oshiete1.goo.ne.jp/qa2428819.html が、参考になると思います。

関連するQ&A

  • 画像の切り替えボタンについて教えてください

    サムネイルをクリックするごとに、拡大画像がそれらの下に表示されるページを作っています。 拡大された画像をクリックすると、再びサムネイルだけの状態に戻ります。 そこで質問なのですが、拡大された状態の時に、次の画像に進むボタンと戻るボタンを表示させ、実際に切り替えることができ、 サムネイルだけの状態の時にはボタンが表示されないといったものを作る場合、どういった様にすればいいのでしょうか。 いろいろ試してはみたのですが、当方初心者ですのでなかなか動いてくれません。 以下は進む、戻るボタン無しのソースです。 ---------------------javascript------------------------ // resizeImg() function resizeImg(imgId,width,height) { var objStr,obj; if(document.images) { objStr = 'document.' + imgId; obj = eval(objStr); obj.width = width; obj.height = height; } } // imageSwap() function imageSwap(daImage, daSrc) { var objStr,obj; if(document.images) { if (typeof(daImage) == 'string') { objStr = 'document.' + daImage; obj = eval(objStr); obj.src = daSrc; } else if ((typeof(daImage) == 'object') && daImage && daImage.src) { daImage.src = daSrc; } } } ------------------------html--------------------------- <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test1.jpg')"> <img src="image/th-test1.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test2.jpg')"> <img src="image/th-test2.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test3.jpg')"> <img src="image/th-test3.jpg" alt="" width="50" height="50" /></a><br /> <a href="#" onclick="resizeImg('test1',1,1); imageSwap('test1','image/kuuhaku.gif');"> <img name="test1" src="image/kuuhaku.gif" alt="" width="1" height="1" /></a> ---------------------------------------------------- よろしくお願いします。

  • 1つの画像オンマウスで3つの画像を切り替えたい!

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか? 助けてください!

  • javascriptで画像の移動

    お世話になります。 画像をクリックすると、クリックした画像のaltの内容をinput type="text"に表示する。 左に移動ボタン押下でクリックされた画像を1つ左に移動、 右に移動ボタン押下で1つ右に移動する。 1.移動ボタン押下で移動させるにはどうすればよいでしょうか? ※HTMLはtableタグでなくてもよいと思っております。 2.クリックした画像が分かるようにしたいのですが 何かいい方法などありますでしょうか? <html> <head> <script> var clickId =""; function down(id){ clickId = id; document.getElementById("comment").value = document.getElementById(id).alt ; } function move(d){ } </script> </head> <body> <table> <tr> <td id="p1"><a href="#" onClick="down('1');"><img id="1" alt="alt1" src="1.gif" /></a></td> <td id="p2"><a href="#" onClick="down('2');"><img id="2" alt="alt2" src="2.gif" /></a></td> <td id="p3"><a href="#" onClick="down('3');"><img id="3" alt="alt3" src="3.gif" /></a></td> </tr> <tr> <td align="left"><a href="#" onClick="move('1');"><img alt="左に移動" src="L.gif" /></a></td> <td align="right"><a href="#" onClick="move('0');"><img alt="右に移動" src="R.gif" /></a></td> </tr> </table> <input type="text" id="comment" /> </body> </html>

  • クリックして変更した画像を他の画像をクリックしたとき戻すには?

    以前、別で下記のような質問がありました。 ●質問------------------- 複数の同じ画像があるとします。 そのひとつをクリックすると画像が変わるようにします。 その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか? どなたかご教授おねがいします。 ---------------------- 上記の質問を受けての回答が下記のような感じで ●回答------------------- <script> function change(obj){ var orgimg="a.gif"; var newimg="b.gif"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } } </script> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> ---------------------- これで終わってしまっていたのですが、画像が複数のパターンある場合はどのようにすればよいでしょうか。 例えば 「a1.gif」をクリックすると「a2.gif」に変更するようにして、さらに「b1.gif」というものがあって、クリックすると「b2.gif」に変更するように設定してあるとします。 「a1.gif」をクリックして「a2.gif」になっている状態で「b1.gif」をクリックすると「a2.gif」が「a1.gif」に戻るようにするにはどのようにすればよいでしょうか。 このb1が、c1,d1,e1・・・・とたくさんある感じです。 質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。 宜しくお願い申し上げます。

  • リンク先を動的に変えたい

    CGギャラリーを考えています。 サムネイルクリックで拡大画像が切り替わり、 ダウンロードボタンで適宜選ばれたPDFを別ウィンドウで開く仕組みです。 サムネイルクリックで拡大画像が切り替わるのは完成したのですが それに対応したPDFにリンクする部分がうまく作れません。 どうぞご教授お願いします。 //クリックされたサムネイルによって拡大画像を切り替え function myChgPic(myPic){ document.images["myImage"].src = myPic; } //サムネイルで選ばれた画像によってリンク先を変更 function myChgLink(){ window.open ("A.pdf"); //↑この飛び先を、myPicによってA.pdf、B.pdf、C.pdfと変更したい } //サムネイル <img src="A-s.gif" onclick="myChgPic('A-l.gif')"> <img src="B-s.gif" onclick="myChgPic('B-l.gif')"> <img src="C-s.gif" onclick="myChgPic('C-l.gif')"> //拡大画像 <img src="A-l.gif" name="myImage"> //ダウンロードボタン <a href="Javascript:myChgLink()"><img src="dl.gif"></a>

  • 画像をクリックして別の画像を変えたい

    ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像(button.gif)自身が2.pngなどの画像に変わってしまいます。   <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。(確認のため <IMG SRC="1.png"> を<A HREF>~</A>より上に持ってきたら思っていた動きになりました。)  けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。

  • 選択された画像を onclick と $_SESSION を使って識別する方法について

    画像が2種類あって、どの画像がクリックされたかを onclick() と $_SESSION[] を使って記録したいと思っているのですが、その方法が分かりません。 以下のスクリプトのようなことをしたいのですが、このスクリプトは動きません。。。($modeには何も値が入りませんでした)。 <a class="1q" id="1a" onclick="<?php $_SESSION['mode']=1 ?>" href="index.php"><img id="image1" alt="Fig1" src="images/fig1.gif"></a> <a class="2q" id="2a" onclick="<?php $_SESSION['mode']=2 ?>" href="index.php"><img id="image1" alt="Fig2" src="images/fig2.gif"></a> MODE=<?=$mode?> よいアイデアを頂けますと大変助かります。 よろしくお願い致します。

    • ベストアンサー
    • PHP
  • イベントハンドラを完全に外部化にしたい

    イベントハンドラをなんとか、完全に外部ファイルにしたいと考えています。 <ul><li> <a href="a.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../ig/c1.gif',1)"> <img src="../ig1.gif" alt="aaa" name="Image1" id="Image1" /></a></li> <li> <a href="b.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../ig/c2.gif',1)"> <img src="../ig2.gif" alt="bb" name="Image2" id="Image2" /></a></li> ・ ・ ・ </ul> サイトのナビ部分のソースです。この中にあるonmouseout、やonmouseoverを外部ファイルにして、 <ul><li> <a href="a.html"><img ~></li> <a href="b.html"><img ~></li>・ ・ ・ </ul>というすっきりした形にできないものでしょうか… イベント登録する関数を作って、ページのonloadで実行しておく という感じかな…と考えていたりするんですが… どのように記述すればよいか お知恵をお貸しください。 ※MM_swapImgRestoreやMM_swapImageはすでに外部化済です

  • エラーが出ます。

    マウスイベントのjavascriptでエラーが出ます。 <IMG height=13 src="img/new.gif" align=middle name=ar01> <A onmouseover="chImg(document.ar01,'img/icon.gif')" onclick="chImg(document.ar01, 'img/arrow_f.gif')" href="main.html" TARGET="main">ABC</A> というイベントを設定したのですが、 <SCRIPT language=javaScript> <!-- preImg = new Image(); preImg.src="img/arrow_f.gif"; preImg.src="img/new.gif"; preImg.src="img/icon.gif"; function chImg(img_a,img_b) {img_a.src = img_b;} //--> </SCRIPT> のfunction ------の行で 'undefined'は'Null'またはオブジェクトではありません。 というエラーメッセージがでます。 なぜエラーになるのでしょうか? 他のサイトではうまく動いているのに良くわかりません ご指導お願いします。

  • 画像の入れ替え

    先日、ここで質問をして、javascript を使って画像を入れ替える方法を教えてもらいました。 <script type="text/javascript"> <!-- function toggle(img){ if(img.normal==null) img.normal=true; img.src= img.normal ? 'a.jpg' : 'b.jpg'; img.normal=!img.normal; } //--> </script> … <img src="a.jpg" alt="画像" onclick="toggle(this)"> ということだったのですが、これだと2枚の画像しか入れ替えることができないので、3枚の画像を入れ替えようと、img.src= img.normal ? 'a.jpg' : 'b.jpg': 'c.jpg';と書いてみたのですが、スクリプトエラーが出てしまって、うまくいきません。どのようにすれば、3枚以上の画像を入れ替えることができるでしょうか?ABCDEF→ABCDEFのように変っていくようにしたいのですが。 よろしくお願いいたします。

専門家に質問してみよう