How to add link for the image using Javascript

Question

How can I add a link for an image created using the following Javascript code. I tried some changes, but nothing worked.

Please change the following code to the code with a link. I want to link all images at http://idealbodyweights.com/.

<script type="text/javascript">
var image1 = new Image()
image1.src =="http://idealbodyweights.com/wp-content/uploads/2013/05/1.png"
var image2 = new Image()
image2.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/2.png"
var image3 = new Image()
image3.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/3.png"
var image4 = new Image()
image4.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/4.png"
</script>
   </head>
   <body>
   <p><img src="images/pentagg.jpg" width="720" height="90" name="slide" /></p>
   <script type="text/javascript">
    var step=4;
    function slideit()
   {

    document.images.slide.src = eval("image"+step+".src");
    if(step<4)
        step++;
    else
        step=1;
    setTimeout("slideit()",2500);
}
slideit();
</script>

Not the answer to your question, but [you should avoid using `eval` whenever possible](http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea). — Paul S., Jun 01 '13 at 20:17

score 0 · Answer 1 · answered Jun 01 '13 at 20:30

I rewrote a little of your code so it doesn't use eval and so the <img> is fetched using document.getElementById.

...
    <script type="text/javascript">
var imgsrc = [
        'http://idealbodyweights.com/wp-content/uploads/2013/05/1.png', // 0
        'http://idealbodyweights.com/wp-content/uploads/2013/05/2.png', // 1
        'http://idealbodyweights.com/wp-content/uploads/2013/05/3.png', // 2
        'http://idealbodyweights.com/wp-content/uploads/2013/05/4.png'  // 3
    ],
    imgcache = [], i;
for (i = 0; i < imgsrc.length; ++i) { // cache images
    imgcache[i] = new Image();
    imgcache[i].src = imgsrc[i];
}
    </script>
</head>
<body>
    <p><img src="images/pentagg.jpg"
            width="720" height="90"
            name="slide" id="slide" /></p>
    <script type="text/javascript">
    var step = -1,                              // set so first will be 0
        img = document.getElementById('slide'); // get the <img>
    function slideit() {
        step = (step + 1) % imgsrc.length; // loop over 0, 1, 2, 3 (or more)
        img.src = imgsrc[step];            // set src by array index
        setTimeout(slideit, 2500);         // repeat in 2500 ms
    }
    slideit();// start
    </script>
...

Just add whatever images you want to the array.. unless I misunderstood what you wanted? — Paul S., Jun 01 '13 at 20:37
sorry for misunderstanding me , but i want when i click on any image at this script go to this link for example : http://idealbodyweights.com — Ahmed Beltagy, Jun 01 '13 at 20:56

score -1 · Accepted Answer · answered Jun 01 '13 at 21:00

-1

Is it what you want? :D

<p>
    <a href="http://idealbodyweights.com/">
        <img src="images/pentagg.jpg" width="720" height="90" name="slide" />
    </a>
</p>

answered Jun 01 '13 at 21:00

Hugo Mallet

533
5
8

How to add link for the image using Javascript

2 Answers2