- HTML


Jak zmienić obrazek po najechaniu kursorem?


Obrazek ma się zmienić po najechaniu na niego kursorem myszy.

Rozwiązanie:

Potrzebujemy tylko bardzo prostego kodu:

<a href="#" onmouseover="rov.src='grafika2.gif'" onmouseout="rov.src='grafika1.gif'">
<img src="grafika1.gif" name="rov" alt="punkt" align="left" /></a>


Ten sam efekt możemy osiągnąć za pomocą stylów CSS.

Jednak gdy użyjemy na stronie naszego skryptu zauważymy, że po najechaniu myszką, obrazek który ma się pojawić zaczyna się dopiero wczytywać. W wyniku czego brakuje płynności. Tutaj także możemy posłużyć się javascriptem aby rozwiązać ten problem:

<script language='javascript'>
 
obrazek1=new Image
obrazek2=new Image
 
obrazek1.src='grafika1.gif'
obrazek2.src='grafika2.gif'
 
</script>

W ten sposób podczas wczytywania się strony, załadują się dwa obrazki.
Następnie w źródle strony piszemy:

<a href="strona.htm" onMouseOver="document.rysunek.src=obrazek1.src" onMouseOut="document.rysunek.src=obrazek2.src"> <img src="grafika1.gif" border="0" name="rysunek"> </a>


Tym razem odwołaliśmy się nie do konkretnego pliku obrazka tylko do elementu obrazek1.src i obrazek2.src którym w skrypcie dopisaliśmy źródło.


InformacjeRaportuj | Drukuj

Data dodania: 01-10-2017 17:46Autor:admin
Ilość wyświetleń:563Komentarzy: 1
Komentarze
WinerFresh dnia 29-10-2017 23:29
  To chyba powinno być w dziale JavaScript. W końcu to DHTML
Dodaj komentarz
Zaloguj się, żeby móc dodawać komentarze.