views:

140

answers:

1

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!

+2  A: 

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!)

AJ
well thank you for you input I think I may try just adding some css attribute to at least give the circle a border or perhaps even change it's background-image,
Pete Herbert Penito
If anybody is wondering how I accomplished this, I used the hover jquery function and basically created a div on top of the circles, hid the divs at document.ready and then showed them on hover and hid again on mouse out
Pete Herbert Penito