Navigation mit hover?

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich möchte, dass es beim überfahren meiner navigation eine andere Grafik anzeigt.

Hierzu habe ich folgenden Code in meine Siete eingebaut:

<a id="startlink" a href="/" ><img src="img/topnavi/startseite.gif" alt="Startseite" /></a>

und folgender Code steht in meiner stle.css

#startlink.hover{background-image("img/topnavi/startseite_o.gif")}

Aber in meiner Navigaton auf www.rucksack-center.de wird beim überfahren der Grafik trotzdem kein anderes Bild angezeigt :frowning:

Gruß,
Andreas

2

das muss auch :hover anstatt .hover heißen.

Nils aka XraYSoLo

3

Außerdem funzt das nich, weil dein >Hintergrund-Bild< dann hinter dem eigentlichen Bild liegt. Machs lieber mit JavaScript:

<a href="index.htm"><img src="./img/topnavi/startseite.gif" onmouseover="this.src='./img/topnavi/startseite_o.gif';" onmouseout="this.src='./img/topnavi/startseite.gif';" /></a>
4

meinem vorredner muss ich wiedersprechen zu der vorgeschlagenen lösung
dein ansatz ist schon richtig
hier ein beispiel:

[php]
/dein standardbild/
a.startlink {
background-image: url(image.gif);
background-repeat: no-repeat;
}

/dein hoverdbild/
a.startlink:hover {
background-image: url(image2.gif);
background-repeat: no-repeat;
}[/php]

5

Tut mir leid, ich widerspreche dir matcho. Wenn du ein Bild hast und dahinter ein Hintergrundbild, wird das Hintergrundbild nicht angezeigt.

Natürlich geht aus auch per CSS und background-image; allerdings muss man statt dem Bild im eigentlichen Link nur   benutzen und den Link noch als display:block; height:XXpx; width:XXpx; definieren, ansonsten bringt es auch nichts. :lol:

6

mir ist doch klar, dass ein hintergrundbild hinter einem normalen bild nix bringt
daher gleich komplett mit background-image realisieren

ich bin ehrlich gesagt kein fan von js, da man bei deaktivierung von js rein gar nix von den netten spielereien hat

7

Ist bei Bild-Navigationen leider das Beste, weil der IE mit Block-Elementen so schöne Schwierigkeiten hat, die besonders für, ich sage mal „Anfänger“, sehr schwer zu bewältigen sind.

MOZILLA, MOZILLA!!!

8

Funktioniert das nun mit diesem Code?

[CODE]/dein standardbild/
a.startlink {
background-image: url(image.gif);
background-repeat: no-repeat;

/dein hoverdbild/
a.startlink:hover {
background-image: url(image2.gif);
background-repeat: no-repeat;[/CODE]

Wie muss dann der Code in der Navi heißen?
So wirds ja nicht stimmen oder?

<a id="startlink" a href="/" ><img src="img/topnavi/startseite.gif" alt="Startseite" /></a>
9

[html]Startseite[/html]

wird zu

[html] [/html]

Außerdem fehlen im CSS noch die display- sowie die Maß-angaben und 2 Klammern =P

[code]/dein standardbild/
a.startlink {
background-image: url(image.gif);
background-repeat: no-repeat;

display:block;
width:XXpx;
height:XXpx;

}

/dein hoverdbild/
a.startlink:hover {
background-image: url(image2.gif);
background-repeat: no-repeat;

display:block;
width:XXpx;
height:XXpx;

}[/code]

10

HTML-Code:
[HTML]

[/HTML]

CSS Code:

.bild1 {
background-image: url(pfadzumbild);
}
.bild1:hover {
background-image: url(pfad zum hoverbild);
}

Das müsste klappen. habs aber noch nicht getestet.

dl

11

Nun habe ich folgenden Code eingebaut:

<div align="justify"><a href="/"><img height="18" width="77" class="startlink"></img></a>

Das Ergebnis seht ihr auf folgender Seite: www.rucksack-center.de
Die Grafik wird jetzt schon richtig angezeigt. Das mit dem hover stimmt auch. Aber warum ist dort si ein kleines Bild in der Grafik und ein weißer Rand um den Button?

12

Ich kann keine Hover sehen???

13

damit du beim hover keine ladezeiten hast am besten beide grafiken in eine datei, und dann mit background-position hinschieben

14

minnimammut, ist zwar nen super tipp, aber nen anfänger sollte vllt. erstmal die einfache variante verstehen und einsetzen können :wink:

btw: grafiken können auch mit verstecken divs vorgeladen werden :mrgreen:

15

aber warum kannst du kein hover sehen?

ist an den codes was falsch?