是否可以使用CSS在图像地图上设置鼠标悬停的样式？ [英] Is it possible to style a mouseover on an image map using CSS?

问题描述

我在网页上有一个也需要链接的图片。我使用图像映射来创建链接，我想知道是否有一种方式来在鼠标悬停的样式的区域形状的轻微交互性。这是可能吗？

我没有成功尝试过：

html

 < img src ={main_photo}alt =locations mapusemap =＃location-map/& 
< map name =location-map> 
< area shape =rectcoords =208,230,290,245href ={site_url} locations / grand_bay_al/> 
< area shape =rectcoords =307,214,364,226href ={site_url} locations / mobile_al/> 
< area shape =rectcoords =317,276,375,290href ={site_url} locations / loxley_al/> 
< / map> 
  

css

  area {border：1px solid＃d5d5d5; } 
  

有任何建议吗？

方案

我刚刚创建了类似 http：// www.premiumplus.be/nl/kortingen/kortingen-hoe-werkt-het/ （网站不再在线） - 用jQuery，我不认为它可以用CSS做。 / p>

http://jsfiddle.net/jSNga/ 上的简化版本p>

  $（document）.ready（function（）{
 if（$（'＃location-map'））{ 
 $（'＃location-map area'）。each（function（）{
 var id = $（this）.attr（'id'）; 
 $（this）.mouseover （function（）{
 $（'＃overlay'+ id）.show（）; 
 
}）; 
 
 $（this）.mouseout （）{
 var id = $（this）.attr（'id'）; 
 $（'＃overlay'+ id）.hide（）; 
}）; 
 
}）; 
} 
}）; 
  

简短说明：

• 图片位于底部


• 具有绝对定位功能和图片或颜色的图片展示：none


• 透明的gif


• jQuery用于显示/隐藏divs

实际#map在顶部（绝对位置） / ul>



希望它有帮助..





编辑：





想想在我去超市的路上，你当然可以跳过整个图像映射的想法，并利用：悬停在图像顶部的元素（将divs改为a-blocks）：





http://jsfiddle.net/jSNga/4/





这使得事情变得很简单，不需要jQuery ...





简短说明：






• 图片位于底部


• 2 xa with display：block and absolute positioning + opacity：0


• 在悬停时将不透明度设置为0.2





I have an image on a web page that also requires links. I am using an image map to create the links and I am wondering if there is a way to style the area shape on mouseover for a minor touch of interactivity. Is this possible?

I tried this without success:

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; }

Any suggestions?

解决方案

I just created something similar for http://www.premiumplus.be/nl/kortingen/kortingen-hoe-werkt-het/ (site not online anymore) - with jQuery, I don't think it can be done with CSS only.

Simplified version on http://jsfiddle.net/jSNga/

$(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();
            });

        });
    }
});

Short explanation:

• Image is in the bottom
• Divs with rollover (image or color) with absolute positioning + display:none
• Transparent gif with the actual #map is on top (absolute position) (to prevent call to mouseout when the rollovers appear)
• jQuery is used to show/hide the divs

Hope it helps..

EDIT:

Thinking about it on my way to the supermarket, you could of course also skip the entire image map idea, and make use of :hover on the elements on top of the image (changed the divs to a-blocks):

http://jsfiddle.net/jSNga/4/

Which makes things hell of a lot simpler, no jQuery needed...

Short explanation:

• Image is in the bottom
• 2 x a with display:block and absolute positioning + opacity:0
• Set opacity to 0.2 on hover

这篇关于是否可以使用CSS在图像地图上设置鼠标悬停的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！