Javascript onmouseout event

Question

Hi everyone!

So I have a nav with 3 circles, and a jquery slider.

By default the first circle is lit up, and when a user clicks on the 2nd circle the slider moves to the 2nd div and then that circle is lit and the 1st circle dims out. This works the same way with the 3rd circle.

Everything works fine, this is what the code looks like

<img name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="this.src='img/bulletwhite.png';document.images['bullet2'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>
<img name="bullet2" height="30px" width="30px" src="img/bullet.png" onmousedown=" this.src='img/bulletwhite.png';document.images['bullet1'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>
<img name="bullet3" height="30px" width="30px" src="img/bullet.png" onmousedown=" this.src='img/bulletwhite.png';document.images['bullet1'].src='img/bullet.png';document.images['bullet2'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>

My next task is to add a hover effect to the circles, however when I give it the hover effect, it changes the src of the image right? so when the onmouseout is triggered, to change it back, it will always be a dim circle, even if the circle was previously lit.

So my basic question is this, is there any way for it to remember the src of the image BEFORE onmouseover changes it and then using that to bring it back to its previous state when the onmouseout is triggered, I hope that makes sense :)

Any advice would help!

Answer 1

You could try adding a custom attribute to extend the class, or create your own JavaScript object which will store current and target images (or base, active, and hover), then tie that into the main script. It would probably simplify your logic a lot to move the JS out of the local events and hook the events using a library like prototype.js or jquery (though this is overkill - maybe useful elsewhere!)