Javascript 滚动悬停图像

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

它需要是一个基于区域的滚动菜单，根据用户当前悬停在图像的哪个部分而变化。图像和相关链接需要根据用户悬停在图像的哪个区域进行更改。查看下图：

单击后，下一个图像将位于1下方，

最后，当我将鼠标悬停在任何一块比萨饼上时，图像应该相应地改变。下图是一个示例：

---

使用CSS3和JavaScript是否可能？

我可以想到两种不同的方法。既然您标记了JQuery，我认为这是可以接受的

pageX

和

pageY

跟踪屏幕上的鼠标移动，可用于确定屏幕的哪个区域被悬停。这是我用来确定坐标的小提琴：

编辑：为了检查坐标，您需要做的是将页面视为一个网格系统，就像JavaScript通常使用的那样，并确定如果mousex大于132小于155，那么它必须位于图像的这一部分。同样，一个带有不断更新的x和y坐标的单独跨度标记将非常有用。 a、 e:

if（鼠标x>=102&&mousex=26）{
//这样做
}

这最终是有回报的，但这是相当多的额外工作。另一种方法是使用图像贴图

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

解决您问题的一个好办法是创建一个包含比萨饼图像的雪碧，每个图像上缺少一片。然后，创建一个比萨饼图像大小的div：

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



然后，可以使用与此类似的脚本检查鼠标在该div上的X和Y位置

然后，根据光标在图像上的位置，可以在其上放置一个具有正确背景位置的类。我建议您创建以下类：

希望它有帮助，简单的脚本与精灵
 我已经解决了这个问题

我用了
和
你试过什么了吗？是的，我今天花了将近6-7个小时。但我甚至不太了解这个解决方案。请在你的问题中发布你的代码。答案是-是的，使用CSS3和JavaScript是可能的。你现在高兴吗？请让您的问题更易读易懂。我使用了jQuery翻转方法的图像映射。但是悬停的图像覆盖了主图像。所以其他的切片根本就不能悬停。有什么提示吗？在mousemove上提醒东西是个坏主意。@Shikkediel你是对的，我同意在实践中这不是个好主意，我回去注意到最好把它放在span标签中。我绝对不是想说这是最有效的方法，只是想展示功能。谢谢你的帮忙。但是如果我尝试在hover上添加一个新的图像，它将覆盖主图像（谷歌），那么它将不起作用。@ShahriarKabir不太确定你的意思是什么？也许我能帮忙？谢谢。我一定会试试。这是我的荣幸，如果你需要更多的建议，或者如果你不理解的话，告诉我，我以前在一个网站上做过，那里有一片面包在卷轴上被吃掉，它与雪碧配方配合得非常好。我也认为如果我使用雪碧，它会更好地加载图像。但我不知道如何使用sprite内部区域标签，你知道吗？
<img src="image.jpg" id="image1" usemap="#one">
<map name="one">
<area coords="30, 50, 70, 100" href="gohere.html">
</map>

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

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

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