Question

我正在尝试添加一个链接到已经附加了更改源功能的单个图像。

该网站有一个图库，使用缩略图更改较大的图像，因此有27个图像。我很想添加一个链接到其中一个图像。

我发现的所有代码都使用了id，并且为了保持更改源功能的正常运行，这些解决方案都不起作用。

该链接仅适用于一张图片。这是我的代码：

    <script>function changeImage27()
    {
    var img = document.getElementById("image");
    img.src="thestudio/thestudio_27.gif";
    }
    </script>

我的HTML：

    <div id="slideshow">
    <img id="image" src="thestudio/thestudio_1.gif" />
    </div>

    <a id="clickme" onClick="changeImage();"><img border="0"src="thestudio/thestudio_1t.gif"></a>

我只需要链接一张图片。所以我正在寻找一个在脚本中添加超链接的解决方案。 a.href =“”无效，似乎无法找到任何其他解决方案。

Answer 1

这可能是更好的解决方案：

<head>
<script type="text/javascript">
var images = ["image1.gif","image2.gif",...,"image27.gif"];
var thumbs = ["image1t.gif","image2t.gif",...,"image27t.gif"];
var basePath = "thestudio/";
var currentImage = 0;

function changeImage() {
    var img = document.getElementById("image");
    var thumb = document.getElementById("thumb");
    img.src = basePath + images[currentImage];
    thumb.src = basePath + thumbs[currentImage];

   currentImage ++;
    if (currentImage >= images.length) {
        currentImage = 0; // this will cause it to loop
    }
}
</script>
</head>
<body onLoad="changeImage();">
    <div id="slideshow">
        <img id="image">
    </div>
    <a onClick="changeImage();" href="#"><img border="0" id="thumb"></a>
</body>

所以你不必拥有27种不同的功能。

您还可以定义如下图像：

var images = [{image:"image1.gif",thumb:"image1t.gif"},...{image:"image27.gif",thumb:"image271.gif"}];

然后在changeImage：

var image = images[currentImage];
img.src = basePath + image.image;
thumb.src = basePath + image.thumb;

Answer 2

你走了：

看看我为你准备的这个JSFiddle。干杯！

http://jsfiddle.net/douglasloyo/aR83b/

    <script>
    window.changeImage = function changeImage()
    {

       var img = document.getElementById("my-img");
       var newImgSrc = "http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/dog-leader-pack.jpg";
       img.src=newImgSrc;
    }
    </script>

    <img id="my-img" src="http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/ocean-island- palm.jpg" />
    <button onclick="window.changeImage();">ClickMe</button>

我需要添加一个已经具有更改源功能的单个图像的链接

2 个答案: