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

解決済

質問者：Pitch-kun
質問日時：2009/08/01 12:40
回答数：1件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yuu_x
回答日時：2009/08/03 01:27

<?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-transitio …
<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>

#全角スペースでインデントが入れてあるので、半角スペースに変換してください。