Mehrerer Bilder bei MouseOver auswechseln
ravetti
- javascript
Guten Tag,
es sollen mehrere Bilder ausgetauscht werden:
<div class="NaviEbene2" id="navi1">
<a href="mittag.htm"><img src="../../grafik/Navi/Ebene2/Mittagstisch.gif" name="mittag" width="78" height="11" border="0" class="imgebene2"></a>
</div>
<div id="pfeil1">
<img src="../../grafik/Navi/Ebene2/pfeil.gif" name="pfeil1">
</div>
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.
Hat jemand von Euch eine Idee, wie man das am besten macht? Da es hiervon noch 3 weitere Links gibt wäre ein Array hilfreich.
Vielen Dank für sachdienliche Hinweise!
Ravetti
Hallo ravetti,
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.
Gib halt den beiden Bildern denselben Namen und realisiere den Wechsel über document.getElementsByName().
http://selfhtml.teamone.de/javascript/objekte/document.htm#get_elements_by_name
Gruß
Kurt
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