我的网页上有一张图片,该图片也需要链接。我正在使用图像映射来创建链接,并且我想知道是否存在一种方法可以将鼠标悬停时的区域形状设置为较小的交互性。这可能吗?
我尝试没有成功:
html
<img src="{main_photo}" alt="locations map" usemap="#location-map" /> <map name="location-map"> <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" /> <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" /> <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" /> </map>
CSS
area { border: 1px solid #d5d5d5; }
有什么建议么?
CSS:
在去超市的路上考虑它,您当然也可以跳过整个图像地图的想法,并利用:hover图像顶部的元素(将div更改为a块)。这使事情变得简单得多,不需要jQuery …
:hover
简短说明:
例:
.area { background:#fff; display:block; height:475px; opacity:0; position:absolute; width:320px; } #area2 { left:320px; } #area1:hover, #area2:hover { opacity:0.2; }
<a id="area1" class="area" href="#"></a> <a id="area2" class="area" href="#"></a> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />
使用jQuery的原始答案 我只是用jQuery创建了类似的东西,但我认为这不能仅用CSS来完成。
$(document).ready(function() { if($('#location-map')) { $('#location-map area').each(function() { var id = $(this).attr('id'); $(this).mouseover(function() { $('#overlay'+id).show(); }); $(this).mouseout(function() { var id = $(this).attr('id'); $('#overlay'+id).hide(); }); }); } });
body,html { margin:0; } #emptygif { position:absolute; z-index:200; } #overlayr1 { position:absolute; background:#fff; opacity:0.2; width:300px; height:160px; z-index:100; display:none; } #overlayr2 { position:absolute; background:#fff; opacity:0.2; width:300px; height:160px; top:160px; z-index:100; display:none; }
<img src="http://www.tfo.be/jobs/axa/premiumplus/img/empty.gif" width="300" height="350" border="0" usemap="#location-map" id="emptygif" /> <div id="overlayr1"> </div> <div id="overlayr2"> </div> <img src="http://2.bp.blogspot.com/_nP6ESfPiKIw/SlOGugKqaoI/AAAAAAAAACs/6jnPl85TYDg/s1600-R/monkey300.jpg" width="300" height="350" border="0" /> <map name="location-map" id="location-map"> <area shape="rect" coords="0,0,300,160" href="#" id="r1" /> <area shape="rect" coords="0,161,300,350" href="#" id="r2"/> </map>