Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Efekt rollover i link tekstowy
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
kornel-php
Mam kod:

  1. <a href="kontakt.html" class="kontakt">
  2. <img src="grafika/koperta.gif" border="0" onmouseover="src='grafika/koperta_.gif'" onmouseout="src='grafika/koperta.gif'">
  3.  
  4. &nbsp;KONTAKT
  5. </a>


Jeśli najade myszką na obrazek, to zmieni się obrazek, jak i rówież kolor tekstu (ustawione w css). Jeśli zrobię odwrotnie, najade na napis, to zmieni się tylko tekst, a obrazek zostanie bez zmian...

Czy można zrobić tak, by w obu przypadkach zmieniały się oba elementy?

Bardzo mi na tym zależy, prosze o odpowiedź, pozdrawiam.
kwiateusz
a może do a dodaj coś pokroju
  1. onmouseover="this.firstChild.src='grafika/koperta_.gif'"
i analogicznie onmouseout

js sie ucze więc może być tu błąd winksmiley.jpg
kornel-php
Spoko, ale wolałbym tego nie robić w JavaScripcie - no chyba, że nie będzie wyjścia...

Poczekam, może ktoś będzie wiedział jak zrobić to w gołym HTMLu.

Pozdrawiam i miłego dnia zyczę
kwiateusz
wzrorowałem się na Twoim kodzie gdzie jest js do podmiany obrazka...
kornel-php
@kwiateusz, mógłbyś mi podrzucić kod JS, bo mi coś nie idzie...

W sumie to z JS znam tylko window.print() itd, więc raczej sam nie dam sobie rady...

Będę bardzo wdzięczny winksmiley.jpg
kwiateusz
jednak za cienki jestem zeby to napisac tongue.gif ten moj kodzik widze ze nie dzial bo sam go testowałem.. może ktoś mądrzejszy się znajdzie...
kornel-php
Ok, spoko winksmiley.jpg

Wpadłem na inny pomysł - jakim jest FLASH, ale jeśli ktoś napisze odpowiedni kod, to będę wdzięczny, pozdrawiam i przyjemnej pracy życzę winksmiley.jpg
kwiateusz
nie jest to śliczne i piękne, ale działa winksmiley.jpg

  1. <a href="kontakt.html" class="kontakt" onmouseover="document.getElementById('obrazek').src='grafika/koperta_.gif'" onmouseout="document.getElementById('obrazek').src='grafika/koperta.gif'">
  2. <img id="obrazek" src="grafika/koperta.gif" border="0">
  3.  
  4. &nbsp;KONTAKT
  5. </a>
kornel-php
@kwiateusz - jesteś wielki! tongue.gif
LBO
Przerób HTML i zastosuj ten pomysł:
http://wellstyled.com/css-nopreload-rollovers.html
kornel-php
Bardzo ciekawa rzecz, dzięki winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.