hovern mit grafik

[meLog]

und zwar geht es um folgendes. ich hab auf meiner website eine ganz einfache navigationsleiste. eine tabelle aus 4 zeilen und einer spalte. in der tabelle befinden sich in jedem kasten eine grafik. diese 4 grafiken dienen jeweils als link. jetzt wollt ich einen einfachen mouseover effekt hervorrufen in dem beim überfahren der grafik eine andere angezeigt wird. hab ihr im forum schon viel gesucht aber das was ich mir zusammengebastel habe funktioniert nicht wirklich xD.

hier mein quelltext:

#home {background-image:url(home.jpg)display:block width:205px; height:95px}
#band {background-image:url(band.jpg)display:block width:205px; height:95px}
#gallery {background-image:url(gallery.jpg)display:block width:205px; height:95px}
#contact {background-image:url(contact.jpg)display:block width:205px; height:95px}

#home:hover, #home:focus, #home:active {background-image:url(homeneu.jpg)}
#band:hover, #band:focus, #band:active {background-image:url(bandneu.jpg)}
#gallery:hover, #gallery:focus, #gallery:active {background-image:url(galleryneu.jpg)}
#contact:hover, #contact:focus, #contact:active {background-image:url(contactneu.jpg)}

<a href="home.html" target="main" id="home"> usw..

ich finde den fehler nicht. kenne mich nicht so aus. ich schätze mal bei den profis die hier so rumfliegen müsste das schnell geklärt sein ^^

mfg meLog

[ChrisB]

Hi,

#home {background-image:url(home.jpg)display:block width:205px; height:95px}

Gueltiges CSS zu verfassen, waere ein Anfang.

http://jigsaw.w3.org/css-validator/#validate_by_input

MfG ChrisB

[Simon]

Hi,
machs doch mit nur einem Bild:
link

[meLog]

die variante mit nur einer grafik funktioniert bei mir nicht da das insgesamt 8 völlig verschiedene grafiken sind. und die andere variante mit der liste wird nach einfügen zwar dargestellt aber es wird kein mouseover effekt dargestellt und die grafiken haben nen fetten roten rand und den bekomm ich nicht weg xD. wäre cool wenn mir da noch jmd helfen könnte.

mfg meLog

[ChrisB]

Hi,

die variante mit nur einer grafik funktioniert bei mir nicht da das insgesamt 8 völlig verschiedene grafiken sind.

Ja und? Die lassen sich doch in eine Grafik packen.

und die andere variante mit der liste wird nach einfügen zwar dargestellt aber es wird kein mouseover effekt dargestellt

Was du da ggf. falsch machst, koennen wir nicht ahnen.

und die grafiken haben nen fetten roten rand und den bekomm ich nicht weg xD.

Dann musst du vermutlich die Defaultformatierung ueberschreiben, die (verlinkten) Grafiken einen Rahmen verpasst.

wäre cool wenn mir da noch jmd helfen könnte.

</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[meLog]

ja klar könnt ich alles in eine grafik packen. nur ka wie ich das da anordnen soll. ich hab von css allgemein kaum bzw gar keine ahnung. für mich ist die andere variante mit hover leichter zu verstehen. ich weis nur nicht was ich falsch mache. ich habe den code so eingegeben wie es mir gepostet wurde. die liste dort hin wo mir die grafiken angezeigt werden sollen und und den css code dort hin wo ich auch meine anderen css codes stehen habe. die grafiken die immer angezeigt werden sollen, werden dargestellt. aber beim überfahren mit der mouse wird die andere grafik nicht geladen.

mfg meLog

[ChrisB]

Hi,

ja klar könnt ich alles in eine grafik packen. nur ka wie ich das da anordnen soll.

Das wird doch auf der Seite erklaert.

ich hab von css allgemein kaum bzw gar keine ahnung.

Daran kannst du ja arbeiten.

ich weis nur nicht was ich falsch mache.

Noch mal: Das koennen wir auch nicht wissen.
Ich habe die Tipps fuer Fragende nicht zum Spass verlinkt - sondern damit du dort bitte mal nachliest, wie du eine *brauchbare* Problembeschreibung verfasst.

MfG ChrisB

[germ]

und zwar geht es um folgendes. ich hab auf meiner website eine ganz einfache navigationsleiste. eine tabelle aus 4 zeilen und einer spalte. in der tabelle befinden sich in jedem kasten eine grafik. diese 4 grafiken dienen jeweils als link. jetzt wollt ich einen einfachen mouseover effekt hervorrufen in dem beim überfahren der grafik eine andere angezeigt wird. hab ihr im forum schon viel gesucht aber das was ich mir zusammengebastel habe funktioniert nicht wirklich xD.

hier mein quelltext:

#home {background-image:url(home.jpg)display:block width:205px; height:95px}
#band {background-image:url(band.jpg)display:block width:205px; height:95px}
#gallery {background-image:url(gallery.jpg)display:block width:205px; height:95px}
#contact {background-image:url(contact.jpg)display:block width:205px; height:95px}

#home:hover, #home:focus, #home:active {background-image:url(homeneu.jpg)}
#band:hover, #band:focus, #band:active {background-image:url(bandneu.jpg)}
#gallery:hover, #gallery:focus, #gallery:active {background-image:url(galleryneu.jpg)}
#contact:hover, #contact:focus, #contact:active {background-image:url(contactneu.jpg)}

<a href="home.html" target="main" id="home"> usw..

ich finde den fehler nicht. kenne mich nicht so aus. ich schätze mal bei den profis die hier so rumfliegen müsste das schnell geklärt sein ^^

mfg meLog

hi meLog,

hier erstmal die validierte css statt background-image baue die links in einer Liste ein und zwischen den <a> punkten das bild als <img>

<ul>
<li>
<a href="home.html" id="home"><img src="home.jpg" /></a>
</li>
<li>
<a href="band.html" id="band"><img src="home.jpg" /></a>
</li>
<li>
usw.
</li>
</ul

hoffe das hilft dir weiter

mfg germ

#home {
background-image : url(home.jpg);
display : block;
width : 205px;
height : 95px;
}

#band {
background-image : url(band.jpg);
display : block;
width : 205px;
height : 95px;
}

#gallery {
background-image : url(gallery.jpg);
display : block;
width : 205px;
height : 95px;
}

#contact {
background-image : url(contact.jpg);
display : block;
width : 205px;
height : 95px;
}

#home:hover, #home:focus, #home:active {
background-image : url(homeneu.jpg);
}

#band:hover, #band:focus, #band:active {
background-image : url(bandneu.jpg);
}

#gallery:hover, #gallery:focus, #gallery:active {
background-image : url(galleryneu.jpg);
}

#contact:hover, #contact:focus, #contact:active {
background-image : url(contactneu.jpg);
}