Change href using a function.

#1 July 23rd, 2005, 07:05 PM

Hi.
I have a button that change a number of images src's when I click a
button. The src's are stored in an array and I just use
document[imgName1].src=pics[0] to change the src of the image.
However I want the button to change the link as well to the image that
is displayed but i cannot get it to work. How do I do this. Could
someone tell me or point me in the direction of some code that will do
this.

I would like to do it in a similar way to the pictures. i.e. have all
the links stored in an array and change them when the button is
pressed.

Thanks for your time.

Ben.

#2 July 23rd, 2005, 07:05 PM

In article <c2d24516.0504080948.79477e82@posting.google.com >, bs2k1
@excite.com enlightened us with...[color=blue]
> Hi.
> I have a button that change a number of images src's when I click a
> button. The src's are stored in an array and I just use
> document[imgName1].src=pics[0] to change the src of the image.
> However I want the button to change the link as well to the image that
> is displayed but i cannot get it to work. How do I do this. Could
> someone tell me or point me in the direction of some code that will do
> this.
>
> I would like to do it in a similar way to the pictures. i.e. have all
> the links stored in an array and change them when the button is
> pressed.
>
> Thanks for your time.
>
> Ben.
>[/color]

Perhaps a modification of my rotator script might help you.
(tested in Firefox 1.0 and MSIE 6 only)

/* image rotator script */

/* The array is a 2 dimensional construct with the image name as the first
part and the link as the second part.
Add image and link in brackets. Separate with commas.
i.e.
["imagename","url"],
["imagename2","url2"]

Note that the pages that use this script must have one and only one
image with the id of "rotator".
Browser support required: document.getElementById.
URLS MUST BE FULL ADDRESSES
*/

rotatorArray = [
["banners/ACF28E9.gif", "http://click.linksynergy.com/fs-bin/click?
id=xEiUbjZNzhI&offerid=35971.10000004&type=4&subid =0"],
["banners/hmp.gif", "http://www.localhomesforsale.com/hmp_index.cfm"],
["banners/harmon_banner.gif", "http://www.harmonhomes.com"],
["banners/ACF24D.jpg", "http://www.callcapture.com"]
]

var numImages = rotatorArray.length;
var delay = 4000; // default

var index = 0;
function rotate()
{
if (document.getElementById)
{
index ++;
if ( index >= numImages )
index = 0;
var e = document.getElementById("rotator");
// we do it this way so people with tabbed browsers can open in
a new tab by middle clicking, i.e. real link, not just an onclick event
e.innerHTML = "<a href='" + rotatorArray[index][1] + "'
target='_blank'><img src='" + rotatorArray[index][0] + "' alt='banner ad'
width='234' height='60' border='1'></a>";
}
setTimeout("rotate()", delay)
}
--
--
~kaeli~
If the funeral procession is at night, do folks drive with
their lights off?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

#3 July 23rd, 2005, 07:05 PM

Ben said:[color=blue]
>
>Hi.
>I have a button that change a number of images src's when I click a
>button. The src's are stored in an array and I just use
>document[imgName1].src=pics[0] to change the src of the image.
>However I want the button to change the link as well to the image that
>is displayed but i cannot get it to work. How do I do this. Could
>someone tell me or point me in the direction of some code that will do
>this.
>
>I would like to do it in a similar way to the pictures. i.e. have all
>the links stored in an array and change them when the button is
>pressed.[/color]

This example uses the onclick event handler of the image, rather
than a link with an href attribute, and so it requires reasonably
modern browsers. Even if that's not directly useful to you, you
might be able to use the array of objects:

<html>
<head>
<script type="text/javascript">

function newImage(src,width,height) {
var img=new Image(width,height);
img.src=src;
return img;
}

pics = [
{
img : newImage("http://azphx.com/dhtml/tmp/alpha6464.jpg",64,64),
href : "http://www.google.com"
},
{
img : newImage("http://azphx.com/dhtml/tmp/beta6464.jpg",64,64),
href : "http://www.yahoo.com"
},
{
img : newImage("http://azphx.com/dhtml/tmp/gamma6464.jpg",64,64),
href : "http://www.cnn.com"
}
];
pics.position=0;

function nextImage(id) {
pics.position++;
pics.position%=pics.length;
document.getElementById(id).src=pics[pics.position].img.src;
}

</script>
</head>
<body>
<img id="dynamic"
src="http://azphx.com/dhtml/tmp/alpha6464.jpg"
onclick="location=pics[pics.position].href";
border="0"
width="64"
height="64">
<br>
<button onclick="nextImage('dynamic')">Change Image</button>
</body>
</html>

Change href using a function.

Popular Articles

What is Bytes?