谁来挑战高难度，如何在动态页面做动态图片热点

Question

我做了一个asp的动态页面显示图片，图片是根据上一个页面传过来的值动态显示的，问题是图片的作用是显示区域，一张图片上有多个区域，八张图片，有很多区域，代表不同的信息，也就是说图片的生成是动态的，图片上的热点生成也是根据图片的不同而不同。如何在这样页面上做出当单击图片上的不同区域可以传递不同的值到下一个页面，dreamweaver里有做固定热点的，不能满足要求，有能做的吗。谢谢。

Answer 1

这个不是js特效 代码吗，单击图片上的不同区域可以传递不同的值到下一个页面，不就是在不同的图片上一个超连接。js特效代码有的。

Answer 2

不用a模仿也行，主要是图片要有容器为relative就行，添加的热点就会变成相对于容器的坐标了，这样隐藏图片也不会导致图片热点消失错位。你的任务主要就是绘制出相对于容器的map就行了<style type="text/css"> 
body{margin:0px;padding:0px;}
.relative{position:relative;float:left}/*注意容器要设置为刚好和图片大小一致，所以推荐div+float来实现*/}
</style>
<div class="relative">
<img src="http://www.coding123.net/imgblog/20121009/1649028793.jpg" border="0" usemap="#Map3">
<map name="Map3" id="Map3"><area shape="rect" coords="138,3,187,16" href="javascript:alert('加勒比')" /><area shape="rect" coords="182,18,220,30" href="javascript:alert('安圭拉')" /><area shape="rect" coords="183,50,215,66" href="javascript:alert('中美洲')" /><area shape="rect" coords="182,89,222,102" href="javascript:alert('南美洲')" /></map>
</div>
<div class="relative">
<img src="http://www.coding123.net/imgblog/20121009/1648463012.jpg" border="0" usemap="#Map"  />
<map name="Map" id="Map"><area shape="rect" coords="109,81,153,94" href="javascript:alert('北美洲')" /></map>
</div>
<div class="relative">
<img src="http://www.coding123.net/imgblog/20121009/1648376137.jpg" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="rect" coords="15,75,45,87" href="javascript:alert('英国')" /><area shape="rect" coords="108,62,144,80" href="javascript:alert('欧洲')" /><area shape="rect" coords="15,104,53,117" href="javascript:alert('葡萄牙')" /><area shape="rect" coords="160,106,189,119" href="javascript:alert('亚洲')" /></map>
</div>
<div style="clear:both"><input type="button" value="随机隐藏一张图片，热点还是对的" onclick="hide()"/></div>
<script type="text/javascript"> 
var dvs=[];
function RND(min,max){if(max<min){var tmp=min;min=max;max=tmp;}return Math.floor(Math.random()*(max-min+1)+min);}
function hide(){var rnd=RND(0,dvs.length-1);for(var i=0,j=dvs.length;i<j;i++)dvs[i].style.display=rnd==i?'none':'block';}
window.onload=function(){var tdvs=document.getElementsByTagName('div');for(var i=0,j=tdvs.length;i<j;i++)if(tdvs[i].className=='relative')dvs[dvs.length]=tdvs[i];}
</script>