How do I add <a href> to rotating imgs?

tracylester · November 17, 2010, 5:16pm

I have 12 imgs that rotate among 3 “windows” on my portfolio. I’ve tried to add the <a href> so visitors can go to the book sites and learn more. How do I do this properly in Javascript? (this is my first hand coded javascript)

//Operates the 3 rotating book banners in #training

window.onload = choosePic;

var bkImg1 = new Array(“img/bk1.jpg”, “img/bk2.jpg”, “img/bk3.jpg”, “img/bk4.png”);
var bkImg2 = new Array(“img/bk5.jpg”, “img/bk6.jpg”, “img/bk7.jpg”, “img/bk8.png”);
var bkImg3 = new Array(“img/bk9.jpg”, “img/bk10.jpg”, “img/bk11.png”, “img/bk12.jpg”);
var thisAd = 0;

function choosePic()
{
thisAd = Math.floor((Math.random() * bkImg1.length));
thisAd = Math.floor((Math.random() * bkImg2.length));
thisAd = Math.floor((Math.random() * bkImg3.length));
document.getElementById(“bkBanner1”).src = bkImg1[thisAd];
document.getElementById(“bkBanner2”).src = bkImg2[thisAd];
document.getElementById(“bkBanner3”).src = bkImg3[thisAd];
rotate();
}

function rotate()
{
thisAd++;
if (thisAd == bkImg1.length)
if (thisAd == bkImg2.length)
if (thisAd == bkImg3.length)
{
thisAd = 0;
}

document.getElementById("bkBanner1").src = bkImg1[thisAd];
document.getElementById("bkBanner2").src = bkImg2[thisAd];
document.getElementById("bkBanner3").src = bkImg3[thisAd];
setTimeout(rotate, 3 * 2000);

}

Any help is appreciated. Tracy

eruna · November 17, 2010, 5:26pm

This method you are using puts all the slide show content in the Javascript. It is messy and inaccessible to search engines.

Its better to use an approach like this:

You could modify it to add links fairly easily.
Update the css and the selector in the javascript.

You would also need to link to the jQuery library.

tracylester · November 17, 2010, 9:02pm

Eruna -

I know there are 5 steps to getting the simple jQuery slide show working

writing the html
putting the jQuery into a javascript file
connecting to the master jQuery javascript file
inputting the correct css
calling the function

I’m confused on how to do step 5. I’ve tried downloading and opening up the zip file from Jon Raasch to see what he did and it won’t open. I even checked his view source.

Could you please take one moment to look at my html (line 170 of my code) and help me with the function code?

http://www.tracylester.com/indexTest.html

system · November 17, 2010, 10:23pm

I think you have a logic error in your code

with

 
thisAd = Math.floor((Math.random() * bkImg1.length));
thisAd = Math.floor((Math.random() * bkImg2.length));
thisAd = Math.floor((Math.random() * bkImg3.length));

you are overwritng the first 2 values of thisAd with whatever

 
thisAd = Math.floor((Math.random() * bkImg3.length));

works out to be.

are you sure you don’t want a separate value of thisAd for each bkImg array?

system · November 17, 2010, 11:16pm

this is 1 way of doing it.

I generate a random starting pic for each window and then cycle the images for that window. the number of images in each window can vary.

as each new image appears, I assign the image’s link to the <a> tag for that image.

you could stream line the code a bit, but I have kept things simple by using separate functions for each window at this stage.

hopefully the comments in the code explain what I have done.

if you need more help, simply post back

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
img {border: none}
</style>
 
<script type="text/javascript">
 
//paths to the images
var imgPaths1 = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg','pic6.jpg'];
var imgPaths2 = ['pic1.jpg','pic2.jpg','pic3.jpg'];
var imgPaths3 = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg'];
 
//links for each image
var urls_1 = ['url1','url2','url3','url4','url5','url6'];
var urls_2 = ['url1','url2','url3'];
var urls_3 = ['url1','url2','url3','url4','url5'];
 
//preload the images for more fluent swapping later on
var imgO_1 = new Array();
var imgO_2 = new Array();
var imgO_3 = new Array();
for(var i=0; i < imgPaths1.length; i++) {
    imgO_1[i] = new Image();
    imgO_1[i].src = imgPaths1[i];
}
 
for(var i=0; i < imgPaths2.length; i++) {
    imgO_2[i] = new Image();
    imgO_2[i].src = imgPaths2[i];
}
 
for(var i=0; i < imgPaths3.length; i++) {
    imgO_3[i] = new Image();
    imgO_3[i].src = imgPaths3[i];
}
 
//generate a random pic index for each window
var index1 = Math.floor((Math.random()*imgPaths1.length));
var index2 = Math.floor((Math.random()*imgPaths2.length));
var index3 = Math.floor((Math.random()*imgPaths3.length));
 
//3 swap image functions
function swapImagesWin1() {
    if(++index1 > imgPaths1.length-1) {
        index1 = 0;
    }
    //assign the new image to this <img>
    imgObj1.src = imgPaths1[index1];
    //assign the link url for this <img>
    imgObj1.parentNode.href = urls_1[index1];
    setTimeout(swapImagesWin1,2000);
}
 
function swapImagesWin2() {
    if(++index2 > imgPaths2.length-1) {
         index2 = 0;
    }
    imgObj2.src = imgPaths2[index2];
    imgObj2.parentNode.href = urls_2[index2];
    setTimeout(swapImagesWin2,2000);
}
 
function swapImagesWin3() {
    if(++index3 > imgPaths3.length-1) {
        index3 = 0;
    }
    imgObj3.src = imgPaths3[index3];
    imgObj3.parentNode.href = urls_3[index3];
    setTimeout(swapImagesWin3,2000);
}
 
window.onload=function() {
    imgObj1 = document.getElementById("imgBk1");
    imgObj2 = document.getElementById("imgBk2");
    imgObj3 = document.getElementById("imgBk3");
    swapImagesWin1();
    swapImagesWin2();
    swapImagesWin3();
}
</script>
 
</head>
<body>
 
<div>
    <a href="">
          <img id="imgBk1" src="" alt="" />
    </a>
</div>
 
<div>
    <a href="">
           <img id="imgBk2" src="" alt="" />
    </a>
</div>
 
<div>
    <a href="">
         <img id="imgBk3" src="" alt="" />
    </a>
</div>
 
</body>
</html>

eruna · November 18, 2010, 1:31am

Hi Tracy,

The setInterval function in the script triggers the behavior. You don’t need to call it. In order to call a function books(), you would need a function named books. Once you link to a script its the same as though it were actually on the page where the link is located. It doesn’t need to be instantiated.

You can remove the call at the bottom of the page.
You need to adjust the script. The script is referencing:
(‘#slideshow IMG.active’)
But you would want to be referencing
(‘.slideshow a.active’)

My suggestion for working through this is to start simple. Just get the slideshow working with everything on one page. Just the HTML for the slideshow and the Javascript nothing else. Start exactly as it is in the example. Then get it to work with links. Then add the whole thing to the actual page. I find this is the easiest way to figure out new scripts because it removes all the variables and lets you solve one problem at a time.

E

system · November 18, 2010, 3:29am

and this is a stream lined version of the previous code

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            img {border: none}
        </style>
        <script type="text/javascript">
            //paths to the images
            var imgPaths1 = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic6.jpg'];
            var imgPaths2 = ['pic1.jpg','pic2.jpg','pic3.jpg'];
            var imgPaths3 = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg'];
            var imgPathsA = [imgPaths1,imgPaths2,imgPaths3];
 
            //links for each image
            var urls_1 = ['url1','url2','url3','url4','url5'];
            var urls_2 = ['url1','url2','url3'];
            var urls_3 = ['url1','url2','url3','url4'];
            var urlsA = [urls_1,urls_2,urls_3];
 
            //preload the images for more fluent swapping later on
            var imageO = new Array();
            for(var i=0; i < imgPathsA.length; i++) {
                imageO[i] = new Array();
                for(j=0; j < imgPathsA[i].length; j++) {
                    imageO[i][j] = new Image();
                    imageO[i][j].src = imgPathsA[i][j];
                }
            }
 
            //generate a random pic index for each window
            var picIndA = new Array();
            for(var i=0; i < imgPathsA.length; i++) {
                picIndA[i] =  Math.floor((Math.random()*imgPathsA[i].length));
            }
 
            //swap image function
            function swapImages() {
                for(var i=0; i < imgOA.length; i++) {
                    //increment the pic index for this image paths array
                    if(++picIndA[i] > imgPathsA[i].length-1) {
                        picIndA[i] = 0;
                    }
                    //swap the image for this <img>
                    imgOA[i].src = imageO[i][picIndA[i]].src;
                    //assign the appropriate link for this <img>
                    imgOA[i].parentNode.href = urlsA[i][picIndA[i]];   
                }
                setTimeout(swapImages,2000);
            }
 
            window.onload=function() {
                //get the <img>'s of the windows
                imgOA = document.getElementById("training").getElementsByTagName('img');
                swapImages();
            }
        </script>
 
    </head>
    <body>
 
        <div id="training">
            <div>
                <a href="">
                    <img src="" alt="" />
                </a>
            </div>
            <div>
                <a href="">
                    <img src="" alt="" />
                </a>
            </div>
            <div>
                <a href="">
                    <img src="" alt="" />
                </a>
            </div>
        </div>
    </body>
</html>

tracylester · November 18, 2010, 4:17pm

Eruna and Kalom -

Thank you for your posts - I really appreciate your time.

I’m working to get the jQuery to run, and, your right, its easier to test code when its isolated as a small example.

If I can’t get it up and running I will definitely use Kalom’s code.

Tracy

eruna · November 20, 2010, 7:26pm

Hi Tracy,
Let me know if you have any other questions.
At first I found jQuery really puzzling, but one day it just clicked.
Once you get it, its awesome! Its so much easier than straight Javascript.
You can write an accordion that would take 2 pages of Javascript in about 5 lines.
E

system · November 20, 2010, 9:10pm

Off Topic:

but jquery is just straight javascript except that someone else has written a lot of the functions for you.

and like anything else that essentially writes code for you, more often than not a given task coded up in jquery will require more lines of total code than it would in plain vanilla javascript.

personally, I prefer to code things up myself rather than be restricted by the limitations of someone else’s code.

tracylester · November 22, 2010, 2:49pm

Eruna and Kalon -

Thanks so much for your time. It took a day - but I did get my script up and running!

After going through all that I am registering for Kevin Yank’s Javascript class. As much as I want to use jQuery now - I really need to understand the fundamentals first.

Tracy

eruna · November 22, 2010, 7:22pm

Hi Tracy,

Good luck with your studies.
Kalon, as far as your points. Well, to each his own I guess. It goes back to the general discussion of open-source vs do-it-yourself. Why reinvent the wheel? Personally, I find jQuery saves tons of time. It makes an effect or task something that can be done in a couple minutes instead of an hour or more and handles most cross-browser issues very well.

E

Topic		Replies	Views
Rotating Images Code Help Please JavaScript	10	1431	October 8, 2014
Working JS Fading Image Banner - Now how to make images linked? JavaScript	1	1272	May 18, 2010
Preload images for rotating slides JavaScript	4	1828	October 6, 2010
Modify this array to allow for links? JavaScript	3	679	October 6, 2010
Href changing depending on what image JavaScript	0	321	October 18, 2010

How do I add <a href> to rotating imgs?

Related topics