Gunnar Bittersmann: Navigation/Rollover

Beitrag lesen

SELF-Forum

Navigation/Rollover

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@Verzweifelter Neuling:

Bis jetzt funktioniert der Rollovereffekt und beim Klicken wechselt das Bild auch kurz auf nav_down.gif, jedoch kommt sobald man den Cursor wieder vom Bild wegbewegt wieder nav.gif und der Rollovereffekt bleibt.

Du musst also für jeden Link bei 'onclick' ein Flag (Variable mit den Werten 'true'/'false') setzen. Bei 'onmouseover' und 'onmouseout' musst du abfragen, ob das Flag gesetzt ist. Wenn ja: tue nichts; wenn nein: Hover-Effekt.

Zurückgesetzt werden soll das Flag vermutlich beim Click auf den jeweils anderen Link.

In Browsern, die schon die ':target'-Pseudoklasse verstehen, geht das Ganze auch ohne JavaScript allein mit CSS:

<!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="und" lang="und">  
 <head>  
  <title>TEST</title>  
  <link rel="stylesheet" type="text/css" href="TEST.css"/>  
 </head>  
 <body>  
  <ul>  
   <li><a id="foo" href="#foo">foo</a></li>  
   <li><a id="bar" href="#bar">bar</a></li>  
  </ul>  
 </body>  
</html>

TEST.css:

a  
{  
 background: black;  
 color: white;  
 text-decoration: none;  
 padding: 0.2em 0.5em;  
}  
  
a:hover  
{  
 background: silver;  
}  
  
a:target  
{  
 background: red;  
}  
  
ul  
{  
 list-style: none;  
 margin: 0;  
 padding: 0;  
}  
  
li  
{  
 display: inline;  
 margin: 0;  
 padding: 0;  
}

Statt der wechselnden Hintergrundfarben können es natürlich auch wechselnde Hintergrundbilder sein.

Live long and prosper,
Gunnar

--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
Beitrag melden
–
Informationen zu den Bewertungsregeln