• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Komme mit Mouseover Effect nicht klar.

O

orchid

Neues Mitglied
Hallo an alle.

Ich bekomme es einfach nicht hin, dass meine Links "hovern".
Ich habe eine Navigationsleiste mit diversen Links erstellt, die beim drüberfahren mit der Maus die Grafik wechseln sollen.

Könnte vielleicht mal jemand über meinen Code schauen und mir sagen, was daran falsch ist.

Ich habe noch nicht alle Links definiert, aber schon bei den ersten beiden funktioniert es nicht.
Hier also der code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Navigation</title>

<style type="text/css">

#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navi li
{
margin-left: 5px;
}

#navi a
{
display: block;
width: 110px;
height: 24px;
background-image: url(orange1.png);
}

#navi a:hover
{
background-image: url(button1.png);
}

a.button1:link, a.button1:visited
{
background-image: url(orange1.png);
}

a.button1:hover
{
background-image: url(button1.png);
}

a.button2:link, a.button2:visited
{
background-image: url(orange2.png);
}

a.button2:hover
{
background-image: url(button2.png);
} 

</style>
</head>

<body bgcolor="#172262">

  <div id="navi">

  <ul id="navi">
    <li><a class="button1" href="Willkommen.htm" target="Hauptfenster"><img src="orange1.png" border="0" alt="bild.jpg"></a></li>
    <li><a class="button2" href="Ueber%20uns.htm" target="Hauptfenster"><img src="orange2.png" border="0" alt="bild.jpg"></a></li>
    <li><a href="Unser-Haus.htm" target="Hauptfenster"><img src="orange3.png" border="0" alt="bild.jpg"></a></li>
<li>>a .... usw.

</div>
  </ul>

</body>
</html>
 
Code: 
<body bgcolor="#172262">

  <div id="navi">

  <ul id="navi">
    <li><a class="button1" href="Willkommen.htm" target="Hauptfenster"></a></li>
    <li><a class="button2" href="Ueber%20uns.htm" target="Hauptfenster"></a></li>
    <li><a href="Unser-Haus.htm" target="Hauptfenster"><img src="orange3.png" border="0" alt="bild.jpg"></a></li>
<li>>a .... usw.

</div>
  </ul>
Du hast die Bilder doch als Hintergrundbild eingefügt. Wieso dann also noch einmal so reinpacken?
 
Danke, Körnerbrötchen (habe übrigens gerade eins verspeist). :-)

Du hast mich auf die Lösung gebracht. Es war einiges "doppelt gemoppelt".
Ich habe jetzt die zusätzlichen Bilderangaben in <a href> raus geschmissen.
Doch das allein war's noch nicht. Zusätzlich musste ich noch folgende Codestellen teilweise oder ganz entfernen:

Code: 
[COLOR=Red]#navi a:hover
{
background-image: url(button1.png);
}[/COLOR]


#navi a
{
display: block;
width: 110px;
height: 24px;
[COLOR=Red]background-image: url(orange1.png);[/COLOR]
}
@koslowski. Deinen Vorschlag werde ich mir auch mal ansehen.

Kann mir jetzt vielleicht noch jemand sagen, wie ich die Link-Grafiken so formatiere, dass sie zueinander einen Abstand haben?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben