Jeśli chcesz zrobić tak aby po najechaniu kursorem myszki na dany tekst wyświetlało się zdjęcie, to poniższy poradnik jest dla Ciebie.
W pierwszej kolejności należy zdefiniować odpowiednio plik arkuszy styli CSS. Najczęściej będzie to dodanie kilku linijek w już istniejący plik style.css:
.linkzdjecie em {font-style:normal}
.linkzdjecie:hover em {color:black;}
.linkzdjecie .zdj {display:none; color:black; position:absolute;}
.linkzdjecie img {border:none;}
.linkzdjecie :hover .zdj {display:inline; text-decoration:none; text-align:center; left:40px; top:30px;z-index:10;}
W powyższych selektorach css, możesz ustawić takie detale, jak kolor, rozmiar tekstu i pozycję wyświetlonego zdjęcia (względem linku), które pokaże się po najechaniu myszką na tekst.
Następnie trzeba dodać dwie linijki kodu w sekcji <body> strony, które odwołują się do powyższych arkuszy stylów:
<a class="linkzdjecie" href="#"><em>Pokaż zdjęcie</em>
<span class="zdj">Zdjęcie<br /><img src="zdjecie.jpg"/></span></a>
Stosujemy tutaj klasyczny odnośnik a href, z tym że nie odsyła on do żadnej konkretnej strony, dlatego jest # w miejscu linku. Aczkolwiek nic nie stoi na przeszkodzie, aby tekst Pokaż zdjęcie, był dodatkowo aktywnym odsyłaczem.
Efekt powyższego kodu będzie taki, że po najechaniu myszką na tekst Pokaż zdjęcie, troszkę niżej (można to definiować w pierwszym kodzie css) wyświetli się zdjęcie, przez nas wybrane.
