Homepagefrage

[Taruso]

Hey,
ich hab auf meiner Homepage ein Menü, nun will ich wenn man über die Spalten fährt, dass die jeweilige Spalte ihren Hintergrund ändern, also einen Mousovereffect.
Kann mir bitte wer das kurz per PN oder so erklären wie cih das mit CSS hinbekomme, aus Google werd ich nicht so schlau, bin auch kein CSSpro;)

[Latzhosenträger]

a:hover{
...
}

Beispiel:

Code: Alles auswählen

#menu a {
background-image:url(images/button1.jpg);
}

#menu a:hover {
background-image:url(images/button2.jpg);
}

[Taruso]

da hat mir googel ja fast besser geholfen, sry, aber habe geschrieben ich brauchs ein bisschen genauer;)

[Latzhosenträger]

Dein Menü (sind ja Links) bekommt in der CSS Datei seine Eigenschaften pro Link zugeschrieben.

Code: Alles auswählen

#menu a {
background-image:url(images/button1.jpg);
}

Das ist das erste Bild als Hintergrund, das wäre dann unter deinem Linktext.

Dann weisst du dem Menü noch zu, wass es tun soll, wenn du mit der Maus drüber fährst. In diesem Fall wird das Hintergrundbild durch ein (am besten gleichgroßes) anderes vertauscht.

Code: Alles auswählen

#menu a:hover {
background-image:url(images/button2.jpg);
}

Ist button1.jpg orange, ist das ganze Menü orange. Fährst du über einen Menüpunkt, wird der Hintergrund davon zu button2.jpg, beispielsweise gelb.

[geratheon]

Also ich kenn' mich nicht damit aus, aber meiner Meinung nach ist's relativ verständlich.

Während der Mauszeiger nicht darüber ist, ist der Button1 sichtbar, bei a:hover, also, wenn der Mauszeiger auf a liegt, ist Button2 sichtbar.

€: Wupps, die Latzhose war schneller.

[Latzhosenträger]

Exakt.
Edit: http://www.on-mouseover.de/css.html

[Maverick123]

An meine Vorposter (Außer meinen direkten Vorposter ):
"ich hab auf meiner Homepage ein Menü, nun will ich wenn man über die Spalten fährt, dass die jeweilige Spalte ihren Hintergrund ändern, also einen Mousovereffect." - Ich glaube, er meint die ganze Spalte, nicht nur das Linkbild

---

Okay, du willst in einer Tabelle eine Spalte OnMouseover anders färben? Ohne CSS könnte ich es dir sagen, hab mich gerade 2 Minuten damit beschäftigt

http://mavsoft.ma.funpic.de/FW/Forum/Example/table.php
Wenn du sowas meinst, gehst du wie folgt vor:

Code: Alles auswählen

Eine Tabellenzelle:
<td width="100" height="100" bgcolor="cccccc" onmouseover="this.bgColor='ff0000'" onmouseout="this.bgColor='cccccc'">Test xD</td>

bgcolor="cccccc"                                - Anfangsfarbe
onmouseover="this.bgColor='ff0000'"  - Farbe, die OnMouseover angezeigt werden soll
onmouseout="this.bgColor='cccccc'"    - Farbe, die kommen soll, wenn die Maus wieder aus dem Feld heraus ist

Der Code auf meiner Beispielseite sieht wiefolgt aus:

Code: Alles auswählen

<table>
<tr>
<td width="100" height="100" bgcolor="cccccc" onmouseover="this.bgColor='ff0000'" onmouseout="this.bgColor='cccccc'">Test xD</td>
<td width="100" height="100" bgcolor="000000" onmouseover="this.bgColor='ffffff'" onmouseout="this.bgColor='000000'"><center><a href="http://forum.freewar.de/viewtopic.php?f=3&t=39460">Forenlink :P</a></center></td>
<td width="100" height="100" bgcolor="00ff00" onmouseover="this.bgColor='0000ff'" onmouseout="this.bgColor='00ff00'">x)</td>
<td rowspan="3">
</td>
</tr>
<tr>
<td width="100" height="100" bgcolor="00ff00" onmouseover="this.bgColor='0000ff'" onmouseout="this.bgColor='00ff00'">x)</td>
<td width="100" height="100" bgcolor="cccccc" onmouseover="this.bgColor='ff0000'" onmouseout="this.bgColor='cccccc'">Test xD</td>
<td width="100" height="100" bgcolor="000000" onmouseover="this.bgColor='ffffff'" onmouseout="this.bgColor='000000'">hrhrhr</td>
</tr>
<tr>
<td width="100" height="100" bgcolor="000000" onmouseover="this.bgColor='ffffff'" onmouseout="this.bgColor='000000'">hrhrhr</td>
<td width="100" height="100" bgcolor="00ff00" onmouseover="this.bgColor='0000ff'" onmouseout="this.bgColor='00ff00'">x)</td>
<td width="100" height="100" bgcolor="cccccc" onmouseover="this.bgColor='ff0000'" onmouseout="this.bgColor='cccccc'">Test xD</td>
</tr>
</table>

Ist vielleicht ein bisschen "dirty" so, aber es tut seinen Effekt

Ich hoffe, ich konnte helfen, MfG

[Taruso]

Danke euch schonmal, Mav, deine Möglichkeit ist sehr gut, nur leider darf ich nur HTML und CSS benutzen.

[Latzhosenträger]

Hat er doch.

[Maverick123]

Naja, OnMouseover ist ein kleines bisschen JavaScript x)

Bin aber grad am schauen, wie du das mit CSS hinbekommen kannst.

[Maverick123]

Nachtrag: Habs mir jetzt in CSS zusammenkombiniert. Eigentlich gehts genau wie bei Links

Code: Alles auswählen

<style type="text/css">
<!--
	td.test 
	{
    	background-color:#0000FF;
    }
    td.test:hover 
    {
    	background-color:#000000;
    } 
-->
</style>

<td width="300" height="100" colspan="3" class="test">hrhrhr</td>

http://mavsoft.ma.funpic.de/FW/Forum/Example/table.php - Die unterste Spalte ist mit dieser Technik gemacht, erkennt man keinen Unterschied

Gesamtcode:

Code: Alles auswählen

<style type="text/css">
<!--
	td.test 
	{
    	background-color:#0000FF;
    }
    td.test:hover 
    {
    	background-color:#000000;
    } 
-->
</style>


<table>
<tr>
    <td width="100" height="100" bgcolor="cccccc" onmouseover="this.bgColor='ff0000'" onmouseout="this.bgColor='cccccc'">Test xD</td>
    <td width="100" height="100" bgcolor="000000" onmouseover="this.bgColor='ffffff'" onmouseout="this.bgColor='000000'"><center><a href="http://forum.freewar.de/viewtopic.php?f=3&t=39460">Forenlink :P</a></center></td>
    <td width="100" height="100" bgcolor="00ff00" onmouseover="this.bgColor='0000ff'" onmouseout="this.bgColor='00ff00'">x)</td>
</tr>
<tr>
    <td width="100" height="100" bgcolor="00ff00" onmouseover="this.bgColor='0000ff'" onmouseout="this.bgColor='00ff00'">x)</td>
    <td width="100" height="100" bgcolor="cccccc" onmouseover="this.bgColor='ff0000'" onmouseout="this.bgColor='cccccc'">Test xD</td>
    <td width="100" height="100" bgcolor="000000" onmouseover="this.bgColor='ffffff'" onmouseout="this.bgColor='000000'">hrhrhr</td>
</tr>
<tr>
    <td width="100" height="100" bgcolor="000000" onmouseover="this.bgColor='ffffff'" onmouseout="this.bgColor='000000'">hrhrhr</td>
    <td width="100" height="100" bgcolor="00ff00" onmouseover="this.bgColor='0000ff'" onmouseout="this.bgColor='00ff00'">x)</td>
    <td width="100" height="100" bgcolor="cccccc" onmouseover="this.bgColor='ff0000'" onmouseout="this.bgColor='cccccc'">Test xD</td>
</tr>
<tr>
    <td width="300" height="100" colspan="3" class="test">hrhrhr</td>
</tr>
</table>

Theoretisch kannst du per Mouseover durch das CSS alle Eigenschaften ändern, auch Textfarbe, Hintergrundbild, usw War mir vorher auch nicht so bewusst, ist ja interessant.

[Das "<html>, <head> und <body>"-Gedöns hab ich mal weggelassen ]

[Latzhosenträger]

Genau das steht schon in meiner ersten Antwort ... lalala^^

[Maverick123]

Genau das steht schon in meiner ersten Antwort ... lalala^^

Naja.. Du hast das mit a:hover gemacht, du hättest das ja mal ausführen und abändern können.. Hier geht es um die ganze Tabellenspalte

[Aven Fallen]

Wähl Informatik ab, wenn es jetzt nicht klappt.

Kann da nur aus eigener Erfahrung sprechen.

[Flummi]

Ihr müsst aber auch bedenken, dass manchen (älteren) Browsern :hover völlig fremd ist...
Sollte zwar niemand mehr nutzen, aber setz sowas erstmal durch -.-"