Html 是否可以使用 CSS 在图像地图上设置鼠标悬停样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8343531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to style a mouseover on an image map using CSS?
提问by forrest
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
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?
有什么建议？
采纳答案by ptriek
CSS Only:
仅 CSS：
Thinking about it on my way to the supermarket, you could of course also skip the entire image map idea, and make use of :hoveron the elements on top of the image (changed the divs to a-blocks). Which makes things hell of a lot simpler, no jQuery needed...
在去超市的路上考虑一下，你当然也可以跳过整个图像映射的想法，并利用:hover图像顶部的元素（将 div 更改为 a-blocks）。这让事情变得简单多了，不需要 jQuery ......
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
- 图像在底部
- 2 xa 带显示：块和绝对定位 + 不透明度：0
- 悬停时将不透明度设置为 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
使用 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
#mapis on top (absolute position) (to prevent call tomouseoutwhen the rollovers appear) - jQuery is used to show/hide the divs
- 图像在底部
- 具有绝对定位 + 显示的翻转（图像或颜色）的 Div：无
- 透明 gif 与实际
#map在顶部（绝对位置）（以防止mouseout出现翻转时调用） - 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"> </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>Hope it helps..
希望能帮助到你..
回答by clm
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','');
}
)
回答by SpaceBeers
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 会做你想要的。您可以为图像地图上的悬停/活动状态绘制轮廓、着色或使用替代图像。
回答by Jason Kleban
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 rectconcept totally carries over:
这是一个纯 css，它使用+下一个同级选择器:hover, 和pointer-events。从技术上讲，它不使用图像映射，但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>回答by Eternetik
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>
回答by Rafiki
You could use Canvas
你可以使用画布
in HTML, simply add a canva
在 HTML 中，只需添加一个画布
<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();
};
回答by Juan Carlos Moreno
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.
很抱歉在游戏后期跳到这个问题上，但我有一个不规则（非矩形）形状的答案。我使用 SVG 解决了它来生成我想要附加事件的位置的掩码。
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/
