nicht angemeldet
Mehrere Layer verbergen mit einen Mouseover?
Hallo,
ich google mir schon seit Stunden die Finger wund um die sicherlich simple Lösung für mein Problem zu finden, aber es findet sich eben nichts, bzw. nur immer viel zu komplizierte Lösungen. Das Problem: ich habe auf einer Seite 8 kleine Icons in div-tags und möchte nun, dass 7 davon verschwinden, wenn ich mit der Maus auf eines davon zeige. Ich habe ein Script, was aber immer nur immer ein Layer einzeln anspricht.
Hier der Code:
function toggleVisibility(id, NNtype, IEtype, WC3type) { if (document.getElementById) { eval("document.getElementById(id).style.visibility = "" + WC3type + """); } else { if (document.layers) { document.layers[id].visibility = NNtype; } else { if (document.all) { eval("document.all." + id + ".style.visibility = "" + IEtype + """); } } } } //--> </script>
</head> <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
<div id="MAR"> <a href="MAR-toolbox.html" target="Toolbox" onMouseover="toggleVisibility('KIR','hidden','hidden','hidden')" onmouseout="toggleVisibility('KIR','show','viible','visible')"><img src="images/MAR.jpg" alt="" width="60" height="60" border="0"></a></div>
<div id="KIR"> <img src="images/KIR.jpg" alt="" width="60" height="60" border="0"></div> <div id="BSV"> <img src="images/BSV.jpg" alt="" width="60" height="60" border="0"></div> <div id="EVE"> <img src="images/EVE.jpg" alt="" width="60" height="60" border="0"></div> <div id="BLU"> <img src="images/BLU.jpg" alt="" width="60" height="59" border="0"></div>
<div id="MON"> <img src="images/MON.jpg" alt="" width="60" height="60" border="0"></div> <div id="WAL"> <img src="images/WAL.jpg" alt="" width="60" height="60" border="0"></div> <div id="ZWK"> <img src="images/ZWK.jpg" alt="" width="60" height="60" border="0"></div> </body>
Versteht jemand das Problem? Und weiss dann noch Rat?
Das wäre doll...
leajulia, überfordert....
-
Hallo,
function mach(a){ b=(a) ? 'block' : 'none' document.getElementById('huhu').style.display=b }</script>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;<div id="MAR">
<a href="MAR-toolbox.html" target="Toolbox" onMouseover="mach(0)" onmouseout="mach(1)"><img
src="images/MAR.jpg" alt="" width="60" height="60" border="0"></a></div><div id="huhu">
<div id="KIR">
<img src="images/KIR.jpg" alt="" width="60" height="60" border="0"></div>
<div id="BSV">
<img src="images/BSV.jpg" alt="" width="60" height="60" border="0"></div>
<div id="EVE">
<img src="images/EVE.jpg" alt="" width="60" height="60" border="0"></div>
<div id="BLU">
<img src="images/BLU.jpg" alt="" width="60" height="59" border="0"></div><div id="MON">
<img src="images/MON.jpg" alt="" width="60" height="60" border="0"></div>
<div id="WAL">
<img src="images/WAL.jpg" alt="" width="60" height="60" border="0"></div>
<div id="ZWK">
<img src="images/ZWK.jpg" alt="" width="60" height="60" border="0"></div></div>
</body>
leajulia, überfordert....LinkTipp: http://de.selfhtml.org/javascript/index.htm
Gruß aus Berlin!
eddi -
Hi,
Das Problem: ich habe auf einer Seite 8 kleine Icons in div-tags
warum das? Du kannst die image-tags mit css direkt formatieren.
Ich habe ein Script, was [...]
mit veralteter all/layer-syntax rumoperiert und unnötigerweise das rechenintensive eval benutzt.
Eine Moeglichkeit: erzeuge eine Collection der betreffenden Tags, loope durch diese Collection, filtere sie z.B. mit einem bestimmten class-Attribut und verfahre mit dem Rest der tags wie gewuenscht. Ein kleines Testscript zur Veranschaulichung, mit p's anstelle von image-tags:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script type="text/javascript">
var flag = true;
function dpl(el, tag, classname) {
if (!document.getElementById) return;
var ref = document.getElementById(el);
var p = ref.getElementsByTagName(tag);
for (var i = 0; i < p.length; i++) {
if (p[i].className != classname) continue;
p[i].style.display = flag? "none" : "";
}
flag = flag? false : true;
}
</script>
</head>
<body>
<div id="mydiv">
<p class="myclass">x</p>
<p class="myclass">y</p>
<p class="myclass">z</p>
<p class="myclass">1</p>
<p class="otherclass">2</p>
<p onclick="dpl('mydiv', 'p', 'myclass')">click & verstecke</p>
</div>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo zurück & vielen Dank für die Nachhilfe. Offenbar habe ich aber mein Problem falsch beschrieben: ich habe also 8 Icons, jedes Icon öffnet eine Projektpräsentation in einem anderen Frame. Ich möchte, dass, wenn ich mit der Maus über ein Icon fahre, die anderen verschwinden und in ebendem Frame das erste Bild der Präsentation zu sehen ist.
Ich bräuchte also für JEDES Icon ein Mouseover, das alle anderen "ausblendet"- nicht nur für eins.
So wie ich dein (wirklich beeindruckendes) Beispiel verstehe, kann ich nur einmal festlegen, welche Icons verschwinden sollen.
Oder doch nicht? Puhh, da merke ich doch die Vier, die ich in Mathe immer hatte...
grüsse aus München, LeaJulia
Hi,
Das Problem: ich habe auf einer Seite 8 kleine Icons in div-tags warum das? Du kannst die image-tags mit css direkt formatieren.
Ich habe ein Script, was [...] mit veralteter all/layer-syntax rumoperiert und unnötigerweise das rechenintensive eval benutzt.
Eine Moeglichkeit: erzeuge eine Collection der betreffenden Tags, loope durch diese Collection, filtere sie z.B. mit einem bestimmten class-Attribut und verfahre mit dem Rest der tags wie gewuenscht. Ein kleines Testscript zur Veranschaulichung, mit p's anstelle von image-tags:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <script type="text/javascript"> var flag = true; function dpl(el, tag, classname) { if (!document.getElementById) return; var ref = document.getElementById(el); var p = ref.getElementsByTagName(tag); for (var i = 0; i < p.length; i++) { if (p[i].className != classname) continue; p[i].style.display = flag? "none" : ""; } flag = flag? false : true; } </script> </head> <body> <div id="mydiv"> <p class="myclass">x</p> <p class="myclass">y</p> <p class="myclass">z</p> <p class="myclass">1</p> <p class="otherclass">2</p> <p onclick="dpl('mydiv', 'p', 'myclass')">click & verstecke</p> </div> </body> </html>
Gruesse, Joachim
-
Hi,
Ich möchte, dass, wenn ich mit der Maus über ein Icon fahre, die anderen verschwinden und in ebendem Frame das erste Bild der Präsentation zu sehen ist.
Zunachst mal schau Dir bitte ab, wie hier zitiert wird, dass ist sonst muehsam zu lesen.
Ansonsten kannst Du das Script ja abaendern. Den Aufruf packst Du in die jeweiligen icons, übergibst der Funktion zusaetzlich "this" (ohne Anführungszeichen) als Verweis auf das aktuelle Image, loopst durch die Image-Collection und versteckst alle ausser "Loop trifft auf this". Die Filterung nach className kannst Du Dir natuerlich schenken.
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-