是否可以使用CSS在图像地图上设计鼠标悬停?

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?

我在网页上有一个图片，也需要链接。我正在使用一个图像映射来创建链接，我想知道是否有一种方法可以在mouseover上创建一个区域形状，以进行少量的交互性。这是可能的吗?

I tried this without success:

我尝试过，但没有成功:

html

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

css

area { border: 1px solid #d5d5d5; }

Any suggestions?

有什么建议吗?

7 个解决方案

#1

CSS Only:

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). Which makes things hell of a lot simpler, no jQuery needed...

在我去超级市场的路上，你当然也可以跳过整个图像地图的想法，并利用:悬停在图像顶部的元素上(将div改为a-block)。这让事情变得更加简单，没有jQuery需要……

Short explanation:

简短说明:

• Image is in the bottom
• 图像在底部
• 2 x a with display:block and absolute positioning + opacity:0
• 2 x a显示:块和绝对位置+不透明度:0
• Set opacity to 0.2 on hover
• 将鼠标悬停时的不透明度设置为0.2

Example:

.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" />

Original Answer using jQuery

I just created something similar with jQuery, I don't think it can be done with CSS only.

我刚刚用jQuery创建了一些类似的东西，我不认为它只能用CSS完成。

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)
• 带有实际#map的透明gif在顶部(绝对位置)(防止鼠标滚轮出现时调用鼠标输出)
• jQuery is used to show/hide the divs
• jQuery用于显示/隐藏div

    $(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">&nbsp;</div>
<div id="overlayr2">&nbsp;</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>

Hope it helps..

希望它能帮助. .

#2

I don't think this is possible just using CSS (not cross browser at least) but the jQuery plugin ImageMapster will do what you're after. You can outline, colour in or use an alternative image for hover/active states on an image map.

我认为仅仅使用CSS(至少不是跨浏览器)是不可能的，但是jQuery插件ImageMapster会做你想做的事情。您可以在图像地图上为悬停/活动状态绘制轮廓、颜色或使用替代图像。

http://www.outsharked.com/imagemapster/examples/usa.html

http://www.outsharked.com/imagemapster/examples/usa.html

#3

With pseudo elements.

伪元素。

HTML:

HTML:

<div class="image-map-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/FibonacciBlocks.png" alt="" usemap="#image-map" />
    <div class="map-selector"></div>
</div>

<map name="image-map" id="image-map">
    <area alt="" title="" href="#" shape="rect" coords="54,36,66,49" />
    <area alt="" title="" href="#" shape="rect" coords="72,38,83,48" />
    <area alt="" title="" href="#" shape="rect" coords="56,4,80,28" />
    <area alt="" title="" href="#" shape="rect" coords="7,7,45,46" />
    <area alt="" title="" href="#" shape="rect" coords="10,59,76,125" />
    <area alt="" title="" href="#" shape="rect" coords="93,9,199,122" />
</map>

some CSS:

一些CSS:

.image-map-container {
    position: relative;
    display:inline-block;
}
.image-map-container img {
    display:block;
}
.image-map-container .map-selector {
    left:0;top:0;right:0;bottom:0;
    color:#546E7A00;
    transition-duration: .3s;
    transition-timing-function: ease-out;
    transition-property: top, left, right, bottom, color;
}
.image-map-container .map-selector.hover {
    color:#546E7A80;
}

.map-selector:after {
    content: '';
    position: absolute;
    top: inherit;right: inherit;bottom: inherit;left: inherit;
    background: currentColor;
    transition-duration: .3s;
    transition-timing-function: ease-out;
    transition-property: top, left, right, bottom, background;
    pointer-events: none;
}

JS:

JS:

$('#image-map area').hover(
    function () { 
        var coords = $(this).attr('coords').split(','),
            width = $('.image-map-container').width(),
            height = $('.image-map-container').height();
        $('.image-map-container .map-selector').addClass('hover').css({
            'left': coords[0]+'px',
            'top': coords[1] + 'px',
            'right': width - coords[2],
            'bottom': height - coords[3]
        })
    },
    function () { 
        $('.image-map-container .map-selector').removeClass('hover').attr('style','');
    }
)

https://jsfiddle.net/79ebt32x/1/

https://jsfiddle.net/79ebt32x/1/

#4

Here's one that is pure css that uses the + next sibling selector, :hover, and pointer-events. It doesn't use an imagemap, technically, but the rect concept totally carries over:

这是一个纯css，使用+ next兄弟选择器:hover和pointer-events。从技术上讲，它不使用imagemap，但是rect的概念完全保留了下来:

.hotspot {
    position: absolute;
    border: 1px solid blue;
}
.hotspot + * {
    pointer-events: none;
    opacity: 0;
}
.hotspot:hover + * {
    opacity: 1.0;
}
.wash {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.6);
}

<div style="position: relative; height: 188px; width: 300px;">
    <img src="http://demo.cloudimg.io/s/width/300/sample.li/boat.jpg">
        
    <div class="hotspot" style="top: 50px; left: 50px; height: 30px; width: 30px;"></div>
    <div>
        <div class="wash"></div>
        <div style="position: absolute; top: 0; left: 0;">A</div>
    </div>
        
    <div class="hotspot" style="top: 100px; left: 120px; height: 30px; width: 30px;"></div>
    <div>
        <div class="wash"></div>
        <div style="position: absolute; top: 0; left: 0;">B</div>
    </div>
</div>

#5

You can do this by just changing the html. Here's an example:

您可以通过更改html来实现这一点。这里有一个例子:

<hmtl>
  <head>
    <title>Some title</title>
  </head>
  <body> 
  <map name="navigatemap">
    <area shape="rect"  
          coords="166,4,319,41" 
          href="WII.htm"  
          onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'" 
          onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverWII).png'" 
    />
    <area shape="rect"
          coords="330,4,483,41" 
          href="OT.htm"  
          onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'" 
          onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOT).png'" 
    />

    <area shape="rect" 
          coords="491,3,645,41" 
          href="OP.htm"  
          onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'" 
          onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOP).png'" 
   />
  </map> 

  <img src="Assets/NavigationBar(OnHome).png" 
     name="navbar" 
     usemap="#navigatemap" />
  </body>
</html>

#6

Sorry to jump on this question late in the game but I have an answer for irregular (non-rectangular) shapes. I solved it using SVGs to generate masks of where I want to have the event attached.

很抱歉在后面的游戏中我要回答这个问题，但是我有一个不规则(非矩形)形状的答案。我使用SVGs来生成我想要将事件附加到哪个位置的遮罩，从而解决了这个问题。

The idea is to attach events to inlined SVGs, super cheap and even user friendly because there are plenty of programs for generating SVGs. The SVG can have a layer of the image as a background.

我们的想法是将事件附加到内联的svg，非常便宜，甚至用户友好，因为有很多程序可以生成svg。SVG可以将图像的一层作为背景。

http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/

http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/

#7

You could use Canvas

你可以用帆布

in HTML, simply add a canva

在HTML中，只需添加canva即可

<canvas id="locations" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser can't read canvas</canvas>

And in Javascript (only an example, that will draw a rectangle on the picture)

在Javascript中(仅举一个例子，在图片上画一个矩形)

var c = document.getElementById("locations");
var ctx = c.getContext("2d");
var img = new Image(); 
img.src = '{main_photo}';
img.onload = function() {    // after the pic is loaded
    ctx.drawImage(this,0,0); // add the picture
    ctx.beginPath();         // start the rectangle
    ctx.moveTo(50,50);
    ctx.lineTo(200,50);
    ctx.lineTo(200,200);
    ctx.lineTo(50,200);
    ctx.lineTo(50,50);

    ctx.strokeStyle = "sienna"; // set color
    ctx.stroke();               // apply color
    ctx.lineWidth = 5;
    // ctx.closePath();
};