6

我是 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。

在单击不同的缩略图之前，如何使更改永久化？

谢谢！

4

3 回答 3

6

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

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

此外，您可以设置 href="#" 以防万一。# 无处可去（永远不会重新加载页面）

于 2009-09-08T20:02:39.377 回答
0

我认为您的页面通过点击刷新，将您的链接更改为：

<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>
于 2009-09-08T20:02:44.103 回答
0

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

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' />
于 2009-09-08T20:08:07.227 回答