nicht angemeldet
(CSS) Mouseover bei CSS-Layern verschoben
Moin,
ich habe eine Navigation aus Grafiken, die sich in einem <div> befinden. Das Script fürs Mouseover habe ich auf dem SELFHTML Beispiel genommen und entsprechend angepasst:
-- JavaScript --
Normal1 = new Image();
Normal1.src = "home_n.png"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "test_navi1.gif"; /* erste Highlight-Grafik */
/* usw. fuer alle weiteren zu benutzenden Grafiken */
function Bildwechsel(Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
----------------
-- CSS ---------
div#navi {
position:absolute;
top:150px;
left:0px;
border:0px;
}
img#nav {
margin-bottom:10px;
}
[...]
----------------
-- HTML --------
<div id="navi">
<a href="../../../index.htm" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)"><img id="nav" src="home_n.png" alt="Home"></a><br>
[weitere Grafiken]
</div>
----------------
Das CSS ist von mir, im Beispiel wurden Tabellen verwendet. Wenn ich jetzt mit der Maus über die Grafik fahre wird die Highligh-Grafik ganz oben-links auf der Seite angezeigt, wenn ich die Maus wieder weg mache ist die normale Grafik an ihrem Platz _und_ da wo die Highlightgrafik war.
Ich denke mein Anliegen ist klar: Wie bekomme ich das hin, dass die Highlight-Grafik am richtigen Platz angezeigt wird?
Danke und Ciao
-
Hallo Lacuna,
<a [...] onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)">
mit dem 1. Parameter den du der Funktion Bildwechsel übergibst wird festgelegt, welches Bild im der Datei ausgtauscht wird - in deinem Fall also das 1. Bild. Wie sieht denn die ganze Seite aus (url angeben)? Ich würde mal vermuten, dass du die 0 durch eine höhere Zahl ersetzen musst.
Wenn ich jetzt mit der Maus über die Grafik fahre wird die Highligh-Grafik ganz oben-links auf der Seite angezeigt,
ist an der Stelle an der die Grafik auftaucht vorher auch ein Bild?
Grüße aus Nürnberg
Tobias--
Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|-
Hi,
<a [...] onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)">
mit dem 1. Parameter den du der Funktion Bildwechsel übergibst wird festgelegt, welches Bild im der Datei ausgtauscht wird - in deinem Fall also das 1. Bild. Wie sieht denn die ganze Seite aus (url angeben)? Ich würde mal vermuten, dass du die 0 durch eine höhere Zahl ersetzen musst.Aber im SELFHTML Beispiel funktioniert es ja. :-/
Wenn ich jetzt mit der Maus über die Grafik fahre wird die Highligh-Grafik ganz oben-links auf der Seite angezeigt,
ist an der Stelle an der die Grafik auftaucht vorher auch ein Bild?Ja, steht direkt im <body> als erstes und hat keine direkten CSS-Formatierungen.
Danke,
Lacuna-
Hallo Lacuna,
Aber im SELFHTML Beispiel funktioniert es ja. :-/
klar - hier soll ja auch das 1. Bild ausgetauscht werden, du willst aber ein Bild weiter unten austauschen, brauchst also eine höhere Zahl (auf die Gefahr hin, dass ich mich wiederhole :-)).
ist an der Stelle an der die Grafik auftaucht vorher auch ein Bild?
Ja, steht direkt im <body> als erstes und hat keine direkten CSS-Formatierungen.ob das Bild über css formatiert wird oder nicht ist egal.
Grüße aus Nürnberg
Tobias--
Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|-
Hi,
Aber im SELFHTML Beispiel funktioniert es ja. :-/
klar - hier soll ja auch das 1. Bild ausgetauscht werden, du willst aber ein Bild weiter unten austauschen, brauchst also eine höhere Zahl (auf die Gefahr hin, dass ich mich wiederhole :-)).das hat geklappt, danke! :-)
Ich habe jetzt folgenden Code:
JavaScript:
Normal2 = new Image();
Normal2.src = "home_n.png"; /* erste Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "test_navi1.gif"; /* erste Highlight-Grafik */
/* usw. fuer alle weiteren zu benutzenden Grafiken */
function Bildwechsel(Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;HTML:
<a href="../../../index.htm" onMouseOver="Bildwechsel(2,Highlight2)" onMouseOut="Bildwechsel(2,Normal2)"><img id="nav" src="home_n.png" alt="Home"></a><br>Das ist aber irgendwie blöde, heißt das, man muss zählen wieviele Grafiken davor auf der Seite eingefügt wurden und dann die entsprechende Zahl setzen? Die anderen Grafiken haben ja nicht mit dem Rollover zu tun, die fristen einfach nur unschuldig ihr Dasein auf der Seite. ;-)
Danke nochmals,
Lacuna-
Hallo Lacuna,
Das ist aber irgendwie blöde, heißt das, man muss zählen wieviele Grafiken davor auf der Seite eingefügt wurden und dann die entsprechende Zahl setzen?
wenn man es so macht, ja - wenn du auf http://selfhtml.teamone.de/javascript/objekte/images.htm schaust, wirst du feststellen, dass es auch über den namen des Bildes geht (über getElementById() oder ...ByTagName() könnte es auch funktionieren).
Grüße aus Nürnberg
Tobias--
Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|
-
-
-
-