Question

我是javascript的新手，虽然有许多更复杂的解决方案，但我不理解它们，希望我不必在这一点上。

我有一张主图......

<img src="main-picture.jpg" name="Mainpic" id="image">

...我希望能够在点击两个缩略图中的一个时更改此图片。

<a href="" onclick="FirstPic()"><img src="replacement1.jpg" name="pic1"></a>
<a href="" onclick="SecPic()"><img src="replacement2.jpg" name="pic2"></a>

我认为我的javascript代码非常简单。我正在使用......

function FirstPic(){
        document.Mainpic.src = document.pic1.src
        return
    }

function SecPic(){
        document.Mainpic.src = document.pic2.src
        return
    }

现在变量正在更改但是保持更改。单击缩略图时，替换图片会在屏幕上闪烁，然后返回到原始的main-picture.jpg。

如果点击不同的缩略图，如何使更改成为永久更改？

谢谢！

Answer 1

我认为它正在翻转，因为您的网页正在重新加载。

如果您不希望在onclick之后激活href =值，则需要从onclick =返回false。

另外，您可以设置href =“＃”以防万一。＃无处可去（不会重新加载页面）

Answer 2

我认为您的页面会因您的点击而更新，请将链接更改为：

<a href="" onclick="FirstPic(); return false;"><img src="replacement1.jpg" name="pic1"></a>
<a href="" onclick="SecPic(); return false;"><img src="replacement2.jpg" name="pic2"></a>

Answer 3

为什么不做这样的事情（没有完整地检查语法，所以它可能有问题。

function FirstPic()
{
    var pic1 = document.getElementById("pic1"); 
    if (pic1 == typeof('undefined')) return;
    pic1.src = "newpicname.jpg";
}

确保为标签指定一个名为pic1和pic2的ID属性（而不是名称属性），并为图像本身提供一个“onclick”属性...

<img onclick='FirstPic()' id='pic1' src='image1.jpg' />

使用Javascript更改IMG SRC

3 个答案: