✔ mouseover and mouseout

M

MSinistar

Grünschnabel
Hallo,

ich hab jetzt schon alles mögliche ausprobiert was ich weiß und was ich hier im Forum gefunden habe! Aber....!:(

Also ich hab folgendes einfache Menü:

HTML: 
<head>
<title>navi</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFF7D8" background="images/navi_bg.jpg" onLoad="MM_preloadImages('startseite_select.jpg','team_select.jpg','links_select.jpg')">
<table width="300" border="0" cellspacing="0" cellpadding="3" height="100%">
  <tr>
    <td><a href="team.html" onMouseOver="MM_swapImage('team','','button/team_select.jpg',1)" onMouseOut="MM_swapImgRestore()" target="Anzeige"><img src="button/team.jpg" alt="team" name="team" width="250" height="60" border="0" id="team"></a></td>
  </tr>
  <tr>
.........

    <tr>
    <td><a href="links.html" onMouseOver="MM_swapImage('links','','button/links_select.jpg',1)" onMouseOut="MM_swapImgRestore()" target="Anzeige"><img src="button/links.jpg" alt="links" name="links" width="250" height="60" border="0" id="links"></a></td>
  </tr>
</table>
</body>

So jetzt habe ich folgendes Problem:
In der Ausgangssituation ist z.B. das Bild "team.jpg" sichtbar und wenn ich mit der Maus über den Link fahre erscheint "team_select.jpg" und wenn ich über den nächsten Link fahre wird aus dem "team_select.jpg" wieder "team.jpg"! also so weit so gut!

Aber wenn ich nun einen Link anklicke (z.B. Team) soll das Bild "team_select.jpg" erscheinen (tut es ja noch), aber wenn ich nun über einen anderen Link fahre (z.B. Link`s) dann soll "team_select.jpg" sichtbar bleiben (nicht zurückspringen auf "team.jpg) und erst verschwinden wenn ein anderer Link wirklich angeklickt wird!:confused:

Jetzt hoffe ich ich hab nicht zu verworren geschrieben!:rolleyes:

Für eure Hilfe wär ich wirklich dankbar,ich steig da einfach nicht durch!

Grüßle
 
Hast du schon mal daran gedacht, ein rein CSS-gestütztes Navigationsmenü einzusetzen? Das würde diese Ganze JavaScript-Geschichte überflüssig machen.
 
Hi,

danke habs ausprobiert und einwandfrei! Dachte ich brauch Javascript dafür!

Super vielen Dank!:)


So Thema abgeschlossen!

VIELEN DANK, nochmal

Grüßle
 
Hi,

ok, ich weiß zuerst abschließen und dann doch nochmal fragen! Sorry!!

Aber das mit dem CSS klappt ganz gut bis auf:

Wenn ich einen Link anklicke erscheint korrekt das "select"-jpg (.button:active) und wenn ich über die anderen Links fahre (.button:hover) bleibt das "select"- jpg aktiv! Super, so solls sein!

Aber wenn ich nun irgendwo auf die website klicke (kein anderer Link, nur "leere" Fläche verschwindet das "select"-jpg!

Gibt es eine Möglichkeit dieses verhalten zu unterdrücken?:confused:

Grüßle
 
OK,
da das mit CSS nicht funktioniert, hat vielleicht jemand eine Idee wie ich das mit Javascript mache bzw. was an meinem Quellcode fehlt? :confused:

Grüßle
 
Vielleicht hilft dir dieses Script weiter, das Sven Mintel vor geraumer Zeit in einem anderen Kontext gepostet hat:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
a.nav,a.clicked{
    text-decoration:none;
    font:normal 8pt Verdana,Geneva,Sans-Serif;
    display: block;
    border: 1px solid #FCDC7C;
    height:20px;
    width:100px;
    font-size: 8pt;
    text-align:center;
    PADDING: 2px;
    margin-bottom:4px;
    BACKGROUND: #333399;
    COLOR:#FCDC7C;
}

a.nav:hover,a.clicked{
    BACKGROUND: #FCDC7C;
    COLOR:#333399;
}
-->
</style>
<script type="text/javascript">
<!--
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}
//-->
</script>

</head>
<body>

  <a class="clicked" href="#link1" onclick="aktivieren(this.href)">Link 1</a>
  <a class="nav" href="#link2" onclick="aktivieren(this.href)">Link 2</a>
  <a class="nav" href="#link3" onclick="aktivieren(this.href)">Link 3</a>
 
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück