Javascript onclick to change image and href URL

[Illusio]

I have an image area with one big image and 7 smaller ones underneath. I want to make it so that when I click on one of the small images, it swaps the big image, but also changes the URL for the big image in it's Href tag. So when the user clicks on the big image, it will take them to the URL that corresponds with the current big image.

Did that all make sense?

Curretly I am using this to do the image swapping, but haven't been able to figure out how to swap out the URLs.


<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<img src="images/mainimage.jpg" name="swap" border="0" />

<img src="images/photos/image.jpg" border="0" onclick="document.swap.src='images/imagebig.jpg';" /></a>

 

[The Bakery]

"INNERHTML" can be used to dynamically change the contents of a tag, such as HREF.
Innerhtml replaces everything word for word as if you had typed it between the tag
brackets originally.

Edit- code taken from link:

<script type="text/javascript">

function changeText()
{
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}

</script>

<p>Welcome to the site <b id='boldStuff'>dude</b> </p>

<input type='button' onclick='changeText()' value='Change Text'/>




http://www.tizag.com/javascrip...vascript-innerHTML.php

 

[troytime]

innerHTML isn't gonna change href or src

document.getElementById('imgsIDhere').src will be the source of the image
OR document.images.IMAGENAMEATTRIBUTEHERE.src

document.getElementById('anchortagidhere').href will be the link

i'd help with the script, but i don't mess around when javascripts that have MM in them 🙂

 

[Leafy]

Assuming that you have this

<a href="big.html"><img id="big" src="images/big.png" alt="Big" /></a>
<a href="small_1.html" onclick="iswap(this.childNodes[0].src,this.href,this)"><img src="small_1.png" alt="Small 1"></a>

Then the appropriate script would be

<script type="text/javascript">
function iswap(new_src,new_href,t) {
var old = document.getElementById("big");
t.src = old.src;
t.parentNode.href = old.parentNode.href;
document.getElementById("big").src = new_src;
document.getElementById("big").parentNode.href = new_href;
}
</script>

 

[Illusio]

Originally posted by: Leafy
Assuming that you have this

<a href="big.html"><img id="big" src="images/big.png" alt="Big" /></a>
<a href="small_1.html" onclick="iswap(this.childNodes[0].src,this.href,this)"><img src="small_1.png" alt="Small 1"></a>

Then the appropriate script would be

<script type="text/javascript">
function iswap(new_src,new_href,t) {
var old = document.getElementById("big");
t.src = old.src;
t.parentNode.href = old.parentNode.href;
document.getElementById("big").src = new_src;
document.getElementById("big").parentNode.href = new_href;
}
</script>

Would this swap the href of the big image? The small image doesn't need any kind of swapping.

Also forgot to mention, I only know a little about javascript, so I just might be missing something obvious.

 

[Illusio]

I was finally able to get it working with this function:

function changeLink()
{
document.getElementById('link').href="link.com";
document.getElementById('link').target="_blank";
}
</script>