滚动悬停图像

-2

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

它需要是一个基于区域的翻转菜单，它取决于用户当前正在将图像的哪一部分悬停。图像和相关链接需要根据用户悬停在图像上的哪个区域进行更改。检查下面的图片： close box

点击下一个图像将低于之一后， open box

最后，当我将鼠标悬停在比萨饼的任何具体切片，图像应相应改变。一个例子是下面的图片：

enter image description here

是否有可能与CSS3，JavaScript的？

你尝试过什么了吗？ – j08691

是的，我今天花了将近6-7个小时。但我甚至没有接近解决方案。 –

请发布您的问题中的代码。 – j08691

我可以想到两种不同的方式。既然你标记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/

2015-04-22 16:46:14 zfrisch

糟糕的想法来提醒mousemove上的东西。 – Shikkediel

@Shikkediel你说得对，我在实践中同意这不是最好的主意，我回头注意到最好把它放在span标签中。我绝对不是故意暗示它是最有效的方法，只是想展示功能。 – zfrisch

为什么不把它变成console.log？粘贴此代码将不可行... – Shikkediel

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

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

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

脚本然后，根据光标在你的图像上，你可以放置一个具有正确背景位置的类。我建议你这个来创建你的类：http://www.spritecow.com/

希望它帮助，简单的脚本与精灵！

2015-04-22 16:49:35

谢谢。我一定会尝试一下。 –

这是我的荣幸，如果你需要更多的建议，或者如果你不明白它是否正确告诉我，我曾经在一个网站上做过一个面包片在滚动上被吃掉，并且与精灵一起工作得很好式。 –

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

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

2015-04-22 20:16:53

我也认为如果我使用精灵，它会更好的加载图像。但我不知道如何在区域标签内使用精灵，你知道吗？ –

回答