How do I make my Image Changer clickable?

Aussy

07-12-2005, 07:54 PM

I'm using a script on my site and it works great - however, upon the image changing to the next one, I would like them to be taken to a site when they click on it. So far, I only get them to go to one site per main pic.

Here's some of the script I use (I'm not js savvy at all, just muddling through):
===========================================
<head>

<script>
function changeImage1(Furniture)
{
document.Furniture.src = Furniture;
}

function changeImage2(Lamps)
{
document.Lamps.src = Lamps;
}
</script>
</head>
--------------------------------------------------------------------
<body>
<a
href="javascript:changeImage1('http://retro-modern.net/images/HomePage/FU-1.jpg')">
<font color="#008080">Furniture
1</font></a></td>
<td width="14%" align="center">
<a href="javascript:changeImage1('http://retro-modern.net/images/HomePage/FU-2.jpg')">
<font color="#008080">Furniture 2</font></a>
---------------------------------------------------------------------------
<p align="center"><a href="http://retro-modern.net/furniture.html">
<img name="Furniture"
src="http://retro-modern.net/images/HomePage/FU-1.jpg"
width="520" height="76" border="0"></a></p>
====================================================
etc. etc.

I have not a clue how to make my pic "FU-2.jpg" go to www.mysite/mysite.com.

Can any one give me a suggestion?

Thanks a bunch,

Aussy (new but learning)

Mr J

07-12-2005, 10:05 PM

Please rty the following

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

</script>

<style>
a{
color:#008080;
}
</style>

</HEAD>
<BODY>

<a href="#null" onclick="changeImage('http://retro-modern.net/images/HomePage/FU-1.jpg','http://retro-modern.net/furniture.html')">Furniture</a><BR>

<a href="#null" onclick="changeImage('http://retro-modern.net/images/HomePage/FU-2.jpg','http://retro-modern.net/lamps.html')">Lamps</a>

<p align="center">

<a id="link1" href="#null">
<img name="Furniture" src="http://retro-modern.net/images/HomePage/FU-1.jpg" width="520" height="76" border="0">
</a>
</p>

</BODY>
</HTML>

sparks80

07-12-2005, 10:09 PM

First of all to make it easier to access the link you want to change through javascript, set the name property to something meaningful.

<p align="center"><a name="linkFurniture" href="http://retro-modern.net/furniture.html">
<img name="Furniture"
src="http://retro-modern.net/images/HomePage/FU-1.jpg"
width="520" height="76" border="0"></a></p>

Next you can access the links through the document.links[].href property, either using a number or name e.g.

document.links[0].href or
document.links['link name'].href

So in your case change the script to something like:

<script>
function changeImage1(Furniture)
{
document.Furniture.src = Furniture;
document.links['myanchor'].href = "http://furniture1...."
}

function changeImage2(Lamps)
{
document.Lamps.src = Lamps;
document.links['myanchor'].href = "http://furniture2...."

}
</script>