ベストアンサー

Gif上の領域毎にその位置でプルダウンメニューを表示させたい

2009/08/01 12:40

Gif画面上に１５個程度の（10文字程度表示の）rect領域があります。このrect領域をクリックするとその位置でプルダウンメニューを表示して選択処理をさせたいのです。プルダウンのメニュー数と文字は共通なのですが、領域毎メニュー選択後のリンク先を変えたいのです。どなたかアドバイスを頂けないでしょうか。切望します。

Pitch-kun
お礼率50% (11/22)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

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

ベストアンサー

yuu_x
ベストアンサー率52% (106/202)

2009/08/03 01:27 回答No.1

<?xml version="1.0" encoding="EUC-JP" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> * { 　margin　　　　　: 0px; 　padding　　　　 : 0px; } li { 　list-style　　　: none; } .wrapper { 　position　　　　: relative; } .wrapper img { 　border-width　　: 0px; } .menu ul { 　border　　　　　: 2px outset #CCCCCC; } .menu a { 　display　　　　 : inline-block; 　padding　　　　 : 0.1em 0.5em; 　background-color: #CCCCCC; } .menu a:hover { 　color　　　　　 : white; 　background-color: slategray; } </style> <script type="text/javascript"> /*@cc_on@*/ var menuEle = null; var timerId = null; function clickHandler( evt ) { 　var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/; 　var c = null; 　　if( menuEle != null ) { 　　menuEle.style.left = '-5000px'; 　　menuEle = null; 　} 　　if( t.nodeName == 'AREA' ) { 　　if( menuEle = document.getElementById( t.getAttribute( 'href' /*@,2@*/).slice(1) ) ) { 　　　c = t.coords.split( ',' ); 　　　menuEle.style.top = c[3] + 'px'; 　　　menuEle.style.left = c[0] + 'px'; 　　　t.focus(); 　　　　　　evt./*@if(1) returnValue = false @else@*/ preventDefault( ) /*@end@*/; 　　　animation( menuEle ); 　　} 　} } function animation( e ) { 　var r = 0; 　　clearInterval( timerId ); 　e.style.clip = 'rect( 0px 0px 0px 0px )'; 　timerId = setInterval( function() { 　　r += 0.1; 　　e.style.clip = 'rect( 0px ' + Math.round( e.offsetWidth * r ) + 'px ' + Math.round( e.offsetHeight * r ) + 'px 0px )'; 　　if( r >= 1 ) clearInterval( timerId ); 　}, 10 ); } document.write( 　　'\u003Cstyle type="text/css">' 　+ '.menu dt { display　: none; }' 　+ '.menu ul { position : absolute; left : -5000px; }' 　+ '\u003C/style>' ); document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', clickHandler, false ); </script> </head> <body> <div class="wrapper"> <p><img src="xx.gif" usemap="#map0" alt="" /></p> <map name="map0" id="map0"> 　<area shape="rect" alt="" coords="175,175,225,225" href="#menu0" /> 　<area shape="rect" alt="" coords="0,0,100,100" href="#menu1" /> </map> <div class="menu"> 　<dl> 　　<dt>XXXXX</dt> 　<dd> 　 <ul id="menu0"> 　　<li><a href="#">item0-1</a></li> 　　<li><a href="#">item0-2</a></li> 　　<li><a href="#">item0-3</a></li> 　</ul> 　</dd> 　　<dt>XXXXX</dt> 　<dd> 　 <ul id="menu1"> 　　<li><a href="#">item1-1</a></li> 　　<li><a href="#">item1-2</a></li> 　　<li><a href="#">item1-3</a></li> 　</ul> 　</dd> </dl> </div> </div> </body> </html> #全角スペースでインデントが入れてあるので、半角スペースに変換してください。

質問者