- 締切済み
javascriptでポインタを画像の上にのせると左の画像が変わるやり方
http://www.dospara.co.jp/5goods_pc/pc_detail.php?h=g&f=g&m=g&mc=1169&a=1 ドスパラのHPみたいにポインタを画像の上にのせると左の画像が変わるjavascriptのサンプルがあったら教えていただけないでしょうか。 よろしくお願いします。
- tongpoo-on
- お礼率44% (4/9)
- HTML
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
No.4です。修正します。前のサンプルだと、どこにマウスオーバーしても 画像が変わってしまうので、function eventadd()を直しました。 <script type="text/javascript" charset="utf-8"> <!-- window.onload = function () { imgset(); eventadd(); } function imgset(){ var lielm,targetelm; var imgsrc=new Array("/ff.jpg","/ff.jpg","/ff.jpg","/ff.jpg","/ff.jpg"); var targetelm=document.getElementById("gazou_r").getElementsByTagName("ul"); for (var i=0;i<imgsrc.length;i++){ lielm=document.createElement("li"); lielm.innerHTML='<img src="'+imgsrc[i]+'" alt="gazou" />'; targetelm[0].appendChild(lielm); } document.getElementById("gazou_l").setAttribute("src",targetelm[0].firstChild.firstChild.getAttribute("src")); } function eventadd(){ //@cc_on document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', (function(evt){ var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; if(e.nodeName=="IMG" && e.parentNode.parentNode.parentNode.id=="gazou_r"){ document.getElementById("gazou_l").setAttribute("src",e.getAttribute("src")); } }),false); } // --> </script> </head> <body> <div id="gazou"> <hr /> <div> <div id="gazou_r"> <ul></ul> </div> <img src="about:blank" id="gazou_l"> <div class="clear"><hr /></div> </div> <hr /> </div> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
javascriptのサンプルです。 （画像の配置はcssで調整しています。） こおいう感じで <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <title></title> <style type="text/css"> #gazou_r {float:right;width:50%;} #gazou_l {width:50%;} #gazou_r ul li { float:left; padding-left:10px; list-style:none; width:40%; } #gazou_r ul li img {width:100%;} .clear { clear:both; } .clear hr { display:none; } </style> <script type="text/javascript"> <!-- window.onload = function () { imgset(); eventadd(); } function imgset(){ var lielm,targetelm; var imgsrc=new Array("/ff.jpg","/ff.jpg","/ff.jpg","/ff.jpg","/ff.jpg"); var targetelm=document.getElementById("gazou_r").getElementsByTagName("ul"); for (var i=0;i<imgsrc.length;i++){ lielm=document.createElement("li"); lielm.innerHTML='<img src="'+imgsrc[i]+'" alt="gazou" />'; targetelm[0].appendChild(lielm); } } function eventadd(){ //@cc_on document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', (function(evt){ var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; document.getElementById("gazou_l").setAttribute("src",e.getAttribute("src")); }),false); } // --> </script> </head> <body> <hr /> <div> <div> <div id="gazou_r"> <ul></ul> </div> <img src="/ff.jpg" id="gazou_l"> <div class="clear"><hr /></div> </div> </div> <hr /> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
#2様が詳しく解説なさっていますが、仕組みについての補足を… 小さな画像の部分はテーブルになっていて、それぞれのセル（<td>）は以下のような構造になっています。 <td> <a href="javascript:void(0)" onMouseOver="setimg('7')"> <img src="icon8.jpg" width="50" height="50" border="0" style="filter:alpha(opacity=50);" onMouseOver="this.filters['alpha'].opacity=100" onMouseOut="this.filters['alpha'].opacity=50"> </a> </td> 「onmouseover」がマウスを乗せたときのイベントハンドラを示していて、<a>タグにオンマウスすると、setimg()というファンクションが呼び出されます。 setimg()は引数（↑例では7番）で渡された画像を拡大表示のスペースに表示する機能を持っているという仕組みになっています。 もう一つ、<a>タグの中の<img>にもonmouseoverとonmouseoutのイベントが設定されています。 こちらは、丁度、画像のロールオーバーなどと同じで、マウスオンのときに表示効果、マウスオフのときにもとに戻すという記述になっています。 ""内に直接スクリプトのコードが書かれていますが、画像の透明度を変えるように設定されていて、マウスオフで半透明、マウスオンでクリアに表示されるようになっています。 ただし、ここで使われているfilter効果はIE専用なので、対応していないブラウザだと何の変化も起きません。（エラーにはならないらしい←未確認）
お礼
ありがとうございます。 HTMLやCSSは分かるのですが、javascriptはあんまり分かりません…。 やってみますね。 お手数おかけして申し訳ありません。
- dell_OK
- ベストアンサー率13% (766/5722)
サンプルをご所望のようですが、これはこのままドスパラのホームページを参考にされた方が早いのではないでしょうか。 とは言っても、ドスパラのホームページのソースをいきなり見てもどこで何をやっているのかすぐに見つける事はできないかも知れませんので、私がよくやっているソースの参考方法をお知らせします。ちなみに以下の手順は Internet Explorer 8 によるものです。 １．イベントが発生している画像のファイル名を調べる。 今回ので言うと、右側にあるいくつかの画像ですが、ポインタをのせると反応している画像ですね。この画像のどれかを右クリックして「名前を付けて画像を保存」を選択します。実際に保存はしなくてもいいのですが、保存しようとしてファイル名の入力ダイアログが出て、その画像のファイル名が初期値で表示されると思いますので覚えておきます。クリップボードなどに記憶させたら、キャンセルボタンで戻ります。 ここでは「icon1.jpg」が取得できました。 ２．ソース上から１の画像ファイル名を検索する。 ホームページ上の何もないところを右クリックして「ソースの表示」を選択します。設定されているテキストエディタなどでソースが確認できるようになります。そのエディタ上で先ほど覚えたファイル名を検索します。 ここでは「icon1」を検索すると以下の部分が見つかりました。 <img src="/5goods_pc/img/note_pic/galleria_gs/icon1.jpg" ３．イベントで何をしているか調べて、処理を追う。 ２で見つけた付近に、これに関係したイベントがあります。直前の <a> タグです。 <a href="javascript:void(0)" onMouseOver="setimg('0')"> ここでは、マウスポインタがのった時に「setimg」が呼ばれています。 次に「setimg」を検索してみますと、以下の部分が見つかります。 function setimg(n) { document.images['TOP_IMG'].src = img[n]; } おもむろに画像を変更している処理ですね。 TOP_IMG が何なのか検索してみると、配置位置的に画像が変わっている左の画像のようですので、この処理と見て間違いないでしょう。 では img[n] が何なのかを検索します。 と言ってもエディタで検索しても、うまく見つかりません。 ちょちょっとソースをながめて見ると、すぐ上で img を定義している部分がありました。 img = new Array( img1_path, img2_path, img3_path, img4_path, img5_path, img6_path, img7_path, img8_path ); ふむふむ。 で img1_path はと言うと、さらにすぐ上でなんだりかんだり定義していますが、どうも変化する画像ファイルのパスのようですので、これと見て間違いないでしょう。 今回は、これだけの手続きで、画像の差し替えがされているようです。 以上が、私の参考方法です。 これらの一連の流れを参考にされたら、これがひとつのサンプルになるのではないでしょうか。 今回参考にしたドスパラのホームページでは、とてもわかりやすい記述で JavaScript がコーディングされていましたので楽でしたが、場合によっては、このような参考にされるのをさけるためか、とても解読困難なホームページもあります。 それでも、特別な場合を除き、追跡して追跡できないわけでもないと思いますので、真似したいホームページがあればどんどん追跡してみてください。 それから。 ポインタがのった時に自分自身の画像も変化していますが、これについてはよく見ていません。何か少々面倒な事をしているような感じがしています。 こちらの動作も必要でしたら、質問者様の方で研究してみてください。
お礼
ありがとうございます。 日ごろHPを見てて「いいな」と思うjavascriptはたくさん ありますので、このようにサンプルを作っていけばいいんですね。 とても参考になりました。 お手数おかけしました。
- yyr446
- ベストアンサー率65% (870/1330)
他の回答者が解答しやすいように、条件を明確に 下のHTMLでCSSとJavascriptを使って、実現せよとか <body> <div> <div class="left"> <img src="abouit:blank" /> <div class="rigth"> <ul> <li><img src="img1.jpg"></li> <li><img src="img1.jpg"></li> <li><img src="img1.jpg"></li> <li><img src="img1.jpg"></li> </ul> </div> </body>
お礼
なるほど！ありがとうございます！ ちょっとやってみます。 またよろしくお願いします。