Image Switch on-click, with each image having it's own on-mouseover highlight image

[lucidx]

I would like to have a Play button that becomes a Pause button once clicked, however I would also like them each have a mouse-over image (highlighted play/pause button images). I've been able to do one or the other but not both. There is even a similar solution on here, but without the roll-over image ability:



Any assistance would be greatly appreciated.

[djr33]

What do you want these buttons to do? It should be possible to make the graphics do that, but you will also need to deal with any extra features, like playing a video or slideshow.


There are a few ways to approach this. You can either rewrite the element (img? div?) each time, or you can use an image swap script with conditionals.

Probably the easiest way will be to mix the two: create two separate divs/imgs that have the desired rollover functionality then use clicks to rewrite between them.

Of course then you will need to integrate the additional functionality mentioned above.

[lucidx]

Hi Daniel,

I will be using the buttons under a fluid scaled photo gallery. you can see it here:

http://www.galluzzoimagery.com/test/test.html

Thanks.

[djr33]

It looks like you should be able to just switch the <a> tags for the play/pause buttons. The easiest way of doing this would be to set one of them as display:none; by default then to switch them when you click one of the buttons, using the onclick attribute. Does that help or do you need more specific information?

[lucidx]

Hi Djr33.


I'm not too familiar with implementing 'display:none'. Any additional details would be appreciated.


Thanks,
C.

[djr33]

It's a CSS property:

<style type="text/css">
element { display:none; }
</style>

If you want to modify that using Javascript, you should be able to access it in the following way:

<script type="text/javascript">
element.style.display = 'none'; //hide it
element.style.display = 'block'; //display as a "block" element, like a <div>
element.style.display = 'inline'; //display as an "inline" element, like a <span> or normal <img>
</script>

Of course you'll need to put all of this together using functions and conditionals (ifs), but the tools above are the basics for what you'll need to do. If you alternate displaying one image instead of the other, then you'll be able to effectively "change" the image onclick to the other, and that way keep the same code as you have now for the onmouseover and other code.

Note that you can use this format if you need two or more element in an html event attribute:
<img onclick="function1(); function2();">