Seite 1 von 2
Homepagefrage
Verfasst: 10. Dez 2009, 19:30
von 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;)
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:13
von 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);
}
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:17
von Taruso
da hat mir googel ja fast besser geholfen, sry, aber habe geschrieben ich brauchs ein bisschen genauer;)
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:28
von Latzhosenträger
Dein Menü (sind ja Links) bekommt in der CSS Datei seine Eigenschaften pro Link zugeschrieben.
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.
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:28
von 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.
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:29
von Latzhosenträger
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:31
von 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
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:36
von Taruso
Danke euch schonmal, Mav, deine Möglichkeit ist sehr gut, nur leider darf ich nur HTML und CSS benutzen.
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:37
von Latzhosenträger
Hat er doch.
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:40
von Maverick123
Naja, OnMouseover ist ein kleines bisschen JavaScript x)
Bin aber grad am schauen, wie du das mit CSS hinbekommen kannst.
Re: Homepagefrage
Verfasst: 10. Dez 2009, 21:53
von 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>
- 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
]
Re: Homepagefrage
Verfasst: 10. Dez 2009, 22:13
von Latzhosenträger
Genau das steht schon in meiner ersten Antwort ... lalala^^
Re: Homepagefrage
Verfasst: 10. Dez 2009, 22:19
von Maverick123
Latzhosenträger hat geschrieben: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
Re: Homepagefrage
Verfasst: 10. Dez 2009, 22:46
von Aven Fallen
Wähl Informatik ab, wenn es jetzt nicht klappt.
Kann da nur aus eigener Erfahrung sprechen.
Re: Homepagefrage
Verfasst: 10. Dez 2009, 23:13
von 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 -.-"
