Page 1 of 1

Changing a Link with Javascript? - ADVANCED

Posted: Tue May 11, 2004 2:02 pm
by romeo
how do you change the href value of a link when an image is clicked?

I have several picture thumbnails that load larger versions of themselves in 1 place... no problem... what I want to add is a LINK around the BIG IMAGE that also changes when the thumbnails change the picture

ANY help is appreciated

Posted: Tue May 11, 2004 2:10 pm
by magicrobotmonkey
instead of a link have an onClick that runs a javascript function with a redirect which changes what the redirect is depending on which thumbnail has been selected

Posted: Tue May 11, 2004 2:27 pm
by romeo
im a little lost, can you give me aquick example

Posted: Wed May 12, 2004 1:03 pm
by romeo
i tried a couple things, I dont think im even close... any help here

Posted: Thu May 13, 2004 7:47 am
by phait
hi,
as understand the situation, you really need to write a link at the time of the click or mouseover, but could I just check if you are writing a link around the big image initially?

If you aren't then you need to have a function that rewrites the contents of a cell with the big image plus a link surrounding it that goes to where you want it to.

I'm guessing that at present you have an image with an onmouseover or onclick listener that calls a javascript function and supplies the name of the big image to show. Probably something like...?

Code: Select all

<img src="myimage.jpg" width="10" height="10" alt="my image" onmouseover="changeBigImageFunction('bigimage2');" />
You could do what I think you want in a couple of ways.

Write the img with a link surrounding it and disable it initially until a parameter is supplied. Making sure that if the function is passed no value then it writes the same starting image as you have used. The downside t this is that it may be confusing to the user if they see the cursor acting as a link but go nowhere when pressed.

Code: Select all

<img src="myimage.jpg" width="10" height="10" alt="my image" onmouseover="changeBigImageFunction('');" />
Or you could hold the img in a div or table cell and use the javascript function to rewrite the contents of the div / cell using the innerHTML property.

Code: Select all

<!--  this is the div that holds our big image to be changed. Note the id given to this div for later ref.  -->

<div id="bigImageHolderDiv">
   <img src="myimage.jpg" width="10" height="10" alt="my image" />
</div>

<!--  img to change the contents of the above div -->

<img src="myimage.jpg" width="10" height="10" alt="my image" onmouseover="changeBigImageFunction('2');" />
Note that the function call passes a number. You then have a couple of arrays in javascript, one to hold the value of the image to write and the other holds the link url to write. Once you pass a number, you can then do something like:

Code: Select all

var param = 2; /*for the purposes of this we assume that '2' has been passed to the param var */

var imgArr;
imgArr&#1111;0] = "bigImage1.jpg";
imgArr&#1111;1] = "bigImage2.jpg";
imgArr&#1111;2] = "bigImage3.jpg";

var linkUrlArr;
linkUrlArr&#1111;0] = "http://www.forums.devnetwork.net";
linkUrlArr&#1111;1] = "http://www.php.net";
linkUrlArr&#1111;2] = "http://www.phpdeveloper.org";

var bigImageHolder = getElementById("bigImageHolderDiv");

bigImageHolder.innerHTML = "<a href='" + linkUrlArr&#1111;param] +"'><img src='" + imgArr&#1111;param] + "' width='10' height='10' alt='my big image' /></a>"
which should write the contents of bigImageHolderDiv to:

Code: Select all

<div id="bigImageHolderDiv">
<a href='http://www.phpdeveloper.org'><img src='bigImage3.jpg' width='10' height='10' alt='my big image' /></a>
</div>
That should give you something to work off of. Don't forget to check for no value passed or a spurious value so you can assign a default value for those situations.

oh, and using the getElementById will only work in newer browsers , IE5+ and Mozilla6 +. For NN4 etc you will need to find it via the layers propoerty ot document.all for IE 4 and lower... just in case you need to.

hth

Posted: Fri May 14, 2004 12:27 pm
by romeo
now that makes sense, THNAK YOU