Bild per Hover austauschen

[htmlE46]

Hallo,
ich habe es so gemacht, das ich in einem Fotoprogramm jeweils 2 Bilder für ein Link in der Navileiste gemacht habe. Also das eine Unterscheidet sich vom anderen damit man den HoverEffekt sieht ;)

Nun habe ich es gemacht, das Standadmäßig das eine Bild vorhanden ist, und das andere durch den Hovereffekt ersetzt werden soll.
Jedoch funktioniert es folgendermaßen nicht, das HoverBild wird nicht angezeigt.

<div id="navi">
<ul id="Navi>
 <li><a class="home" href="#index"><img src="bildOhneHover" alt="home" border="0"></a></li>

a.home:hover{image:url('mitHover');}

 

[assmaje]

In diesem Beispiel sind die beiden Bilder 64px groß.

#beispiel {
     background:url("section/demo.png") 0 0 no-repeat;
     width:64px;
     height:64px;
     display:block;
     padding:0px;
     border-width:0px;
     font-size:0px;
     text-decoration:none;
}

#beispiel:hover { 
     background-position:-64px 0;
}

Der dazugehörige Link sieht so aus:

<a id="beispiel" href="..."></a>

 

[Efchen]

Natürlich geht das nicht so.
Eine CSS-Eigenschaft "image" gibt es nicht.
Du musst dem Link, also dem a-Tag das Image als Hintergrundgrafik per CSS einbinden und dann das Hintergrundimage (background-image) beim hover austauschen, dann gehts.

 

[htmlE46]

CSS:

a.home {background:url('ohneHover.jpg') 0 0 no-repeat;}
a.home:hover{background-image:url('mitHover.jpg');}

HTML

<div id="navi">
<ul id="Navi>
 <li><a class="home" href="#index"><img src="ohneHover.jpg" alt="home" border="0"></a></li>

Habe es nun so versucht. Das Problem ist, ich habe dann 2x den Button und bisschen verschoben, also nicht direkt hintereinander.
Der hintere Button ändert das Image dann beim rüberfahren, der vordere müsste also weg, oder es beim vorderen hinbekommen. Liegt wohl daran, dass ich im html teil, das Bild "ohneHover" aufrufe, und in css nochmal?

 

[Efchen]

Warum ist denn immer noch das <img>-Tag da drin, wenn Du das Bild doch als Hintergrundbild eingebaut hast?
Du musst dann natürlich noch dafür sorgen, dass trotzdem ein Text erscheint, wenn keine Grafiken aktiviert sind. Das ginge am besten, indem Du den Text als Text in den Link schreibst und in der Grafik keinen Text hast.
Wozu ist div#navi da? Kommt nach dem ul#Navi noch ein Element? Wenn nicht, ist das überflüssig.

Gruß,
-Efchen

 

[htmlE46]

Das Image ist jeweils aus dem Grund noch drin, weil ich es nicht als Hintergrundbild haben möchte, sondern als Button. Es soll kein Text zu sehen sein, denn das Bild ist der Link alleine. Auf das Bild klickt man dann und beim Hover darüber soll es halt gewechselt werden.

 

[Efchen]

Tja, dann kannst Du es mit CSS auch nicht austauschen.
Und Text MUSS zu sehen sein, oder wie sollen Leute, bei denen keine Images dargestellt werden, Dein Menü bedienen können?

Schönen Tag noch,
-Efchen

 

[htmlE46]

Kann man den Text dann machen, das der hinterm Bild ist oder so? Weil das dann scheiße aussieht.
Wie geht das denn nun, dass ich das Bild da als Link habe, und es nur wechselt beim Hover Effekt?

 

[Efchen]

1. Wenn Du ein <img> hast, dann kriegst Du den Text über das Pflicht-Attribut "alt".
2. Mit einem Hintergrundbild. Aber das willst Du ja nicht.

 

[htmlE46]

Das mit alt habe ich ja schon lange drin.
Wird mit dem Editor ja schon von alleine vorgegeben ;)
Hmm, möchte aber gerne so ein Hover Effekt :(
Wieso kann man beim hover denn nicht irgendwie angegeben, das einfach das bild getauscht wird oder das eine visible und das andere invisible?
Gibt es sonst gar keine Möglichkeit??

 

[Efchen]

Doch, mit JavaScript.
Inklusive des Nachteils, dass das Gimmick bei abgeschaltetem JS nicht funktioniert.

 

[htmlE46]

Habe es nun hinbekommen.Einfach größe festgelegt und das dann so wie von dir beschrieben gemacht und nur text bei alt reingeschrieben.
Das wollte ich in meinem Inhaltsframe, als Quasi Inhaltsverzeichnis, was alles auf der Seite noch kommt auch machen, also die Bilder in einer Liste anordnen, wie davor auch!
Jedoch geht es dort einfach nicht. Der Platz wird für die Bilder angelegt, großer weißer bereiche, jedoch sieht man die Bilder nicht.
Wenn ich das Bild ohne <a> einbinde geht es.

Nun meine 2. Probleme: Wieso bleibt es weiß und das Bild ist nicht zu sehen?
Und wie schafft man es, die Bilder die dann in jeweils einem <li> Element sind, genau untereinander anzuordnen ohne zwischenraum?
HTML

<ul>
<li><a class="1" href="#link1"></a></li>
<li><a class="2" href="#link2"></a></li>
<li><a class="3" href="#link3"></a></li>
<li><a class="4" href="#link4"></a></li>
<li><a class="5" href="#link5"></a></li>
<li><a class="6" href="#link6"></a></li>
<li><a class="7" href="#link7"></a></li>
<li><a class="8" href="#link8"></a></li>
</ul>

CSS

a.1 {background:url('inhalt1.jpg') 0 0 no-repeat; width:260px; height: 28px;}
a.1:hover{background-image:url('inhalt1Hover.jpg');}

 

[Efchen]

Wieso bleibt es weiß und das Bild ist nicht zu sehen?

Vermutlich, weil ein Anchor ein Inline-Element ist und dafür keine Größenangaben gemacht werden können. Dann musst Du dem Element mit display:block; sagen, dass es sich wie ein Block-Element verhalten soll.

Und wie schafft man es, die Bilder die dann in jeweils einem <li> Element sind, genau untereinander anzuordnen ohne zwischenraum?

Indem man sämtliche Zwischenräume (margin/padding) entfernt.

Gruß,
-Efchen