Javascript onmouseout 이벤트

Question

그래서 3 개의 원과 jquery 슬라이더가있는 nav가 있습니다.

기본적으로 첫 번째 원이 켜지고 사용자가 두 번째 원을 클릭하면 슬라이더가 두 번째 div로 이동 한 다음 해당 원이 켜지고 첫 번째 원이 희미 해집니다. 이것은 세 번째 원과 동일한 방식으로 작동합니다.

모든 것이 잘 작동이 코드는 내가 그것을 줄 그러나 때,

<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)"/>

나의 다음 작업은 서클에 호버 효과를 추가하는 모습입니다 마우스를 가져 가면 이미지의 src가 바뀝니 까? onmouseout이 트리거되면 다시 변경하기 위해 이전에 원이 켜져 있더라도 항상 희미한 원이됩니다.

내 기본 질문은 이것입니다. onmouseover가 변경되기 전에 이미지의 src를 기억하고 onmouseout이 트리거되었을 때 이전 상태로 되돌릴 때 사용할 수있는 방법이 있습니까? 감각 :

어떤 조언이 도움이 될 것입니다!

Answer 1

클래스를 확장하는 맞춤 속성을 추가하거나 현재 및 대상 이미지 (또는 기본, 활성 및 마우스 오버)를 저장할 자체 JavaScript 객체를 만든 다음 기본 스크립트에 묶을 수 있습니다. 아마도 로컬 이벤트에서 JS를 이동하고 prototype.js 또는 jquery과 같은 라이브러리를 사용하여 이벤트를 연결하기 위해 로직을 단순화 할 것입니다. (이것은 과잉 - 어쩌면 다른 곳에서도 유용 할 수 있습니다!)