HTML Help

c_rok06 · Joined: 12 Jun 2009 Posts: 3

Hi,

I am creating a gallery. At the moment I have a row of thumbnails. They all have onMouseOver, onMouseOut and onClick events. When the thumb is clicked, an image appears in the space above (replacing a holder image).

That's all working great, the problem is that now I want the "hover" image of the thumb to stay when clicked on.. and only when it's been clicked. I tried two onClick events... which I'm not even sure I had the correct syntax for. It occurred to me that even if I did have the correct syntax... maybe the onMouseOut event was overriding it and changing the thumb back to its initial state.

Here is an example of what I have:

Code:
one = new Image;
one.src = "http://varriaga.com/k4ff3/images/thumb.jpg";
one1 = new Image;
one1.src = "http://varriaga.com/k4ff3/images/thumb2.jpg";
one2 = new Image;
one2.src = "http://varriaga.com/k4ff3/images/example.jpg";

Code:
<div id="image" align="center">
<div class="imgholder" align="center">
<img src="http://varriaga.com/k4ff3/images/placeholder.jpg" name="image" />
</div>
</div>
<div id="thumbs" align="center">
<a href="#" onMouseOver="thumb.src=one1.src" onMouseOut="thumb.src=one.src" onClick="image.src=one2.src;thumb.src=one1.src"><img src="http://varriaga.com/k4ff3/images/thumb.jpg" name="thumb" /></a>
<a href="#" onMouseOver="thumb.src=one1.src" onMouseOut="thumb.src=one.src" onClick="image.src=one2.src"><img src="http://varriaga.com/k4ff3/images/thumb.jpg" name="thumb" /></a>
</div>

The first thumb is where I tried to combine two onClick events, but again I don't know if I did this correctly.
Is there an alternative or another way of doing this?

Thanks