onHover 使用图像映射更改图像答案

【问题标题】：onHover change image using image-maponHover 使用图像映射更改图像
【发布时间】：2013-06-06 14:46:43
【问题描述】：

我的 JS 小提琴：http://jsfiddle.net/j6cAu/

HTML：

            <div style="text-align:center; width:330px; margin-left:auto; margin-right:auto;">
                <img id="Image-Maps_8201306061020497" src="http://www.interfaithmedical.com/skillsets_bw.png" usemap="#Image-Maps_8201306061020497" border="0" width="330" height="330" alt="" />
                <map id="_Image-Maps_8201306061020497" name="Image-Maps_8201306061020497">
                    <area shape="poly" coords="172,165,311,120,325,100,313,102,299,78,280,52,259,37,242,27,222,18,189,12,173,12,171,89,172,154," href="http://www.pz.com" alt="CSS" title="CSS"   />
                    <area shape="poly" coords="174,172,260,288,281,297,274,288,301,259,320,224,327,189,328,159,320,125,249,149," href="http://www.pz.com" alt="JQuery" title="JQuery"   />
                    <area shape="poly" coords="169,179,258,300,225,319,184,328,150,328,106,321,90,309,79,318,83,293,123,236,165,180," href="http://www.pz.com" alt="HTML" title="HTML"   />
                    <area shape="poly" coords="161,173,71,294,42,270,22,237,11,200,9,164,14,139,4,134,21,128,72,145,149,169," href="http://www.pz.com" alt="GFX" title="GFX"   />
                    <area shape="poly" coords="164,165,19,118,35,80,60,50,97,28,150,13,150,2,164,20,163,123," href="http://www.pz.com" alt="PHP" title="PHP"   />
                </map>
            </div>
<img src="http://www.interfaithmedical.com/skillsets.png" />

我要做的是根据用户鼠标悬停操作更改图像的一部分。例如，假设用户将鼠标悬停在 CSS 上，彩色图像的 CSS 部分应该淡入，黑白应该淡出，鼠标移出时，彩色图像应该淡出，黑白图像应该淡入。这可能吗？

我的猜测是，直接把黑白图放在颜色上面，用JQuery完成交换？

解决方案：

<HEAD>
<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
</HEAD>

<BODY
                <img id="circle" src="theImages/skillsets_bw.png" border=1 usemap="#circle" alt="circle">
                <map id="circle" name="circle">
                    <area shape="poly" coords="73, 296, 165, 172, 24, 126, 1, 132, 2, 135, 12, 139, 8, 162, 8, 187, 12, 210, 21, 234, 33, 257, 48, 276, 61, 289" href="http://www.pz.com" alt="GFX" title="GFX" />
                    <area shape="poly" coords="82, 293, 169, 174, 260, 300, 238, 314, 209, 326, 184, 329, 161, 330, 131, 326, 106, 319, 89, 309, 83, 320" href="http://www.pz.com" alt="HTML" title="HTML" />
                    <area shape="poly" coords="321, 123, 327, 149, 329, 180, 325, 208, 315, 238, 303, 260, 276, 287, 284, 296, 258, 290, 173, 171" href="http://www.pz.com" alt="JQuery" title="JQuery" />
                    <area shape="poly" coords="20, 117, 164, 165, 165, 18, 151, 0, 150, 12, 127, 15, 102, 23, 71, 41, 49, 61, 30, 88" href="http://www.pz.com" alt="PHP" title="PHP" />
                    <area shape="poly" coords="172, 43, 172, 165, 311, 120, 325, 100, 312, 104, 301, 80, 284, 59, 263, 40, 240, 26, 216, 17, 189, 12, 171, 11" href="http://www.pz.com" alt="CSS" title="CSS" />
                </map>

<script type="text/javascript">
opacity = 0.9;
</script>
<!--[if IE]>
<script type="text/javascript">
opacity =  0.1;
</script>
<![endif]-->
<script>
$(document).ready(function () {
    $('#usa').mapster({
        fillOpacity: opacity,
        render_highlight: {
            fillColor: '2aff00',
            stroke: false,
            altImage: 'theImages/skillsets.png'
        },
        render_select: {
            fillColor: 'ff000c',
            stroke: false,
            altImage: 'theImages/skillsets.png'
        },
        fadeInterval: 50
    });
});
</script>
</BODY>

【问题讨论】：

标签： html imagemap

【解决方案1】：

您可以使用 ImageMapster，这是一个开箱即用的 jquery 插件。

您使用 ImageMapster 的示例：http://jsfiddle.net/jamietre/shbjk/

$('#Image-Maps_8201306061020497').mapster({
    render_highlight: {
        altImage: 'http://www.interfaithmedical.com/skillsets.png'
    }
});

如果您对该技术感兴趣，在画布上进行绘图的 javascript 代码是 here。

【讨论】：

这是我的链接：interfaithmedical.com/pz/index.htm 但它有一个错误。不知道我做错了什么。
您需要下载并在项目中包含 imagemapster 脚本，就像您将“theScriptsStyles/imageHover.js”包含为 script 元素一样。首页下载链接：outsharked.com/imagemapster
好吧听起来不错。 imageHover 是那个脚本，但我认为我做错了什么，我直接链接到 outsharked.com 脚本，但现在它正在做其他事情。请在上一条评论中查看我的网页链接。
虽然它在 IE 中根本不工作，但它在 FF/Chrome 中确实可以工作，所以我猜它不兼容 IE？
它可以在 IE 中使用，但是使用备用图像的特定功能不起作用，因为 IE6-8 不支持画布。它仍然会使用填充颜色效果突出显示。在查看您的链接时，我认为问题只是 CSS，效果没有在正确的位置呈现。如果您将样式应用于图像，请尝试将它们移动到包装器中，例如<div style="..." class="..."> <img src="..."> </div> -- 因为 imagemapster 需要在图像上做很多特定的定位，如果已经应用了样式，它并不总是正常工作。

【解决方案2】：

您必须将彩色图像切割成地图定义的部分。生成的部分自然必须具有透明背景。将它们放置在黑白图像上并将属性“display”设置为“none”。

或如果您能够使用 HTML5 将画布放置在图像上并将彩色图像部分直接加载到画布元素中。

【讨论】：

好吧，我先将彩色图像切成薄片，然后将它们转换为黑白，但我如何将它们放在一个圆圈中？画布的想法听起来不错……有什么方向可以开始吗？
计算矩形的偏移量，因为每个元素在浏览器中都是一个盒子。我也必须自己做数学题，所以我还不能发布。
我自己从未使用过画布。但一个好的开始是html5rocks.com/en/search?q=canvas。玩得开心，成功后别忘了发布你的结果；）
好的，我会等...同时我会看看我还能找到什么。谢谢。
对不起，但我不相信在不久的将来会抽出时间。但是拿一支笔和一张纸，画出这个概念，你会发现这只是简单的逻辑和数学；）