nicht angemeldet
Unsichtbares Div und MouseOver
Hallo ihr da draußen,
ich verzweifel hier grad ein wenig denn ich habe ein ganz blödes Problem:
Ich bastel grade eine Website bei welcher der Hintergrund aus einem Bild besteht (nicht als background sodnern als IMG !!!! ich mag sowas nicht, aber es wurde so gewünscht) nun sollen an gewissen stellen Bilder aufploppen wenn man mit der Maus darüber fährt.
Kein Problem, Java Funktion geschrieben die das macht, Bild in ein "unsichtbares" div (also ohne farbangabe) gepackt, dieses mit mouseover und mouseout versehen, getestet GEHT.
Supi dacht ich mir, baute es ein und ... wie zu erwarten (ich hasse Murphy) gehts net. Das tolle ist, es geht nur nicht, wenn ich das "unsichtbare" div Element auf einem Bild Positioniere. Ist kein Bild im Hintergrund gehts.
Zum Div selber:
Höhe und Breite sind angegeben, overflow steht auf hidden, position auf absolute, und das Bild was "aufploppen" soll ist auserhalb des sichtbaren Bereichs innerhalb des "unsichtbaren" divs Positioniert (Fährt dann von unten ein wenn man über das Div hovert).
ach was solls hier der Code vom Div:
#popUp{
position:absolute;
height:50px;
width:50px;
overflow:hidden;
z-index:1;
}
Der Z-Indexes des Bildes im Hintergrund ist 0!
Sachen wie: Noch ein Div um das Div bauen und dieses mit dem Mouseover versehen funktionieren nicht.
Ich entschuldige mich für die Rechtschreibfehler, ich schreibe besser wenn ich Code, aber normaler Text *pffff* ;)
Danke schonmal für eure Hilfe!!!!!
Achso hier im Forum hatte ich nix gefunden bevor sich jetzt wieder jemand aufregt, aber vielleicht waren auch meine Suchparameter nicht die richtigen.
mfg der Heakl
-
Hallo,
der Ansatz:
Body mit Hintergrundbild versehen (document.body im Style belegen).
Body selbst bekommt dann Kinder, also DIV's, die wie gewünscht über dem Hintergrundbild gelegt sind (Layer ber zIndex bzw. position:absolute). Da die Div's eigenständige Container sind, können diese eigenständig verwaltet werden (Inhalt, Farbe, Event).Der Ersatz für Body ohne Hintergrundbild: Einen DIV erzeugen, der genau in der Dimension von Höhe und Breite des Client-Fensters ist.
(position:absolute und top und left auf 0px). Diesen DIV dann mit Hintergrundbild versorgen, aber auch dessen automatische Anpassung bei Fensterdimensionsänderung programmieren !Transparenter DIV geht auch mit Inhalt des DIV als transparentes GIF mit 1x1 Pixel Dimension.
Gruss Tom.
-
Hmm danke aber nicht was ich suche oder ich habs nicht verstanden, ok ich stell das ganze hier mal dar:
<body>
<!-- Div zum Positionieren der Elemente unabhängig der Auflösung des Benutzers -->
<div id="positionDiv">
<!-- Des Pudels Kern das Böse Bild im Hintergrund -->
<img src="hintergrundbild.jpg"><!-- Das Div welches beim mouseover die Funktion zum einfahren aufruft-->
<div id="popUp" onmouseover="funktionsAufruf()">
<!-- Das zweite Bild das eingefahren wird -->
<img src="anzuzeigendesBild.jpg">
</div>
</div>Das ist schon alles, also im groben, die Funktion bilde ich hier mal nicht ab, weil die wie gesagt Funktioniert solange kein anderes Bild im Hintergrund ist.
Was mir grad einfällt wäre, das ich, anstatt das Bild als IMG einzubinden ich es als background-image innerhalb des Positionierungs Divs verwenden könnte, nur mag ich das nicht (Fragt garnicht erst ... seeeeehr schlechte Erfahrungen damit bei verschiedenen Browsern ..... *heul*!)
Also für weitere Ideen bin ich immer offen aber ich möchte das Bild halt nciht als Body Background oder sonst irgendwas einbinden, da mit so eine menge Kontrolle über meine Objekte verloren geht, und wenn ich eins nicht leiden kann, dann sind das Objekte die machen was sie wollen ;)
Danke und mfg der Heakl
-
Hallo,
Firefox und Netscape nutzen Gecko, der sich an Standards hält, die auch von Opera genutzt werden dürften.
http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
Für den Internet Explorer gibt es Infos auf www.microsoft.com (dort suchen nach DHTML reference) oder auf meiner Webseite www.twseiten.de.
Für Positionierungen sind DIV's ideale Container.
Für das IMG aus deinem Beispiel geht auch genau 1 IMG, das bei
onmouseover mit dem gewünschten Bild belegt wird im .src, und bei
onmouseout im .src mit eiem transparentem GIF 1x1 Pixel belegt wird,
so dass der Hintergrund sichtbar wird (transparente GIF wird automatisch auf Height und Width aufgezoomt aber eben transparent).Alternativ geht auch die
Sichtbarkeit des Bildes im Style abschalten, aber der Browser kann
dann das Layout neu rendern, da das Bild aus dem Layout entfern wird - bei transparentem GIF nicht, da unsichtbarer Platzhalter.Gruss Tom.
-
-