我需要添加一个链接到一个已经有changesource函数的图像

i need to add a link to a single image that already has a change source function

本文关键字：一个 changesource 函数 图像 链接 添加      更新时间：2023-09-26

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

该网站有一个画廊，使用缩略图来更改较大的图像，因此有27张图像。我正在尝试为其中一张图片添加一个单独的链接。

我找到的所有代码都使用id，为了保持changesource函数的工作，这些解决方案都不起作用。

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

    <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="不起作用，我似乎找不到任何其他解决方案。

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

<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"}];

然后在变化图像：

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

开始：

看看我为你整理的这个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>
相关文章：