By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,772 Members | 1,272 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,772 IT Pros & Developers. It's quick & easy.

Change href using a function.

P: n/a
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.
Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
In article <c2**************************@posting.google.com >, bs2k1
@excite.com enlightened us with...
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.


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

Jul 23 '05 #2

P: n/a
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.


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>

Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.