滚动悬停图片

Question

我在互联网上搜索了很多，但我找不到任何有用的链接。我正在尝试开发自定义菜单。

它需要是一个基于区域的翻转菜单，根据用户当前正在覆盖的图像部分而改变。图像和相关链接需要根据用户悬停在图像的哪个区域而改变。检查下图：

点击下一张图片后会有一张图片，

最后，当我将鼠标悬停在任何特定的披萨上时，应相应更改图像。一个例子是下图：

是否可以使用CSS3，JavaScript？

Answer 1

我能想到两种不同的方式。因为你标记了JQuery我认为这是可以接受的。 pageX和pageY跟踪屏幕上的鼠标移动，可用于确定屏幕上悬停的区域。这是我用来确定坐标的小提琴：http://jsfiddle.net/cpk3mqxw/

$("#image").mousemove(function (e) {
mousex = e.pageX;
mousey = e.pageY;
$("#update").text("x: " + mousex + " y:" + mousey);
});

编辑：为了检查坐标，您需要做的是将页面视为网格系统，按照惯例使用JavaScript，并测量如果mousex大于132且小于155，则必须超过此部分图像。同样，具有不断更新的x和y坐标的单独span标记将是有帮助的。 a.e：

if(mouse x >= 102 && mousex <= 220 && mousey >= 26) {
//do this
}

最终会得到回报，但这是一项额外的工作。另一种方法是使用图像映射。

<img src="image.jpg" id="image1" usemap="#one">
<map name="one">
<area coords="30, 50, 70, 100" href="gohere.html">
</map>

如果你想要突出显示或设置样式的区域，你可以使用maphilight.js，你可以在这里找到更多信息：http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/

Answer 2

解决问题的一个很好的解决方案是创建一个包含披萨图像的精灵，每张图片上都缺少一个切片。然后，您创建一个比萨图像大小的div：

   <div id="myPizza"></div>

然后，您可以使用脚本similare检查鼠标在此div上的X和Y位置http://coursesweb.net/javascript/get-mouse-coordinates-inside-div-image_s2

然后，根据光标在图像上的位置，您可以在其上放置具有正确背景位置的类。我建议您创建课程：http://www.spritecow.com/

希望它有所帮助，带有精灵的简单脚本！

Answer 3

我已经能够解决这个问题了。

我使用<map>和<area>来定义我需要的每个区域（披萨切片）。 然后我将onclick()和onmouseover()事件处理程序添加到每个区域以调用函数来更改图片。

<强> HTML

<area shape="circle" coords="200,250,25" onmouseover = "changePic('newImage.png')" />
<img src='start_pic.png' name='mainPic' />

<强>的JavaScript

function changePic(img){
   mainPic.src = img;
}

PREVIEW LINK