Question

我正在尝试构建一个图像映射链接，将图像换成另一个图像。这个想法是用户可以点击一个小的定义区域（也就是说“点击这里”），图像将交换到第二个图像。第二个图像将有一个小区域显示“previous”，因此单击相同区域将使图像返回到原始图像。

据我所知，到目前为止没有图像发生变化，但是图像地图似乎正常工作。

有人能弄明白如何正常工作吗？

HTML：

<div id="picture_here">
    <img src="https://www.google.com.au/images/srpr/logo11w.png" id="picture"  usemap="#imageMap"/>
</div>

<map name="imageMap">
    <area shape="rect" coords="0,0,100,100"  href="JavaScript: test(); void(0);">
</map>

使用Javascript：

var swapImage = 1;


function test(){
        if (swapImage == 1){
            swapImage = 2;
            $('#picture').attr('src', 'https://s1.yimg.com/rz/d/yahoo_frontpage_en-AU_s_f_p_bestfit_frontpage_2x.png');
        }else if (swapImage == 2){
            swapImage = 1;
            $('#picture').attr('src', 'https://www.google.com.au/images/srpr/logo11w.png');
        }
}

请参阅JSFIDDLE

Answer 1

实际上它有效。在jsfiddle中，你得到js错误，因为在js小提琴中找不到测试函数。如果您将js代码放在html部分的script标记中，如下所示，您可以看到它正在运行。

<div id="picture_here">
    <img src="https://www.google.com.au/images/srpr/logo11w.png" id="picture"  usemap="#imageMap"/>
</div>

<map name="imageMap">
    <area shape="rect" coords="0,0,100,100"  href="JavaScript: test(); void(0);">
</map>
    <script>
    var swapImage = 1;


function test(){
        if (swapImage == 1){
            swapImage = 2;
            $('#picture').attr('src', 'https://s1.yimg.com/rz/d/yahoo_frontpage_en-AU_s_f_p_bestfit_frontpage_2x.png');
        }else if (swapImage == 2){
            swapImage = 1;
            $('#picture').attr('src', 'https://www.google.com.au/images/srpr/logo11w.png');
        }
}    
    </script>

<强> Demo

或者，您可以在jsfiddle中使用“No wrap-in”配置。你可以看到那个

的演示

<强> Demo No Wrap

Answer 2

你的例子应该有用，你唯一的问题是jsfiddle中的settigns。

你应该使用“No wrap-in＆lt; head＆gt;”而不是“onLoad”

区别在于onLoad会在页面加载后执行你的脚本，你将无法调用你的函数test（）。

使用“No wrap-in＆lt; head＆gt;”就像在文档的头部添加你的javascript源代码一样，可以让你从html中调用函数。

Answer 3

我建议您使用点击处理程序而不是内联JavaScript。问题是无法找到您的测试功能。

var swapImage = 1;


$('area').on('click', function() {
        if (swapImage == 1){
            swapImage = 2;
            $('#picture').attr('src', 'https://s1.yimg.com/rz/d/yahoo_frontpage_en-AU_s_f_p_bestfit_frontpage_2x.png');
        }else if (swapImage == 2){
            swapImage = 1;
            $('#picture').attr('src', 'https://www.google.com.au/images/srpr/logo11w.png');
        }
});

http://jsfiddle.net/rhess/37/

Answer 4

这就是你想要的; - ）

example at jsbin

使用图像映射时通过jquery交换图像

4 个答案: