Forum PHP.pl > Zmiana obrazka po najechaniu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Zmiana obrazka po najechaniu

Forum PHP.pl > Forum > Po stronie przeglądarki

Wieviór

15.01.2008, 18:34:08

Ogólnie chodzi o pasek pod logiem, na którym są obrazki typu "Home | Forum | Kontakt" itp. itd.

Do tej pory robiłem to tak:

[HTML] pobierz, plaintext 
<div class="przycisk"><a href="" onMouseOver='rollover2.src="on.gif"' onMouseOut='rollover2.src="off.gif"'><img src="off.gif" name="rollover2" border="0"/></a></div>
[HTML] pobierz, plaintext

Vadilator W3 jednak pokazuje mi błąd:

there is no attribute "onMouseOver".
there is no attribute "onMouseOut".
there is no attribute "name".

Zna ktoś dobry, prosty sposób na zrobienie czegoś takiego by Vadilator się nie czepiał?

Mój Doctype:

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

czachor

15.01.2008, 18:40:49

"onmouseover" a nie "onMouseOver" i to samo z "onmouseout"
"id" a nie "name"

woj_tas

15.01.2008, 18:42:31

Najprościej:

html:

[HTML] pobierz, plaintext 
<a href="" title=""></a>
[HTML] pobierz, plaintext

css:

[HTML] pobierz, plaintext 
a {width:x; height:y; background:url('images/z.jpg') no-repeat;}
a:hover { background:url('images/z-hover.jpg') no-repeat;}
[HTML] pobierz, plaintext

Troche lepiej:

html:

[HTML] pobierz, plaintext 
<a href="" title="Kontakt">Kontakt</a>
[HTML] pobierz, plaintext

css:

[HTML] pobierz, plaintext 
a {width:x; height:y; background:url('images/kontakt.jpg') left top no-repeat; float:left; text-indent:-9999px;}
a:hover { background:url('images/z-hover.jpg') left bottom no-repeat;}
[HTML] pobierz, plaintext

W drugim przypadku zasada polega na tym zeby po najechaniu nie wczytywać nowego obrazka, tylko przesunąć ten który już jest.

Pozdrawiam

Wieviór

15.01.2008, 18:47:58

Cytat(czachor @ 15.01.2008, 20:40:49 )

"onmouseover" a nie "onMouseOver" i to samo z "onmouseout"
"id" a nie "name"

Taka głupota? :]

Ten Vadilator W3 to jest jednak sztywniak

Dzięki za pomoc ;]

punkomuzykant

21.01.2008, 18:19:22

Dawno nie bawiłem się w html ale na Twoim miejscu zamiast tej starej metody sprawdziłbym to

Kod

<pre><script type="text/javascript">
if (document.images)
{
     image1 = new Image;
     image2 = new Image;
     image1.src = "enter1.gif";
     image2.src = "enter2.gif";
}

function chgImg(name, image)
{
     if (document.images)
     {
         document[name].src = eval(image+".src");
     }
}
</script>

...

<a href="/" onMouseOver='chgImg("enter", "image2")'
onMouseOut='chgImg("enter", "image1")'><img name="enter"
src="enter1.gif" border="0" alt="Enter if you dare!"></a></pre>

źródło bardzo wiarygodne więc warto zobaczyć

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.