Javascript für mouseover und onclick gesucht

Stephan I. · 25. November 2002

Hi,

ich suche ein Javascript, welches beim Mouseover eine Grafik austauscht.

Gleichzeitig soll die ausgetauschte Grafik beim onclick stehen bleiben und der hinter der Grafik liegende Link ausgeführt werden, sodaß bei einem gerade aktiven Link eine andere Grafik angezeigt wird, als bei den gerade nicht besuchten Links.

Ich habe die einschlägigen Seiten abgesucht, aber ich habe nur Scripts für einen Imagewechsel gefunden, nichts aber mit der onclick Funktion.

Wer hat sowas für mich?

Mein Code bis jetzt:

Code

<script language="JavaScript">
startseite1=new Image ();
startseite1.src="images/button_startseite.jpg";
startseite2=new Image ();
startseite2.src="images/button_startseite_aktiv.jpg";


immobilien1=new Image ();
immobilien1.src="images/button_immobilien.jpg";
immobilien2=new Image ();
immobilien2.src="images/button_immobilien_aktiv.jpg";


vermietungen1=new Image ();
vermietungen1.src="images/button_vermietungen.jpg";
vermietungen2=new Image ();
vermietungen2.src="images/button_vermietungen_aktiv.jpg";


hausverwaltung1=new Image ();
hausverwaltung1.src="images/button_hausverwaltung.jpg";
hausverwaltung2=new Image ();
hausverwaltung2.src="images/button_hausverwaltung_aktiv.jpg";


kontakt1=new Image ();
kontakt1.src="images/button_kontakt.jpg";
kontakt2=new Image ();
kontakt2.src="images/button_kontakt_aktiv.jpg";


firmenprofil1=new Image ();
firmenprofil1.src="images/button_firmenprofil.jpg";
firmenprofil2=new Image ();
firmenprofil2.src="images/button_firmenprofil_aktiv.jpg";


var a, Bild;


function tauschen(a, Bild)
  {
   window.document.images[a].src=Bild.src
  }


</script>

Alles anzeigen

Der 1. Link dann:

Code

<a href="welcome.html" target="I1" onmouseover="tauschen(1, startseite2)" onmouseout="tauschen(1, startseite1)" onclick="tauschen(1, startseite2)"><img border="0" src="images/button_startseite.jpg" width="120" height="24"></a>

Soweit so gut, aber die Grafik wechselt halt nach dem Anklicken des Links wieder in den Urzustand zurück, weil dann onmouseout wieder eingreift...

Danke,
Stephan

Nebelfelsen · 25. November 2002

Vor dem Problem stand ich auch schon öfters.

Zum einen kannst Du es lösen, indem Du mit CSS-Layern arbeitest. Bei Mausklick wird dann das Layer mit dem Standard-Button ausgeblendet und das mit dem hervorgehobenen Button eingeblendet. Diese Verfahrensweise eigent sich gut für Menübäume mit Unterpunkten.

Marcromedia Dreamweaver (kann man sich auch als Testversion herunterladen) beitet die Möglichkeit, eine Navigationsleiste zu erstellen. Ich hab das JavaScript immer noch nicht durchschaut, dass dafür zuständig ist (hab mir aber auch noch nicht die Zeit dafür genommen). Auf jeden Fall bleibt damit auch der over-Button angezeigt, wenn der Bereich angeklickt ist. Nur kann man mit Dreamweaver in einer HTML-Datei nicht mehr als eine zusammengehörige Navigationsleiste verwalten, zur Not lassen sich aber auch in mehreren Dreamweaver-Fenstern erstellte Navileisten in einer Seite zusammenfassen (cut and paste), falls das erforderlich sein sollte.

Ich hab Dir einmal die function von Macromedia Dreamweaver sowie einen Aufruf eines solchen Menüs hier reingeschrieben:

PHP

function MM_nbGroup(event, grpName) { //v3.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : args[i+1];
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    if ((nbArr = document[grpName]) != null)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = args[i+1];
      nbArr[nbArr.length] = img;
  } }
}

Alles anzeigen

PHP

<img src="../../../media/de/navi/left/products/dgb/0mainsub1-allebereiche.gif" width="80" height="14"><br><a href="../../loader/products/dgb/11produkte_td.html" onClick="MM_nbGroup('down','group1','td','../../../media/de/navi/left/products/dgb/main1sub2-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','td','../../../media/de/navi/left/products/dgb/main1sub2-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub2-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="td" src="../../../media/de/navi/left/products/dgb/main1sub2-produkte_0.gif" border="0" onLoad="" width="80" height="14"></a><br>
<a href="../../loader/products/dgb/12produkte_sb.html" onClick="MM_nbGroup('down','group1','sb','../../../media/de/navi/left/products/dgb/main1sub3-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','sb','../../../media/de/navi/left/products/dgb/main1sub3-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub3-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="sb" src="../../../media/de/navi/left/products/dgb/main1sub3-produkte_0.gif" border="0" onLoad=""></a><br>
<a href="../../loader/products/dgb/13produkte_fg.html" onClick="MM_nbGroup('down','group1','fg','../../../media/de/navi/left/products/dgb/main1sub4-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','fg','../../../media/de/navi/left/products/dgb/main1sub4-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub4-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="fg" src="../../../media/de/navi/left/products/dgb/main1sub4-produkte_0.gif" border="0" onLoad=""></a><br>
<a href="../../loader/products/dgb/14produkte_tg.html" onClick="MM_nbGroup('down','group1','tg','../../../media/de/navi/left/products/dgb/main1sub5-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','tg','../../../media/de/navi/left/products/dgb/main1sub5-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub5-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="tg" src="../../../media/de/navi/left/products/dgb/main1sub5-produkte_0.gif" border="0" onLoad=""></a><br>
<a href="../../loader/products/dgb/15produkte_tb.html" onClick="MM_nbGroup('down','group1','tb','../../../media/de/navi/left/products/dgb/main1sub6-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','tb','../../../media/de/navi/left/products/dgb/main1sub6-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub6-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="tb" src="../../../media/de/navi/left/products/dgb/main1sub6-produkte_0.gif" border="0" onLoad=""></a><br>
<a href="../../loader/products/dgb/16produkte_ts.html" onClick="MM_nbGroup('down','group1','ts','../../../media/de/navi/left/products/dgb/main1sub7-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','ts','../../../media/de/navi/left/products/dgb/main1sub7-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub7-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="ts" src="../../../media/de/navi/left/products/dgb/main1sub7-produkte_0.gif" border="0" onLoad=""></a><br>
<a href="../../loader/products/dgb/17produkte_pk.html" onClick="MM_nbGroup('down','group1','pk','../../../media/de/navi/left/products/dgb/main1sub8-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','pk','../../../media/de/navi/left/products/dgb/main1sub8-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub8-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="pk" src="../../../media/de/navi/left/products/dgb/main1sub8-produkte_0.gif" border="0" onLoad=""></a><br>
<a href="../../loader/products/dgb/18produkte_hn.html" onClick="MM_nbGroup('down','group1','hn','../../../media/de/navi/left/products/dgb/main1sub91-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','hn','../../../media/de/navi/left/products/dgb/main1sub91-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub91-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="hn" src="../../../media/de/navi/left/products/dgb/main1sub91-produkte_0.gif" border="0" onLoad=""></a><br>
<a href="../../loader/products/dgb/190produkte_be.html" onClick="MM_nbGroup('down','group1','be','../../../media/de/navi/left/products/dgb/main1sub92-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','be','../../../media/de/navi/left/products/dgb/main1sub92-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub92-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="be" src="../../../media/de/navi/left/products/dgb/main1sub92-produkte_0.gif" border="0" onLoad=""></a><br>
<a href="../../loader/products/dgb/191produkte_kp.html" onClick="MM_nbGroup('down','group1','kp','../../../media/de/navi/left/products/dgb/main1sub93-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','kp','../../../media/de/navi/left/products/dgb/main1sub93-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub93-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="kp" src="../../../media/de/navi/left/products/dgb/main1sub93-produkte_0.gif" border="0" onLoad=""></a><br>
<a href="../../loader/products/dgb/192produkte_tp.html" onClick="MM_nbGroup('down','group1','tp','../../../media/de/navi/left/products/dgb/main1sub94-produkte_1.gif',1)" onMouseOver="MM_nbGroup('over','tp','../../../media/de/navi/left/products/dgb/main1sub94-produkte_1.gif','../../../media/de/navi/left/products/dgb/main1sub94-produkte_1.gif',1)" onMouseOut="MM_nbGroup('out')" target="content"><img name="tp" src="../../../media/de/navi/left/products/dgb/main1sub94-produkte_0.gif" border="0" onLoad=""></a><br>

Alles anzeigen

The-spY · 25. November 2002

Hoi

ihr habt da ja ziemlich breiten Code gebastelt

Also, das ganze sollte auch einfacher gehen. Ich hab das grad mal ausprobiert, und es ist fast gleich wie beim Ausgangsposting, allerdings heissen bei mir die Bilder und Variablen ein bisschen anders, aber das sollte nicht das Problem sein.

Code

<script language="JavaScript">


  flash0 = new Image(); 
  flash0.src = "flash0.gif"; 


  flash1 = new Image(); 
  flash1.src = "flash0_.gif"; 


  flash_hold = false;


 function tauschen(Bildnr,Bildobjekt)
 {
   if (!flash_hold)
   window.document.images[Bildnr].src = Bildobjekt.src;
 }


</script>


.... und dann beim Bild .....


<a href="main.htm" target="f2" onmouseover="tauschen(0, flash1)" onmouseout="tauschen(0, flash0)" onClick="flash_hold=true"><img border="0" src="flash0.gif" width="120" height="24"></a>

Alles anzeigen

Also im Prinzip wird beim Klicken eine Variable gesetzt, die halt immer abgefragt wird. Um das jetzt auf mehrere Bilder auszuweiten sollte man an das onClick eine Funktion hängen, die evt, die holds von evt. anderen Bilder wieder zurück setzt. Aber ich denke damit sollte man klar kommen...

cia The-spY

Nebelfelsen · 26. November 2002

Das scheint mir eine ganz praktische Lösung zu sein, wenn man noch das Löschen der hold-Variable einbaut. Das würde ich allerdings in einem array oder mit mehreren Variablen tun, damit jedem Button ein hold-Wert separat zugewiesen werden kann, sonst gibt es Probleme, wenn einer mehrmals über einen aktiven Menüpunkt fährt.

Javascript für mouseover und onclick gesucht

Jetzt mitmachen!

Teilen