0

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

该站点有一个使用缩略图来更改较大图像的画廊，因此有 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="" 不起作用，我似乎找不到任何其他解决方案。

4

2 回答 2

0

This may be a better solution:

<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>

So you don't have to have 27 different functions.

You could also define the images like follows:

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

Then in changeImage:

var image = images[currentImage];
img.src = basePath + image.image;
thumb.src = basePath + image.thumb;
于 2013-08-09T18:12:46.193 回答
0

干得好：

看看我为你整理的这个 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>
于 2013-08-09T18:34:07.383 回答