pytanie zadane 10 marca 2019 w Programowanie przez użytkownika
otagowane ponownie 12 października 2024 przez użytkownika

1 odpowiedź

odpowiedź 10 marca 2019 przez użytkownika
edycja 12 stycznia 2020 przez użytkownika

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.

...