frage zu CSS(Cascading Style Sheets)

[Zato]

Weiß irgendwer wie man es so einrichtet dass wenn man mit der maus über nen button geht da ein anderes bild kommt? also mit css. ich weiß bisher nur wie das mit links(schrift kein image) funktioniert.

 

[valenterry]

Weiß irgendwer wie man es so einrichtet dass wenn man mit der maus über nen button geht da ein anderes bild kommt? also mit css. ich weiß bisher nur wie das mit links(schrift kein image) funktioniert.

Wie hast du es denn bei Links gemacht?
Bei Bildern funktioniert es genauso. Du gibst einem Element mit CSS ein Hintergrundbild und mit der Pseudoklasse "hover" definierst du dann das Hintergrundbild, dass beim berühren mit der Maus erscheinen soll.

Allerdings wird das mit <IE7 nicht funktioniert, dafür müsstest du Javascript bemühen.

 

[~sfx~]

dürfte deine Frage beantworten:
http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm

mfg sfx-rayzel

 

[Zato]

thx habs jetzt kapiert^^
und wie sieht es mit firefox aus? unterstützt er diesen effekt?

 

[valenterry]

thx habs jetzt kapiert^^
und wie sieht es mit firefox aus? unterstützt er diesen effekt?

Jep tut er.

 

[Zato]

hab wieder eine frage dazu:
also ich schaffe es nur mehrere buttons zu machen die dann aber alle das selbe pic haben. wie kann ich es so machen dass ich 6 buttons mit verschiedenen pics habe die auch den hover effekt haben (alle nen eigenen)?
.
.
.
EDIT (autom. Beitragszusammenführung) :
.
so hab das mal mit div id probiert hat auch mehr oder weniger geklappt nur kommt kein hover effekt oO
kennt sich einer damit aus?

 

[~sfx~]

hm....musst du nicht nur für alle Buttons sowohl normal als auch hover ne eigene Klasse machen im CSS? und dann dies im Page definieren?

 

[Zato]

also ich habs so gemacht

#button_PICS {background-image:url(button_PICs.gif); width:100px; height:30px; }
#button_PICS:hover {background-image:url(button_PICs_hover.gif); width:100px; height:30px; }

und dann weiter im content:
<a href="http://www.google.de/"> <div id="button_PICS"> </div> </a>

steckt da irgendwo ein fehler?

 

[~sfx~]

hm...hover geht nicht aber ansonsten wirds angezeigt?
versuch mal:

#button_PICS a:hover

weil dadurch wird es diesen hover effekt ergeben wenn das objekt verlinkt ist (was du ja auf google gemacht hast) "a" steht immer für link bzw. "anker"^^

mfg sfx-rayzel

 

[Zato]

nee geht leider auch nicht

 

[~sfx~]

Dann versuch es mal anders:

Im CSS:

.button1
{
background-image:url('http://www.google.de/intl/de_de/images/logo.gif');
}

.button1hover
{
background-image:url('http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif');
}

und im content:

<td height="300" width="200" class="button1" onmouseover="this.className='button1hover';" onmouseout="this.className='button1';"></td>

einfach mit deinen Angaben natürlich :P

 

[Zato]

haha ich weiß jetzt worin das problem lag hehe bin ich dumm XD ich hab bisher mit ie6 gearbeitet hab jetzt firefox installiert und alles funzt trotzdem danke für deine tipps^^

ahja eine frage hab ich noch also ich will dass die icons alle oben waagerecht dicht nebeneinander sind wie muss dafür der tabellenbefehl ausehen?

 

[~sfx~]

in dem Fall wäre das cellspacing='0' damit sie so nahe wie möglich stehen, wenn du sie in mehrer Zellen verschachtelt hast cellpadding='0'