✔ Probleme mit der Positionierung von OnMouse Hover Divs

Status
Nicht offen für weitere Antworten.
-mephisto-

-mephisto-

Mitglied
Hallo,
ich hoffe man kann mir hier weiterhelfen. Ich bin gerade eine Homepage am basteln, und der Großteil steht soweit (dank diverser Codeschnipsel aus dem WWW).
Jetzt habe ich aber ein Problem bei der Umsetzung eines Spezialwunsches (bin Laie was Html und Co angeht)

Ich versuche es mal anhand von Grafiken zu erklären

Ein Wappenschild ist in 4 Teile geteilt (geviertelt) Wenn man z.B. mit dem Mauszeiger oben rechts auf das Viertel zeigst (siehe Bild, kann das Bild aber irgendwie nicht direkt einfügen?!)
forum1og1.jpg


...soll das Viertel ausgetauscht werden mit diesem Bild
wappenobenrechtspv7.gif


Die anderen Viertel sollen ebenfalls mit entsprechenden Grafiken ausgetauscht werden.
Wie bekomme ich es hin? Hat jemand eine Ahnung? Hatte mich schon daran probiert, konnte die Austauschgrafiken aber nie so positionieren, dass sie 1 zu 1 ausgetauscht werden.
Und die unteren Viertel rutschten "hinter" die Navigationsleiste. :mad:

Wenn sich jemand die bisherige Seite anschauen will... http://oppelt.loftgroup.de
die .css ist unter diesem Link zu sehen: http://oppelt.loftgroup.de/test.css

Wenn ihr Fehler im Quelltext oder in der CSS seht, bitte nicht gleich hauen - bin wie gesagt Anfänger... :D

P.S. Kann man keine Bilder direkt mit einbinden oder bin ich zu blöd?
 
Hi und herzlich Willkommen im Forum :)

Falls du auf diese Zeilen im Stylesheet hinaus möchtest:

Code: 
#h_wappen_ol:hover			{background-image:url(images_ahnenforschung/wappen_obenlinks.gif);}

#h_wappen_or:hover			{background-image:url(images_ahnenforschung/wappen_obenrechts.gif);}
sei darauf hingewiesen, dass im HTML-Code keine gleichnamigen IDs #h_wappen_ol und #h_wappen_or existieren, sondern #wappen_ol und #wappen_or, und daher diese Hintergrundbilder auch nicht getauscht werden.

Bilder kannst du als Anhang in deinem Beitrag hochladen.
 
<div id="wappen_ol"></div>
<div id="wappen_or"></div>
<div id="wappen_ul"></div>
<div id="wappen_ur"></div>

sollen quasi beim drüberfahren ausgetauscht werden gegen

http://oppelt.loftgroup.de/images_ahnenforschung/wappen_obenlinks.gif
http://oppelt.loftgroup.de/images_ahnenforschung/wappen_obenrechts.gif
http://oppelt.loftgroup.de/images_ahnenforschung/wappen_untenlinks.gif
http://oppelt.loftgroup.de/images_ahnenforschung/wappen_untenrechts.gif

Der von dir aufgeführte Teil des CSS stammt noch von meinem vergeblichen Versuch das Ganze umzusetzen... :suspekt:

Habe mir schon das Hirn zermartert - aber vergeblich. Bin für Hilfe echt dankbar...!
 
Dann versuch's mal hiermit:

Code: 
#wappen_ol:hover                        {background-image:url(images_ahnenforschung/wappen_obenlinks.gif);}
#wappen_or:hover                        {background-image:url(images_ahnenforschung/wappen_obenrechts.gif);}
#wappen_ul:hover                        {background-image:url(images_ahnenforschung/wappen_untenlinks.gif);}
#wappen_ur:hover                        {background-image:url(images_ahnenforschung/wappen_untenrechts.gif);}
Und noch ein Hinweis: Die Vorgängerversionen des IE7 unterstützen die allgemeine :hover-Pseudoklasse für die HTML-Elemente nicht, sondern wenden sie ausschliesslich auf die Links an -> a:hover.
 
Das es sooo einfach ist - tja typisch Anfänger halt :rolleyes:

Was den IE angeht, das bisher von mir eingesetzte Script funktioniert (habe es mit IE6 getestet)

Vielen Dank für die schnelle Hilfe...!
 
Hmm...
ich habe jetzt auch gemerkt, daß irgendwas nicht stimmt. Auch im Firefox sieht es komisch aus. :mad: :confused:
Die Transparenz der getauschten Gifs ist irgendwie nicht vorhanden. Kann man das irgendwie beheben?:confused::confused:
Habe das Ganze mal hochgeladen um zu zeigen wie es jetzt aussieht (http://oppelt.loftgroup.de)

Durch das Folgeproblem habe ich das Ganze mal wieder als nicht gelöst markiert (wenn es ok ist?)
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück