| サンプル |
<![CDATA[
<html>
<head>
<title>クリックでクリッカブルマップを切り替える</title>
<script language="JavaScript"><!--
function changeMap(n)
{
for (i=1; i<4; i++) document.images["map"+i].style.visibility = "hidden";
document.images["map"+n].style.visibility = "visible";
}
// --></script>
</head>
<body>
<img src="1.gif" name="map1" usemap="#type1" style="position:absolute;top:0px;left:0px;visibility:visible">
<img src="2.gif" name="map2" usemap="#type2" style="position:absolute;top:0px;left:0px;visibility:hidden">
<img src="3.gif" name="map3" usemap="#type3" style="position:absolute;top:0px;left:0px;visibility:hidden">
<map name="type1">
<area shape="rect" coords="100,3,137,16" href="javaScript:changeMap(3)">
<area shape="rect" coords="55,3,89,16" href="javaScript:changeMap(2)">
<area shape="circle" coords="77,68,6" href="http://www.shiojiri.ne.jp/~openspc/">
</map>
<map name="type2">
<area shape="rect" coords="6,3,41,16" href="javaScript:changeMap(1)">
<area shape="rect" coords="100,3,137,16" href="javaScript:changeMap(3)">
<area shape="circle" coords="104,70,6" href="http://game.gr.jp/">
</map>
<map name="type3">
<area shape="rect" coords="55,3,89,16" href="javaScript:changeMap(2)">
<area shape="rect" coords="6,3,41,16" href="javaScript:changeMap(1)">
<area shape="circle" coords="54,76,7" href="http://www.yahoo.co.jp/">
</map>
</body>
</html>
]]>
|
クリックでクリッカブルマップを切り替える