Onmouseover - nie do końca oczekiwany efekt

[jaclaw]

Mam drobny problem, mój kod wygląda tak:

<img src="1.jpg" onmouseover="this.src='1.png';" onmouseout="this.src='1.jpg';" >

Plik 1.png jest półprzezroczysty i chciałbym aby się nakładał na 1.jpg po najechaniu myszką. Tak się nie dzieje, tylko 1.jpg znika i pojawia się półprzezroczysty 1.png na białym tle.

Ktoś wie jak prosto osiągnąć zamierzony efekt?

[Veal]

1. Utwórz div o wymiarze takim jak obrazek i ustaw go jako tło,
   
2. wstaw do div'a niewidoczny tag img,
   
3. podepnij akcje pokazującą obrazek po najechaniu na div.
   

Przykładowo:

<div style="width: 100px; height: 100px; background-image: url(1.jpg)" onmouseover="document.getElementById('hover').style.display='block'" onmouseout="document.getElementById('hover').style.display='none'">
<img id="hover" style="display:none" src="1.png" />
</div>

Da się ładniej i prościej ale nie chce mi się myślec jak to zrobić w czystym JS...

[jaclaw]

Dzięki, działa, nie sądzę żebym potrzebował zgrabniejszego rozwiązania.