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ї0] = "bigImage1.jpg";
imgArrї1] = "bigImage2.jpg";
imgArrї2] = "bigImage3.jpg";
var linkUrlArr;
linkUrlArrї0] = "http://www.forums.devnetwork.net";
linkUrlArrї1] = "http://www.php.net";
linkUrlArrї2] = "http://www.phpdeveloper.org";
var bigImageHolder = getElementById("bigImageHolderDiv");
bigImageHolder.innerHTML = "<a href='" + linkUrlArrїparam] +"'><img src='" + imgArrї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