Change href using a function.

B

Ben

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

Lee

Ben said:
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.
Click to expand...

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

kaeli

bs2k1 said:
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.
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Open a file with a href 5
Call JS file in HTML by something else than "<a href="javascript:void(0);" onclick="myFunction()" 6
Looking to change programming direction 1
Help figuring out a directory permission change problem 1
I Need Help with making a function that draws in a canvas using location data. 1
Survey details won't go through using php, ajax, Mysql 3
Centering a button using flexbox 2
Why struct not globally changed in function? 1

Members online

No members online now.
Total: 281 (members: 0, guests: 281)
Robots: 483

Forum statistics

Threads
474,430
Messages
2,571,676
Members
48,796
Latest member
Greg L.

Latest Threads

Top