Cybaer: Mehrerer Bilder bei MouseOver auswechseln

Beitrag lesen

Hi,

Beim Überfahren des Links der übliche Rollovereffekt, zusätzlich soll der "pfeil.gif" gegen "pfeil2.gif" ausgetauscht werden - und bei MouseOut soll alles wieder sein wie vorher.

Schau Dir mal die Seite http://www.vampirehost.de/pzn/ an (s. auch Beispiele im Quellcode unten).

Der Quellcode, der mehrere Grafiken austauscht:

/* 'ImgSwitch+ 100903' (c) by cybaer@vampirehost.de
   -------------------
 Inhalt    : Laedt fuer beliebig viele IMGs 1-2 Grafiken und/oder ersetzt Statuszeile des Browsers
 Aufruf    : S(Name1,Source1,Name2,Source2,Text,TopDown,All)
 Parameter : Name1 (Name des/der ersten zu ersetzenden IMG-Tags)
             Source1 (Dateiname der ersten Ersatzgrafik)
             Name2 (Name des/der zweiten zu ersetzenden IMG-Tags)
             Source2 (Dateiname der zweiten Ersatzgrafik)
             Text (gewuenschter Text der Statuszeile; " " wenn Statuszeile geloescht werden soll)
             TopDown (Reihenfolge der Ersetzungen: true  -> von oben nach unten
                                                   False -> von unten nach oben)
             All (Anzahl der Ersetzungen: true  -> alle zutreffenden Grafiken werden ersetzt
                                          False -> nur die erste zutreffende Grafik wird ersetzt)
 Sprache   : JavaScript 1.0 (partiell) & JavaScript 1.1 (gesichert)
 Quelle    : http://www.vampirehost.de/gruft/coding/ (cybaer@vampirehost.de)
             Die kostenlose Nutzung der Quelltexte in eigenen Projekten ist
             bei nicht-kommerziellen Projekten (und deren unentgeltlicher
             Herstellung) bei Nennung der Quelle ausdruecklich gestattet.
 InlineFunc: -
 Konstante : -
 Variable  : oldSource1/oldSource2 (Jeweils letzte ersetzte Grafik)
 SystemVar : -
 ExternVar : -
 Rueckgabe : true
 Anmerkung : oldSource1 & oldSource2 beinhalten die jeweils zuletzt ersetzte Grafik. Diese Variablen
             werden anstelle der Parameter Source1 & Source2 verwendet, falls diese leer sind.
 Beispiele :
  S("Img","i2.gif","","","",0,0) ersetzt die Grafik mit Namen "Img" durch "i2.gif"
   Gibt es mehrere Grafiken mit Namen "Img", so obliegt es dem Browser, welche er ersetzt (schnelle Variante)
  S("Img*","i2.gif","","","",0,0) ersetzt die erste Grafik (unten beginnend), deren Namen mit "Img" anfaengt
  S("Img*","i2.gif","","","",0,-1) ersetzt alle Grafiken (unten beginnend), deren Namen mit "Img" anfaengt
  S("Img","i2.gif","","","",0,-1) ersetzt alle Grafiken (unten beginnend) mit Namen "Img"
  S("Img","i2.gif","","","",-1,-1) ersetzt alle Grafiken (oben beginnend) mit Namen "Img"
  S("Img","i2.gif","Txt","t2.gif","",0,0) ersetzt "Img" durch "i2.gif" und "Txt" durch "t2.gif"
  S("Img","","Txt","","",0,0) ersetzt "Img" und "Txt" durch die Grafiken vor der letzten Auswechslung
  S("","","","","Hinweis",0,0) gibt in der Statuszeile den Text "Hinweis" aus
  S("","","",""," ",0,0) loescht den Text in der Statuszeile
*/

function S(Name1,Source1,Name2,Source2,Text,TopDown,All) {
 if(Text!="") { window.status=Text; }
 if(document.images) { if(document.images[0]) {
   if(Name1!="" && Source1=="" && oldSource1!="") { Source1=oldSource1; }
   if(Name1!="" && Source1!="") {
    SNameBeginn=Name1.substring(0,Name1.indexOf("*"));
    if(SNameBeginn=="" && All==false) {
     oldSource1=document.images[Name1].src;
     document.images[Name1].src=Source1;
    } else {
     if(TopDown) {
      for(i=0;i<document.images.length;i++) {
       if(document.images[i].name==Name1 || (SNameBeginn!="" && document.images[i].name.substring(0,SNameBeginn.length)==SNameBeginn)) {
        oldSource1=document.images[i].src;
        document.images[i].src=Source1;
        if(All==false) { break; }
       }
      }
     } else {
      for(i=document.images.length-1;i>=0;i--) {
       if(document.images[i].name==Name1 || (SNameBeginn!="" && document.images[i].name.substring(0,SNameBeginn.length)==SNameBeginn)) {
        oldSource1=document.images[i].src;
        document.images[i].src=Source1;
        if(All==false) { break; }
       }
      }
     }
    }
   }
   if(Name2!="" && Source2=="" && oldSource2!="") { Source2=oldSource2; }
   if(Name2!="" && Source2!="") {
    SNameBeginn=Name2.substring(0,Name2.indexOf("*"));
    if(SNameBeginn=="" && All==false) {
     oldSource2=document.images[Name2].src;
     document.images[Name2].src=Source2;
    } else {
     if(TopDown) {
      for(i=0;i<document.images.length;i++) {
       if(document.images[i].name==Name2 || (SNameBeginn!="" && document.images[i].name.substring(0,SNameBeginn.length)==SNameBeginn)) {
        oldSource2=document.images[i].src;
        document.images[i].src=Source2;
        if(All==false) { break; }
       }
      }
     } else {
      for(i=document.images.length-1;i>=0;i--) {
       if(document.images[i].name==Name2) {
        if(document.images[i].name==Name2 || (SNameBeginn!="" && document.images[i].name.substring(0,SNameBeginn.length)==SNameBeginn)) {
         oldSource2=document.images[i].src;
         document.images[i].src=Source2;
         if(All==false) { break; }
        }
       }
      }
     }
    }
   }
  }
 }
 return true;

Gruß, Cybaer