添加链接以更改图像

Question

So I'm making a page that an image is displayed and every 2 seconds, the image changes using four images within an array. 因此，我正在制作一个页面，其中显示了一个图像，并且每2秒，该图像使用数组中的四个图像进行更改。 I also need to be able to link each image to a different url, however I'm not sure how to do this as everything I've tried hasn't worked, any help is greatly appreciated. 我还需要能够将每个图像链接到不同的url，但是我不确定如何执行此操作，因为我尝试过的所有方法均无效，非常感谢您的帮助。

HTML HTML

<!DOCTYPE html>
<html>
<head> 
    <script src = "task6.js"></script>
</head>
<body onload="ImageChange()">
<div align="center">
<img src="images/image2.png" id="image" height="200" width="200">
</div>
</body>
</html>

Javascript 使用Javascript

var Cntr = 2;

var images = new Array();
images[0] = "images/image1.png";
images[1] = "images/image2.png";
images[2] = "images/image3.png";
images[3] = "images/image4.png";

function ImageChange()
{
Cntr= Cntr+1;
if (Cntr==4)
{
    Cntr=0;
}
document.getElementById("image").src=images[Cntr];
setTimeout("ImageChange()", 2000);
}

Answer 1

JS: JS：

var Cntr = 2;

var images = new Array();
images[0] = "<a href=\"http://google.com/\"><img src=\"images/image1.png\" height=\"200\" width=\"200\"></a>";
images[1] = "<a href=\"http://bing.com/\"><img src=\"images/image2.png\" height=\"200\" width=\"200\"></a>";
images[2] = "<a href=\"http://facebook.com/\"><img src=\"images/image3.png\" height=\"200\" width=\"200\"></a>";
images[3] = "<a href=\"http://stackoverflow.com/\"><img src=\"images/image4.png\" height=\"200\" width=\"200\"></a>";

function ImageChange()
{
Cntr= Cntr+1;
if (Cntr==4)
{
    Cntr=0;
}
document.getElementById("container").innerHTML=images[Cntr];
setTimeout("ImageChange()", 2000);
}

HTML: HTML：

<!DOCTYPE html>
<html>
<head> 
    <script src = "task6.js"></script>
</head>
<body onload="ImageChange()">
<div align="center">
<div id="container"></div>
</div>
</body>
</html>

Answer 2

Wrap your link in A tag 将链接包装在A标签中

Like this 像这样

<a href="" id="mylink"><img src="images/image2.png" id="image" height="200" width="200"></a>

and change your javascript like below. 并按如下所示更改您的JavaScript。

var Cntr = 2;

var images = new Array();
images[0] = "images/image1.png";
images[1] = "images/image2.png";
images[2] = "images/image3.png";
images[3] = "images/image4.png";

var links = new Array();
links[0] = "link1";
links[1] = "link2";
links[2] = "link3";
links[3] = "link4";

function ImageChange()
{
Cntr= Cntr+1;
if (Cntr==4)
{
    Cntr=0;
}
document.getElementById("image").src=images[Cntr];
document.getElementById("mylink").href=links[Cntr];
setTimeout("ImageChange()", 2000);
}

Answer 3

You can do simply like that. 您可以简单地那样做。 In html, 在html中，

<body onload="ImageChange()">
<div align="center">
    <a href="www.gotoone.com" id="link">
        <img src="images/image1.png" id="image" height="200" width="200">
    </a>
</div>

In javascript, 在javascript中，

var Cntr = 2;

var images = [
    {img : "images/image1.png", link : 'www.gotoone.com'},
    {img : "images/image2.png", link : 'www.gotootwo.com'},
    {img : "images/image3.png", link : 'www.gotothree.com'},
    {img : "images/image4.png", link : 'www.gotofour.com'},
];


function ImageChange()
{
    Cntr= Cntr+1;
    if (Cntr==4)
    {
        Cntr=0;
    }

    document.getElementById("image").src=images[Cntr].img;
    document.getElementById("link").href=images[Cntr].link;
    setTimeout("ImageChange()", 2000);
}

Answer 4

This should do it. 这应该做。

Markup 标记

<!DOCTYPE html>
<html>
<head> 
    <script src = "task6.js"></script>
</head>
<body onload="ImageChange(0)">
<div align="center">
    <a id="yourLink" href="http::// www.google.com">
        <img src="img/google.png" />
    </a>
</div>
</body>
</html>

JavaScript JavaScript的

var link = document.getElementById("yourLink"),
    image = link.getElementsByTagName("img")[0],
    images = [{
        image: 'url1.png', href: 'url1.com'
    }, {
        image: 'url2.png', href: 'url2.com'
    }, {
        image: 'url3.png', href: 'url3.com'
    }, {
        image: 'url4.png', href: 'url4.com'
    }];

function ImageChange(target) {
    link.href = images[target].href;
    image.src = images[target].image;
    window.setTimeout(function() {
        ImageChange(++target%image.length);
    }, 2000);
}

Answer 5

Is this what you are looking for ? 这是你想要的？

EXAMPLE 例

<body onload="ImageChange()">
    <div>
        <a id="link" target="_blank" href="http://www.google.com">
            <img src="http://www.picturesnew.com/media/images/Austin-Healey-Photo.jpg" id="image" height="200" width="200"/>
        </a>    
    </div>
</body>


var i = 0;
var img = [
    {
        src:"http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg",
        href:"http://www.google.com"
    },
    {
        src:"http://www.picturesnew.com/media/images/cool-images.jpg",
        href:"http://www.google.com"
    },
    {
        src:"http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg",
        href:"http://www.google.com"
    },
    {
        src:"http://www.picturesnew.com/media/images/images-background.jpg",
        href:"http://www.google.com"
    },
    {
        src:"http://blog.gettyimages.com/wp-content/uploads/2013/01/Simple-Living-Rhiannon-Llewelyn-Taxi-Getty-Images-81938225.jpg",
        href:"http://www.google.com"
    }          
]

function ImageChange(){
    console.log("Source " + i + " : " +document.getElementById("image").src)

    if (i==4){
        i=0;
    }
    i++;
    document.getElementById("image").src=img[i].src;
    document.getElementById("link").href=img[i].href;
    setTimeout("ImageChange()", 2000);
}

添加链接以更改图像

问题描述

5 个解决方案

解决方案1
0 2014-05-17 07:31:25

解决方案2
0 2014-05-17 07:31:27

解决方案3
0 2014-05-17 07:39:16

解决方案4
0 2014-05-17 07:45:09

解决方案5
0 2014-05-17 07:49:59

添加链接以更改图像

问题描述

5 个解决方案

解决方案1 0 2014-05-17 07:31:25

解决方案2 0 2014-05-17 07:31:27

解决方案3 0 2014-05-17 07:39:16

解决方案4 0 2014-05-17 07:45:09

解决方案5 0 2014-05-17 07:49:59

解决方案1
0 2014-05-17 07:31:25

解决方案2
0 2014-05-17 07:31:27

解决方案3
0 2014-05-17 07:39:16

解决方案4
0 2014-05-17 07:45:09

解决方案5
0 2014-05-17 07:49:59