hover Bild verlineken klappt nicht

[bernie_r]

Servus.
Ich bin Bernie und komme aus München. Das ist mein 1. post in diesem Forum. Ich lerne gerade html5 und CSS3, arbeite viele Tutorials durch und komme auch gut weiter. Doch bei folgendem Problem finde ich keine Lösung:

Auf der Webseite soll ein Bild erscheinen. Wenn man mit der Maus drüber fährt, soll das Bild durch ein anderes ersetzt werden (ein helleres). Wenn man auf dieses Bild klickt, soll man auf eine andere Webseite gelangen.

Ich kann das Bild auf der Webseite anzeigen, wenn ich mit der Maus drübergehe, wird es auch durch das andere Bild ersetzt. Nur die Verlinkung krieg ich nicht hin.

Ursache ist wahrscheinlich, dass man Hintergrundbilder gar nicht verlinken kann. Ich finde aber keinen anderen Weg, Bilder so einzufügen, dass o.g. Effekt entsteht. Kann mir jemand erklären, wie das funktioniert? Hier die Codestellen aus der html und der css-Datei:

<div id="baum">
    <p id="baum"> <a href="firmen.html">Zur Firmenseite</a></p>
</div>

#baum{
    width:750px;
    height:231px;
    background-image:url(pics/Baum_normal238x231.gif);
    background-repeat:no-repeat;
    background-position:center;
}

#baum:hover{
    width:750px;
    height:231px;
    background-image:url(pics/Baum_hilight238x231.gif);
    background-repeat:no-repeat;
    background-position:center;
}

Danke

 

[jakestyler]

Vielleicht mal so probieren?

<a href="firmen.html"> <p id="baum"> Zur Firmenseite</p></a>

 

[Tronjer]

Der Fehler in deinem Code ist die doppelte Vergabe von #baum.

Hintergrundbilder werden nicht verlinkt, sondern nur im CSS deklariert. Willst du hingegen <src>-Images tauschen, benötigst du JavaScript.

 

[Tronjer]

Vielleicht mal so probieren?

<a href="firmen.html"> <p id="baum"> Zur Firmenseite</p></a>

Nein. Blockelement im Inline-Element ist falsch.

 

[Tronjer]

Der Fehler in deinem Code ist die doppelte Vergabe von #baum.

Hintergrundbilder werden nicht verlinkt, sondern nur im CSS deklariert. Willst du hingegen <src>-Images tauschen, benötigst du JavaScript.

Oops, falsch gelesen: Du kannst auf das <p> verzichten und stattdessen dem <a> ein display: block mit width und height geben.

 

[bernie_r]

Du kannst auf das <p> verzichten und stattdessen dem <a> ein display: block mit width und height geben.

Perfekt, so klappt's. Vielen Dank für die prompte Hilfe!