Question

我有一个相当复杂的图像映射，有几个映射区域。大多数映射区域仅针对鼠标悬停和链接进行映射。但有些人有JS onClick()导致图像翻转。新的翻转图像基本上是旧图像，上面有一些“新事物”。

我无法弄清楚需要做的两件事：

新形象需要留在那里。发生的事情是，只要我将鼠标移出已映射的区域，它就会重新回到旧图像。
我需要（“旧”图像的）图像图像处理翻转时出现的新图像。

JAVASCRIPT

//PRELOAD IMAGES FOR CLICK AND MOUSEOVER
cuentaBoca = new Image(655, 338)
cuentaBoca.src = "imagenes_png/pag2/cuentame_bocadilla.png";

cuenta = new Image(655, 338)
cuenta.src = "imagenes_png/pag2/cuentame_h.png";

//JS FUNCTION FOR CLICK
function bocadillaC() {
document.getElementById('garfio').src = cuentaBoca.src;
}

//JS FUNCTION FOR MOUSEOVER
function cuentaH() {
document.getElementById('garfio').src = cuenta.src;
return true;
}

HTML

<!-- INSERT THE PICTURE -->
<img name="garfio" id="garfio" src="imagenes_png/pag2/base.png" width="655" height="338" border="0"  usemap="#m_garfio" alt="" />

<!-- CREATE THE MAP -->
<map name="m_garfio" id="m_garfio">

    <area shape="poly" id="bocadilla" coords="7,205,12,197,20,191,24,189,34,185,45,182,58,180,74,180,86,180,94,181,103,182,112,185,114,186,130,178,135,177,137,179,134,184,130,192,135,195,138,199,142,204,143,209,138,218,125,227,113,231,100,235,86,236,70,236,53,235,41,233,34,231,23,226,15,221,11,217,8,212,7,205" 
     onMouseOver="cuentaH()" onClick="bocadillaC(); return false" alt="" />

</map>
</div>

这里有一个Fiddel http://jsfiddle.net/emedrs9n/ 单击“Cuentame”（气球）具有onClick()效果

Answer 1

尝试在点击时重新定义original功能。 Example

function bocadillaC() {
    cuentaH = original = bocadillaC;

    // redefine other functions
    leftH = function() {
        document.getElementById('garfio').src = left_with_yellow_cloud.src;
    };
    rightH = function() {
        document.getElementById('garfio').src = right_with_yellow_cloud.src;
    };
    cuentaH = function() {
        document.getElementById('garfio').src = cuenta_with_yellow_cloud.src;
    };
    // ...

    document.getElementById('garfio').src = cuentaBoca.src;
}

您需要使用图片重新定义其他功能。但是，例如，对于this州，没有与黄云相似的图像。

但实际上你需要使用HTML / CSS的强大功能，不要在每个案例上绘制图像，并且在没有图像映射的情况下更简单。

Answer 2

这就像你似乎要问的那样。显示两个图像。当我将鼠标滑过上方图像时，下方的图像会发生变化而不会变回。图像vane2.jpg和vane2.png是镜像。

<html>
<head>
<script type="text/javascript">
function setimage () {
    document.getElementById('hisArea').src = "vane2.png";
}
</script>
</head>
<body>
<img id="myArea" onMouseOver="setimage();" width="176" height="176" src="vane1.jpg">
<BR>
<img id="hisArea" width="176" height="176" src="vane2.jpg">
</body>
</html>

图像在图像地图上翻转，但保留地图坐标

2 个答案: