ausgetauschtes Hoverbild mit Link versehen, wie?

[-mephisto-]

Ich weiß, ich nerve wahrscheinlich aber ich bekomme es einfach nicht hin...

Ich habe es so versucht wie ich es bei den anderen Bildern gemacht habe, aber irgendwie klappt es nicht. Was mache ich bloß falsch? Wie muß ich es machen damit es funktioniert

Die ausgetauschten Hoverbilder vom Wappen in der Mitte sollen gleichzeitig als Link dienen.
Bei der Navigation unten habe ich es hinbekommen, hier aber nicht...

Hier noch der Link: http://oppelt.loftgroup.de

Ich danke den genialen Köpfen hier schon wieder im Voraus!

 

[Maik]

Hi,

dazu fehlt dann wohl im Markup das a-Element, das einen Link auszeichnet.

 

[-mephisto-]

Ich hatte es mit <a href="xxx.html" id="xxx"><i>xxx</i></a> versucht

aber irgendwie funktionierte es nicht...

 

[Maik]

Hi,

die getauschten Hintergrundbilder über die Selektoren div#wappen_ol:hover, div#wappen_or:hover, div#wappen_ul:hover, div#wappen_ur:hover lassen sich in dieser Form nicht verlinken. Hierfür wirst du in den DIVs jeweils einen Link einbetten müssen, um dann über sie das Hintergrundbild zu tauschen, und sie als Verweis zu einem Dokument verwenden zu können.

Ansonsten müsstest du auf Javascript und location.href zurückgreifen, um beim Anklicken der Elemente ein verlinktes Dokument aufzurufen:

<div id="wappen_ol" onclick="location.href='wappen.html'"></div>
<div id="wappen_or" onclick="location.href='extras.html'"></div>
<div id="wappen_ul" onclick="location.href='gaestebuch.html'"></div>
<div id="wappen_ur" onclick="location.href='impressum.html'"></div>

 

[-mephisto-]

Hi,

die getauschten Hintergrundbilder über die Selektoren div#wappen_ol:hover, div#wappen_or:hover, div#wappen_ul:hover, div#wappen_ur:hover lassen sich in dieser Form nicht verlinken. Hierfür wirst du in den DIVs jeweils einen Link einbetten müssen, um dann über sie das Hintergrundbild zu tauschen, und sie als Verweis zu einem Dokument verwenden zu können. ...

Das versteh ich nicht so ganz. Kannst Du eventuell ein Beispiel posten? Ich verstehe gerade nur "böhmische Wälder"

Auf Javascript wollte ich eigentlich verzichten

 

[Maik]

Also nochmal: Wenn du einen Verweis (Link) setzen willst, dann musst du dies entweder mit dem dafür vorgesehenen a-Element umsetzen, das dann in den jeweiligen DIVs des Wappens eingebunden wird, oder eben mittels JS.

 

[-mephisto-]

Also nochmal: Wenn du einen Verweis (Link) setzen willst, dann musst du dies entweder mit dem dafür vorgesehenen a-Element umsetzen, das dann in den jeweiligen DIVs des Wappens eingebunden wird, oder eben mittels JS.

Ich weiß das ich es mithilfe eines "a" Elementes machen muß! Habe ich auch versucht.
Ich bekomme es nur nicht hin. Bei allem was ich diesbezüglich versucht hatte zerriß es mir den Seitenaufbau!
Deshalb fragte ich nach Einzelheiten (wäre cool wenn mir jemand den passenden Codeschnipsel sagen könnte)
Ansonsten gebe ich auf - und stampfe das Projekt ein. Ich bekomm es leider einfach nicht hin...

 

[Maik]

Es geht natürlich noch einfacher, indem die vier DIVs direkt durch einen Link ersetzt werden:

<div id="wappen_hintergrund"></div>

<a id="wappen_ol" href="#"></a>
<a id="wappen_or" href="#"></a>
<a id="wappen_ul" href="#"></a>
<a id="wappen_ur" href="#"></a>

und im Stylesheet wird in den bestehenden Regeln die display:block-Eigenschaft hinzugefügt, damit das Inline-Element "Block-Level-Charakteristika" erhält und die Breiten-/Höheneigenschaften annimmt:

#wappen_ol                                        {
                                                        position:absolute;
                                                        top:237px;
                                                        left:426px;
                                                        height:126px;
                                                        width:86px;
                                                        background-image:url(images_ahnenforschung/wappen_ol.jpg);
                                                        background-repeat:no-repeat;
                                                        display:block;
                                                        }

#wappen_or                                        {
                                                        position:absolute;
                                                        top:237px;
                                                        left:512px;
                                                        height:126px;
                                                        width:86px;
                                                        background-image:url(images_ahnenforschung/wappen_or.jpg);
                                                        background-repeat:no-repeat;
                                                        display:block;
                                                        }

#wappen_ul                                        {
                                                        position:absolute;
                                                        top:363px;
                                                        left:426px;
                                                        height:126px;
                                                        width:86px;
                                                        background-image:url(images_ahnenforschung/wappen_ul.jpg);
                                                        background-repeat:no-repeat;
                                                        display:block;
                                                        }

#wappen_ur                                        {
                                                        position:absolute;
                                                        top:363px;
                                                        left:512px;
                                                        height:126px;
                                                        width:86px;
                                                        background-image:url(images_ahnenforschung/wappen_ur.jpg);
                                                        background-repeat:no-repeat;
                                                        display:block;
                                                        }
/* Ende: Positionierung der einzelnen Links */

Netter Nebeneffekt: Der Hintergrundbildtausch funktioniert nun auch im IE6 (und älter) ;-)