Wyświetlanie obrazka po najechaniu na link

pytanie zadane 11 kwietnia 2015 w JavaScript przez Emilian Kuczyński Użytkownik (670 p.)

Hej! Mam do Was pytanie. W jaki sposób wyświetlić obrazek w JS po najechaniu na link? Jeżeli to możliwe prosiłbym o prosty przykład (gotowy kod).

Z góry dziękuję

Pozdrawiam

2 odpowiedzi

odpowiedź 11 kwietnia 2015 przez Valtuil Pasjonat (22,460 p.)
wybrane 11 kwietnia 2015 przez Emilian Kuczyński

Najlepsza

Chodzi o dymek z obrazkiem?

http://blog.piotrnalepa.pl/2009/06/25/css-dymki-z-podpowiedziami/

komentarz 11 kwietnia 2015 przez Emilian Kuczyński Użytkownik (670 p.)

Niee, chciałbym apy po najechaniu kursorem myszki na odnośnik w odpowiednim miejscu na stronie wyświetlił się obrazek

komentarz 11 kwietnia 2015 przez Valtuil Pasjonat (22,460 p.)

Możesz wywołać funkcje podczas: onMouseOver="document.getElementById('obrazek').style.display='block'"

onMouseOut="document.getElementById('obrazek').style.display='none'"

Przykład:


<img id="obrazek" src="../" />

<a onMouseOver="document.getElementById('obrazek').style.display='block'" 
      onMouseOut="document.getElementById('obrazek').style.display='none'">
      Napis
</a>

komentarz 11 kwietnia 2015 przez Emilian Kuczyński Użytkownik (670 p.)

Hmm, ale chodzi mi o to, że podczas wejścia na stronę obrazki są nie widoczne, dopiero po najechaniu wyświetlają się one w określonej przezemnie pozycji. Chcę zrobić coś na wzór rozwijanego menu, kiedy najeżdżam menu się rozwija

komentarz 11 kwietnia 2015 przez Valtuil Pasjonat (22,460 p.)

Dodaj w arkuszu css na start wartość:

#obrazek { display: none; }

lub

<img style="display: none" ... />

komentarz 11 kwietnia 2015 przez Emilian Kuczyński Użytkownik (670 p.)

A jak później ustwaić położenie tego obrazka co do piksela?

komentarz 11 kwietnia 2015 przez Valtuil Pasjonat (22,460 p.)

Możesz użyć pozycji absolutnej i określić ją parametrami: left/right, top/bottom, np:

#obrazek {

   position: absolute;

   left: 10px;

   top: 10px;

}

Aby określić pozycje obrazka względem, np diva "content":

1. Umieść obrazek wewnątrz diva (<div id="content"><img ../></div>)

2. W arkuszu styli dodaj: #content { position: relative; } lub <div style="position: relative" ..>