0

ソース変更機能が既に添付されている単一の画像へのリンクを追加しようとしています。

このサイトには、サムネイルを使用して大きな画像を変更するギャラリーがあり、27 枚の画像があります。この画像の 1 つに個別のリンクを追加しようとしています。

私が見つけているすべてのコードはIDを使用しており、ソース変更機能を機能させ続けるために、これらのソリューションはどれも機能しません。

リンクは画像1枚のみです。これが私のコードです：

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

リンクする必要があるのは 1 つの画像だけです。スクリプトにハイパーリンクを追加するソリューションを探しています。a.href="" が機能せず、他の解決策が見つからないようです。

4

2 に答える 2

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 に答える
0

これはより良い解決策かもしれません：

<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;
于 2013-08-09T18:12:46.193 に答える