• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild Hover geht nicht

Nerdy

Nerdy

Mitglied
Hallo,
ich benutz das CMS Wordpress möchte da nun ein Bild Hover einfügen.

Mit ein Bild Hover

HTML-Code:
<img src="/imges/tabelle/tabelle_head.png" alt="" /><a onMouseOver="image.src='/imges/tabelle/tabelle_front_blau_game5.png';" onMouseOut="image.src='/imges/tabelle/tabelle_front_grau_game5.png';">
<img name="image" src="/imges/tabelle/tabelle_front_grau_game5.png"</a>

da geht alles! Nun wenn ich jetzt 3 Bilder mit Hover reinmach geht das Hover nicht. Warum?

3 Bilder mit Hover

HTML-Code:
<img src="/imges/tabelle/tabelle_head.png" alt="" /><a onMouseOver="image.src='/imges/tabelle/tabelle_front_blau_game5.png';" onMouseOut="image.src='/imges/tabelle/tabelle_front_grau_game5.png';">
<img name="image" src="/imges/tabelle/tabelle_front_grau_game5.png"</a><a onMouseOver="image.src='/imges/tabelle/tabelle_front_blau_game5.png';" onMouseOut="image.src='/imges/tabelle/tabelle_front_grau_game5.png';">
<img name="image" src="/imges/tabelle/tabelle_front_grau_game5.png"</a><a onMouseOver="image.src='/imges/tabelle/tabelle_front_blau_game5.png';" onMouseOut="image.src='/imges/tabelle/tabelle_front_grau_game5.png';">
<img name="image" src="/imges/tabelle/tabelle_front_grau_game5.png"</a><a onMouseOver="image.src='/imges/tabelle/tabelle_front_blau_game5.png';" onMouseOut="image.src='/imges/tabelle/tabelle_front_grau_game5.png';">
<img name="image" src="/imges/tabelle/tabelle_front_grau_game5.png"</a>

evt. ist ein Link meiner Page hilfreich: http://diamondkey.de/
 
Werbung:
Ich würde dir empfehlen das mit einfachen links zu machen. Z.B.

<a href="#" class="bild1">Bild1</a>

und dann im css:

.bild1 {background: url(bild1.jpg);}
.bild1:hover {background: url(bild1hover.jpg);}

usw.

verzichte am besten komplett auf die javascript sachen.
 
Ich benutze Wordpressund habe dort nur ein HTML fenster, daher geht da galbe nicht mit den CSS.

Oder gibt es kein HTML cod, der auf eine Bestimmten .css datei zugreift? Wo drinn steht wie es mit den hover geregelt wird.
 
Werbung:
Sooo ich glaube ich bin ein Problemfall. :D

in mein HTML Fenster seht jetzt:

HTML: 
<link rel="stylesheet" type="text/css" href="/imges/tabelle/tabelle-style.css" />
<a href="#" class="bild1">Bild1</a>

und in mein Style (.css) Fenster steht:

Code: 
.bild1 {background: url(/imges/tabelle/tabelle_front_grau_game5.png);}
.bild1:hover {background: url(/imges/tabelle/tabelle_front_blau_game5.png);}

So jetzt wenn man auf http://diamondkey.de/ geht, steht Bild1 und der hihntergund ist da und der Hover auch, wie lasse ich jetzt das Kommplette bild anzeigen (671x123px) ??
 
Werbung:
Aber wenn ich in der tabelle-style.css ein display: block reinmache passiert nichts.

Code: 
.bild1 {
background: url(/imges/tabelle/tabelle_front_grau_game5.png);
display: block;
}
.bild1:hover {
background: url(/imges/tabelle/tabelle_front_blau_game5.png);
}
 
Werbung:
Ich habe es im Firebug gemacht, und da funktioniert es.

Attribute wie height und width lassen sich nur auf Blockelemente anwenden, und da <a> by default ein Inline-Element ist, muss man ihm das extra mitteilen.
 
Werbung:
Unverschämt geht ja wohl nicht oder Tronjer,

Es kann nicht angehen wenn User etwas nicht Wissen das hier keiner Richtig Hilft hier ist es genauso wie in anderen Foren Frechheit

Code: 
<a href="http://diamondkey.de/" onMouseOver="if (document.images) document.maker1.src='http://picload.org/image/owdlwog/tabelle_front_gr.png';" onMouseOut="if (document.images) document.maker1.src='http://picload.org/image/owdlwig/tabelle_front_bl.png';"><img src="http://picload.org/image/owdlwog/tabelle_front_gr.png" width="671" height="123" name="maker1" border="15" alt="Click Here"></a>

Bei Wordpress bekomme ich nur 1 Damit hin mehr macht er nicht
 
Bei der jetzt aktuellen Version auf dem Server spukt der Validator folgendes aus:

99 Errors, 1 warning(s)
Zum Vergrößern anklicken....

Ich weiß ja nicht, was du machst, aber es scheint, als wenn du es relativ planlos machst. Das wird ja immer schlimmer.
 
Werbung:
Nerdy schrieb:
Unverschämt geht ja wohl nicht oder Tronjer,

Es kann nicht angehen wenn User etwas nicht Wissen das hier keiner Richtig Hilft hier ist es genauso wie in anderen Foren Frechheit
Zum Vergrößern anklicken....

Ich hatte dir oben bereits einen Lösungsansatz für dein Problem geliefert und gleichzeitig darauf hingewiesen, dass dieses Forum die mit dem Erwerb von Grundlagenkenntnissen verbundene Eigenleistung nicht ersetzen kann. Wenn du den Hinweis darauf, vorab ein Tutorial durchzuarbeiten als unverschämt erachtest, respektive ein Online-Seminar mit persönlicher Betreuung suchst, welches dich von Null auf Webentwickler bringt, deinen Code korrigiert und alles haarklein erklärt, bist du an der falschen Adresse.
 
Zuletzt bearbeitet:
Nerdy du sollst deinen <a> tags einfach nur display:block; in der .css Datei geben.
Je nachdem wie groß die Bilder sind die du dann als Background für deine Links nimmst sähe deine Formatierung so aus:

.bild1 {background: url(bild1.jpg); display:block; height:100px; width:100px;}

Am besten einfach mal anwenden und im Browser per Firebug oder ähnlichem untersuchen und anpassen.
Bilder müssen mit oben genanntem Code aber im selben Ordner wie deine .css Datei sein.

Um dir Grundlagenkentnisse anzueignen gibt es genügend Seiten im Netz. Eine sehr gute ist http://www.w3schools.com/
Auch mit der Möglichkeit Beispiele anzusehen und direkt per Editor zu bearbeiten.
 
Werbung:
threadi schrieb:
Würde mich dem nicht unbedingt anschließen:
http://www.html.de/threads/w3schools-zertifizierung-lohn-sich-das-geld.44212/
Zum Vergrößern anklicken....

Hmm, wusste gar nicht dass die so einen "schlechten" Ruf haben. Aber mal ehrlich wer braucht solche Zertifizierungen? Wer sowas braucht um einen Arbeitgeber zu überzeugen der macht irgendwie was falsch.
Mir ist jedoch noch nie aufgefallen das irgendwas auf w3schools "falsch" war oder so. Alles was ich über html, css und co. wissen will finde ich auch dort, gut anschaulich dargestellt. Viele empfehlen ja immer http://de.selfhtml.org/ . Bin aber kein Fan von deren Oberfläche.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben