nicht angemeldet
onmouseover an Punkt A ausgelöst, aber an Punk B angezeigt
0 
Struppi
onmouseover an Punkt A ausgelöst, aber an Punk B angezeigt
Der MartinHi,
ich habe vor in einem Hintergrundbild, kleine Bilder zu positionieren, welche als Menüpunkte dienen. Dann soll, wenn der Besucher mit der Maus über einen Menüpunkt geht (OnMouseOver), an einer (ca. 300 px entfernten) anderen Stelle eine Grafik/Text angezeigt werden und beim Verlassen des Menüpunktes wieder verschwinden (OnMouseOut).
Die Grafik soll aber unabhängig davon, welchen der Menüpunkte ich überfahre, immer am selben Ort angezeigt werden.
Ich habe schon ein JS gefunden, womit ich auf einer Image-Map beim Überfahren gewisser Areale, eine Zeile in einer Tabelle hervorhaben kann, aber dann habe ich die Grafik allerdings nicht mehr an der selben Stelle :(
Gruß Daniel
-
ich habe vor in einem Hintergrundbild, kleine Bilder zu positionieren, welche als Menüpunkte dienen. Dann soll, wenn der Besucher mit der Maus über einen Menüpunkt geht (OnMouseOver), an einer (ca. 300 px entfernten) anderen Stelle eine Grafik/Text angezeigt werden und beim Verlassen des Menüpunktes wieder verschwinden (OnMouseOut).
Die Grafik soll aber unabhängig davon, welchen der Menüpunkte ich überfahre, immer am selben Ort angezeigt werden.Das läßt sich realativ einfach mit CSS umsetzen.
.over a:hover{ border:none; /* Bug fix für IE */ } .over a span{ display: none; } .over a:hover span{ position:absolute; left:180px; width: 200px; display: block; margin-top:-1em; padding: 5px; color: #000; background-color:#fff; border:1px solid black; text-decoration: none; }<div class="over"> <a href="#">Link<span>Der Text und das Bild</span></a> <a href="#">Link<span>Der Text und das Bild</span></a> <a href="#">Link<span>Der Text und das Bild</span></a> </div>Struppi.
-
Das läßt sich realativ einfach mit CSS umsetzen.
.over a:hover{ border:none; /* Bug fix für IE */ } .over a span{ display: none; } .over a:hover span{ position:absolute; left:180px; width: 200px; display: block; margin-top:-1em; padding: 5px; color: #000; background-color:#fff; border:1px solid black; text-decoration: none; }<div class="over"> <a href="#">Link<span>Der Text und das Bild</span></a> <a href="#">Link<span>Der Text und das Bild</span></a> <a href="#">Link<span>Der Text und das Bild</span></a> </div>»»Struppi.
Super!
Vielen herzlichen Dank!
Wusste garnicht, dass sowas auch mit CSS geht, aber gefällt mir sehr, da das dann niemand deaktiviert haben kann ;)-
Das läßt sich realativ einfach mit CSS umsetzen.
.over a:hover{ border:none; /* Bug fix für IE */ }
.over a span{ display: none; }
.over a:hover span{
position:absolute;
left:180px;
width: 200px;
display: block;
margin-top:-1em;
padding: 5px;
color: #000;
background-color:#fff;
border:1px solid black;
text-decoration: none;
}> ~~~html <div class="over"> > <a href="#">Link<span>Der Text und das Bild</span></a> > <a href="#">Link<span>Der Text und das Bild</span></a> > <a href="#">Link<span>Der Text und das Bild</span></a> > </div> >»»Struppi.
Habe gerade per Zufall bemerkt, dass wenn ich zwischen den Grafiken für die Menüpunkten (ca. dort, wo die Bilder beim hover erscheinen) mit der Maus durchfahre, seltsamer Weise die Bilder, die ich mit dem hover eingebunden habe, plötzlich ungewollt erscheinen. Ich kann mir das nicht erklären, da das eigentlich nur geschen sollte, wenn ich den Link überfahre, der ja nur auf dem Menüpunkt liegt :(
Die Menüpunkte sind mit CSS positioniert auf einer Hintergrundgrafik
-
-
*sigh*
Nun kommt das nächste Problem in die Quere :(
Da ich den Inhalt in einer Tabelle darstelle (Tabellenbreite 100%, linke Spalte 50%, Inhalt, rechte Spalte 50%) verschiebt sich die Position des Bildes, wenn ich die Größe des Browserfensters ändere. Die Angabe "absolute" heißt doch: Bezugspunkt ist das nächsthöhere Vorfahrenselement (in meinem Fall der <body>), das nicht als "static" gilt, oder?Gibt es da eine Möglichkeit ein "Pseudoelement" zu erzeugen, mit dem ich dann bezüglich meines eingemitteten Inhaltes irgendwie positionieren kann?
Gruß Daniel
-
Hallo,
Da ich den Inhalt in einer Tabelle darstelle ...
*räusper*
verschiebt sich die Position des Bildes, wenn ich die Größe des Browserfensters ändere. Die Angabe "absolute" heißt doch: Bezugspunkt ist das nächsthöhere Vorfahrenselement (in meinem Fall der <body>), das nicht als "static" gilt, oder?
Im Prinzip ja - das ist dann aber auch nicht unbedingt body, sondern meist das Browserfenster selbst (oft als Viewport bezeichnet), wenn du in der Elementhierarchie dazwischen keine positionierten Elemente hast.
Wobei das direkte Vorfahrenelement ja erstmal das td ist, oder nicht?Gibt es da eine Möglichkeit ein "Pseudoelement" zu erzeugen, mit dem ich dann bezüglich meines eingemitteten Inhaltes irgendwie positionieren kann?
Schaffe einen festen Bezug, indem du eines der Vorfahrenelemente positionierst. Um das Gesamtgefüge nicht zu stören, bietet sich position:relative an, ohne eine Verschiebung anzugeben.
Ich meine aber mich zu erinnern, dass einige Browser übellaunig reagieren, wenn man einem td-Element position:relative gibt; aber Struppis Beispielcode enthält ja schon ein umschließendes div-Element, das prima dafür herhalten könnte.Ciao,
Martin--
Fettflecke werden wieder wie neu, wenn man sie regelmäßig mit etwas Butter einschmiert.
-
-