asp.net ImageMap - 在鼠标上方更改图像 [英] asp.net ImageMap - change image on mouse over

问题描述

我正在尝试创建一个随用户鼠标悬停在图像的某些部分上而变化的ImageMap。我有以下ImageMap，用户可以点击颜色并转到另一页：



http://i.stack.imgur.com/hXJSC.png [ ^ ]



我创建了4个大小相同的图像，并希望在鼠标悬停时换出图像。例如，当我将鼠标悬停在蓝色上时，我希望图像看起来像这样：



http://i.stack.imgur.com/gwb3q.png [ ^ ]



当我将鼠标悬停在绿色部分上时，我希望它看起来像这样：



http://i.stack.imgur.com/EptjR.png [ ^ ]



完成我想要做的事情的最佳方法是什么？我计划使用asp.net进行实现，但一直无法实现。



这是ImageMap / hotspot的代码：

 <   asp：ImageMap     ID   =  ImageMap1    runat   =  server   高度  =  300px    HotSpotMode   = 导航    ImageAlign   = 中间    ImageUrl   = 〜/ images / hotspot-logo.png   宽度  =  303px >  
 <   asp：PolygonHotSpot     AlternateText   =  orange   坐标  =  151,8,220,78,150,150,78,78    HotSpotMode   = 导航    NavigateUrl   = 〜/ orange.aspx    /  >  
 <   asp：PolygonHotSpot     AlternateText   =  red   坐标  =  220,78,150,150,222,222,292,150    HotSpotMode   = 导航    NavigateUrl   =  〜/ red.aspx    /  > ;  
 <   asp：PolygonHotSpot     AlternateText   =  green   坐标  =  78,78,150,150,78,222,8,150    HotSpotMode  < span class =code-keyword> = 导航    NavigateUrl   = 〜/ green.aspx    /  >  
 <   asp：PolygonHotSpot     AlternateText   =  blue   坐标  =  150,150,78,222,150,292,222,222   < span class =code-attribute> HotSpotMode   = 导航    NavigateUrl   = 〜/ blue.aspx    /  >  
 <   / asp：ImageMap  >  

解决方案

你想要的功能与 ImageMap 无关。



您可以使用图像映射，但仅适用于命中测试，这实际上是图像映射的唯一目的。不幸的是，您的活动不是点击，而是鼠标悬停。此外，在服务器上运行它真的很糟糕，因为它会导致回发，对于应该立即更改图像的点击来说太慢了。你真的需要在客户端使用JavaScript完成所有工作。



简单的解决方案是：使用JavaScript：处理事件 mousemove 。根据鼠标坐标，通过修改 src 属性的值，将当前图像替换为另一个图像。您需要为要使用的每个组合单独添加图像。

请参阅： http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents [ ^ ]。



如果使用jQuery，可以轻松完成。您可以使用图像jQuery包装器的 .attr（src）并使用 .replace（）替换其值。你可以在这里找到一个简单的例子： http://stackoverflow.com/questions/11130008/动态替换图像源与jquery [ ^ ]。



这就是你使用jQuery处理事件的方式：https://api.jquery.com/mousemove [ ^ ]。



如果您需要学习jQuery（强烈推荐），请参阅：

< a href =http://en.wikipedia.org/wiki/JQuery> http://en.wikipedia.org/wiki/JQuery ，

http://jquery.com ，

http：/ /learn.jquery.com ，

http： //learn.jquery.com/using-jquery-core ，

http://learn.jquery.com/about-jquery/how-jquery-works （从这里开始）。

-SA

请尝试java脚本或css .........................

I'm trying to create an ImageMap that changes as users mouse over certain parts of the image. I have the following ImageMap where users are able to click on a color and go to a different page:

http://i.stack.imgur.com/hXJSC.png[^]

I created 4 additional images that are all the same size, and would like to swap out the image on mouseover. For example, when I mouseover the blue I want the image to look like this:

http://i.stack.imgur.com/gwb3q.png[^]

And when I mouse over the green part, I want it to look like this:

http://i.stack.imgur.com/EptjR.png[^]

What is the best way to accomplish what I'm trying to do? I planned on using asp.net for the implementation but have been unable to do so.

Here is the code for the ImageMap/hotspot:

<asp:ImageMap ID="ImageMap1" runat="server" Height="300px" HotSpotMode="Navigate" ImageAlign="Middle" ImageUrl="~/images/hotspot-logo.png" Width="303px">
                            <asp:PolygonHotSpot AlternateText="orange" Coordinates="151,8,220,78,150,150,78,78" HotSpotMode="Navigate" NavigateUrl="~/orange.aspx" />
                            <asp:PolygonHotSpot AlternateText="red" Coordinates="220,78,150,150,222,222,292,150" HotSpotMode="Navigate" NavigateUrl="~/red.aspx" />
                            <asp:PolygonHotSpot AlternateText="green" Coordinates="78,78,150,150,78,222,8,150" HotSpotMode="Navigate" NavigateUrl="~/green.aspx" />
                            <asp:PolygonHotSpot AlternateText="blue" Coordinates="150,150,78,222,150,292,222,222" HotSpotMode="Navigate" NavigateUrl="~/blue.aspx" />
                        </asp:ImageMap>

解决方案

The functionality you want has nothing to do with ImageMap.

You could use image map, but only for the hit test, which is actually the sole purpose of the image map. Unfortunately, your event is not click, but mouse over. Also, it's really bad to run it on server, because it will cause the postback, too slow for a click which is supposed to change image immediately. You really need to do it all on the client side using JavaScript.

The simple solution is: with JavaScript: handle the event mousemove. Depending on mouse coordinates, replace the current image with another image, via modification of the value of the src attribute. You will need a separate image for each combination you want to use.
Please see: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents[^].

It can be done easily if you use jQuery. You can use .attr("src") of the image jQuery wrapper and replace its value using .replace(). You can find a simple example here: http://stackoverflow.com/questions/11130008/dynamically-replace-image-source-with-jquery[^].

And this is how you handle the event using jQuery: https://api.jquery.com/mousemove[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery,
http://jquery.com,
http://learn.jquery.com,
http://learn.jquery.com/using-jquery-core,
http://learn.jquery.com/about-jquery/how-jquery-works (start from here).

—SA

please try java script or css.........................

这篇关于asp.net ImageMap - 在鼠标上方更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！