Verzweifelter Neuling: Navigation/Rollover

SELF-Forum

Navigation/Rollover

Verzweifelter Neuling
– Informationen zu den Bewertungsregeln

Hallo Zusammen

Ich bin ein Javascript-Neuling und versuche verzweifelt folgenden Script korrekt zum laufen zu bringen:

  
  
function imgOver1() {  
 if (document.images.nav1.src != "images/nav.gif") {  
 document.images.nav1.src='images/nav_over.gif';  
 }  
 else if (document.images.nav1.src != "images/nav_down.gif"){  
 document.images.nav1.src='images/nav_down.gif';  
 }  
}  
  
function imgClick1() {  
 document.images.nav1.src='images/nav_down.gif';  
 }  
  
function imgOut1() {  
 if (document.images.nav1.src != "images/nav_over.gif")  
 {  
 document.images.nav1.src='images/nav.gif';  
  }  
 else if (document.images.nav1.src != "images/nav_down.gif")  
 {  
 document.images.nav1.src='images/nav_down.gif';  
 }  
}

Die Idee dahinter ist, dass das Bild nav.gif mit dem Namen nav1 bei mouseOver zu nav_over.gif wird und bei mouseOut wieder zurück wechselt, jedoch soll sobald auf das Bild (den Link) geklickt wird auf nav_down.gif gewechselt werden und dieses Bild dann beibehalten werden.
D.h. Rollovereffekt mit nav.gif und nav_over.gif und sobald darauf geklickt wird nur noch nav_down.gif.
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.

Kann mir da jemand weiterhelfen? wäre ächt super!
Einfach fragen falls etwas unklar ist!
Vielen Dank für Eure Hilfe!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Navigation/Rollover

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber Verzweifelter,

    das, was Du vorhast, ist sinnvollerweise _nicht_ mit JavaScript, sondern mit CSS lösbar. Informiere Dich über die sogenannten http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=Pseudo-Klassen :link, :hover und :focus (ja, die Doppelpunkte gehören dazu). Im Zusammenhang mit http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image@title=Hintergrundbildern ist Dein Vorhaben dann sehr schön mit CSS lösbar.

    Ein Lesetipp zu einer Navigation wäre auch <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=CSS-basierte Navigationsleisten>, der Dich weiter inspirieren sollte, von Deinem ursprünglichen JavaScript-Konzept abzukommen.

    Solltest Du dabei feststellen, dass Deine CS-Kenntnisse noch nicht genügen, um Dein Vorhaben umzusetzen, dann begehe nicht den Fehler, auf Deiner JavaScript-basierten Lösung zu beharren! Frische stattdessen Deine CSS-Kenntnisse auf!

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Navigation/Rollover

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Felix Riesterer:

      :link, :hover und :focus

      Wobei der Focus verlorengeht, wenn irgendwoanders (nicht notwendigerweise auf den jeweils anderen Link) geclickt wird.

      ':focus' tut also nicht ganz das Gewünschte. Mit ':target' ließe sich das erreichen (allerdings nicht für alle Browser).

      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

  2. 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

  3. Navigation/Rollover

    photografx Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo "Verzweifelter" ...

    frag google einfach mal nach "CSS Rollover" .. da wirst du geholfen ...

    oder schau dir das mal an :

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>CSS_Rollover</title>  
  
<style type="text/css">  
<!--  
  
a {  
display:block;  
width:200px;  
height:40px;  
background-image:url(button_bg.png);  
background-position:0px 0px;  
text-Align:center;  
padding: 10px 0px 0px 0px;  
font-family:"Arial Black", Helvetica, sans-serif;  
color: #000000;  
text-decoration:none;  
}  
  
a:visited {  
background-position:0px 0px;  
}  
  
a:hover {  
background-position:0px -50px;  
color:#0000CC;  
}  
  
a:active {  
height:35px;  
padding: 15px 0px 0px 0px;  
background-position:0px -100px;  
color: #ffffff;  
}  
  
-->  
</style>  
  
</head>  
  
<body>  
<h1>CSS_Rollover</h1><br />  
<br />  
<br />  
<a href="#">Klick Mich!</a>  
</body>  
</html>

    hier in "Action" --> CSS_Rollover

    Das Geheimnis ist simples CSS ... verwendet wird nur EIN Hintergrundbild .. und dieses wird je nach Status (:hover, :active ... ) verschoben ...
    natürlich könntest du auch jedesmal auf eine neue date verweisen .. das hätte aber den Nachteil das der Browser das Bild erst laden muss und dein Besucher eine Verzögerung spürt.

    In Mit dieser Variante wird gleich das Komplette hintergrundbild geladen ... sprich der Rollover funktioniert Ohne Verzögerung ...

    Schönes Weekend

    AlexxJ

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln