- ベストアンサー
ロールオーバーの動作について
- 画像のロールオーバーで表示が変わる方法を探しています。
- Aと1,2,3の画像があり、マウスを合わせると拡大画像が表示されます。
- さらに、同時にロールオーバーするとTにテキストを表示させたいです。
- dcx147
- お礼率33% (214/636)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <div> <div id="v"> <img src="イメージマップを張っている画像" alt="イメージマップ" width="300" height="300" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="107,330,127,353" href="#" alt="説明0" id="m0"> <area shape="rect" coords="165,307,183,322" href="#" alt="説明1" id="m1"> <area shape="rect" coords="276,267,294,284" href="#" alt="説明2" id="m2"> <area shape="rect" coords="168,264,190,282" href="#" alt="説明3" id="m3"> <area shape="rect" coords="194,229,214,253" href="#" alt="説明4" id="m4"> <area shape="rect" coords="164,159,189,177" href="#" alt="説明5" id="m5"> <area shape="rect" coords="149,85,171,107" href="#" alt="説明6" id="m6"> <area shape="rect" coords="118,83,142,101" href="#" alt="説明7" id="m7"> <area shape="rect" coords="70,96,100,117" href="#" alt="説明8" id="m8"> </map> </div> <a href="url0" id="bigurl"> <img src="切り替わる部分に最初に表示する画像" alt="最初" width="280" height="280" id="big"> </a> </div> <div id="mess"></div> <script> document.getElementById('v').onmouseover = function(){ var obj = event.srcElement; var imgname; if(obj.tagName != 'AREA' ) { imgname = '切り替わる部分に最初に表示する画像'; document.getElementById('big').alt = imgname; document.getElementById('big').src = imgname; document.getElementById('mess').innerHTML='あ～'; return; } var n=obj.id?obj.id.match(/^m(\d+)$/)[1]-0:''; imgname = './img/'+n+'.gif'; document.getElementById('big').alt = imgname; document.getElementById('big').src = imgname; document.getElementById('mess').innerHTML=obj.alt; } document.getElementById('v').onclick = function(){ return false; } </script>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
「javascript＋ロールオーバー」で検索すればいくらでもサンプルはあるはずです。 通常のものは、1、2、3にマウスを合わせるとその部分が変化するのに対して、ご質問のものは、A、Tの部分を変化させるところが違うだけでは？ A、T部にidをふっておいて、document.getElementByIdで得られるオブジェクトのプロパティを変化させればよいと思われますが？
余計な機能付き。 <html> <body> <div> <div id="v"> <a href="url0"><img src="./img/0.gif" width="90" height="60" alt="menu0" border="0"></a> <a href="url1"><img src="./img/1.gif" width="90" height="60" alt="menu1" border="0"></a> <a href="url2"><img src="./img/2.gif" width="90" height="60" alt="menu2" border="0"></a> <a href="url3"><img src="./img/3.gif" width="90" height="60" alt="menu3" border="0"></a> <a href="url4"><img src="./img/4.gif" width="90" height="60" alt="menu4" border="0"></a> <a href="url5"><img src="./img/5.gif" width="90" height="60" alt="menu5" border="0"></a> </div> <a href="url0" id="bigurl"> <img id="big" src="./img/0.gif" alt="menu0" width="540" height="360" border="0"> </a> </div> <div id="mess"></div> <script> document.getElementById('v').onmouseover = chk; var rap = wrapping('screen', 'big', '#ffffff', 0) ;//いらない function chk(e){ o=e?e.target: event.srcElement; if(o.tagName!='IMG') return; new setOpacity( rap, 100, -5, 10);//いらない document.getElementById('big').src = o.src; document.getElementById('big').alt = o.alt; document.getElementById('mess').innerHTML = o.alt; document.getElementById('bigurl').href = o.parentNode.href; } //「いらない」を削除するなら以下もいらない。 function wrapping( newId, elementId, backcolor, opacity ){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; var wrap = document.createElement('div'); wrap.id = newId; with( wrap.style ){ position = 'absolute'; backgroundColor = backcolor; /*@cc_on @if(1) filter = 'alpha(opacity='+ opacity+ ')'; @else @*/ MozOpacity = (opacity / 100); opacity = (opacity / 100);/*@end@*/ top = element.offsetTop; left = element.offsetLeft; width = element.offsetWidth; height = element.offsetHeight; } document.body.appendChild( wrap ); return document.getElementById(newId); } function setOpacity( elementId, opacity, step, wtime ){ this.opacitySet = function(n){ this.opacity = n; this.obj.style./*@cc_on @if(1) filter = 'alpha(opacity='+ this.opacity+ ')'; @else @*/ MozOpacity = this.obj.style.opacity = (this.opacity / 100);/*@end@*/ } this.go = function(){ this.opacitySet( this.opacity += this.step ); if( this.opacity<0 ) { this.opacitySet(0); clearInterval( this.tmid );return; } if( this.opacity>100 ) { this.opacitySet(100); clearInterval( this.tmid ); return; } } this.obj = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; if( !this.obj ) return false; if( opacity != undefined ) this.opacitySet( opacity ); if( step != undefined ) this.step = step; if( wtime != undefined ) this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime); return true; } </script>
お礼
早速のお返事ありがとうございます！感動です★ イメージマップ要素内でリンクを張り動作させたく下記のように してみましたがイメージマップだとうまく動作させる方法が わからずです^^; また、現状でリンクをクリックするとurl0などへ飛んでしまうの ですがページへ飛ばさないようにする事は可能なものでしょうか？ <div> <img src="イメージマップを張っている画像" alt="イメージマップ" width="300" height="300" border="0" usemap="#Map"> <div id="v"> <map name="Map"> <area shape="rect" coords="107,330,127,353" href="url0" alt="説明0"> <area shape="rect" coords="165,307,183,322" href="url1" alt="説明1"> <area shape="rect" coords="276,267,294,284" href="url2" alt="説明2"> <area shape="rect" coords="168,264,190,282" href="url3" alt="説明3"> <area shape="rect" coords="194,229,214,253" href="url4" alt="説明4"> <area shape="rect" coords="164,159,189,177" href="url5" alt="説明5"> <area shape="rect" coords="149,85,171,107" href="url6" alt="説明6"> <area shape="rect" coords="118,83,142,101" href="url7" alt="説明7"> <area shape="rect" coords="70,96,100,117" href="url8" alt="説明8"> </map> </div> <a href="url0" id="bigurl"> <img src="切り替わる部分に最初に表示する画像" alt="最初" width="280" height="280" id="big"> </a> </div> <div id="mess"></div>