[noch offen] hover buttons

huhu leute
wie ihr seht sind es eigl. 4 verschieden buttons die einzel auf meiner webseite auch funktionieren aber wenn ich alle 4 buttons auf einer web seite dann leider alle gleich ausehen

http://twardygrosz.de.tl/test.htm

was mache ich falsch
thx im vorraus

hier erstmal ein buttons:

alle 4 hover buttons funktionenen auch!!!!
aber wenn ich alle auf eine webseite stelle dann macht er alle buttons gleich:
wie kann das sein:

hier mal mein quellcode:
<div style="text-align: center">&nbsp;</div>
<table border="0" cellspacing="1" cellpadding="1" width="200" align="center">
<tbody>
<tr>
<td>
<div><span style="font-size: larger"><style type="text/css">
img.einbild {background-image: url(http://img.webme.com/pic/t/twardygrosz/startseite1.jpg);
width:399px;height:70px; }
img.einbild:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/startseite2.jpg);
width:399px;height:70px; }</style><a target="_blank" href="http://twardygrosz.de.tl/Herzlich-Willkommen.htm"><img class="einbild" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a></span></div>
</td>
<td>
<div><span style="font-size: larger"><style type="text/css">
img.einbild {background-image: url(http://img.webme.com/pic/t/twardygrosz/sendeplan1.jpg);
width:399px;height:70px; }
img.einbild:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/sendeplan2.jpg);
width:399px;height:70px; }</style><a target="_blank" href="http://twardygrosz.de.tl/WWR-Not-Sende-Plan.htm"><img class="einbild" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a></span></div>
</td>
<td>
<div><span style="font-size: larger"><span><style type="text/css">
img.einbild {background-image: url(http://img.webme.com/pic/t/twardygrosz/wunschbox1.jpg);
width:399px;height:70px; }
img.einbild:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/wunschbox2.jpg);
width:399px;height:70px; }</style><a target="_blank" href="http://twardygrosz.de.tl/WWR-Not-Wuschbox.htm"><img class="einbild" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a></span></span></div>
</td>
<td>
<div><span style="font-size: larger"><style type="text/css">
img.einbild {background-image: url(http://img.webme.com/pic/t/twardygrosz/forum1.jpg);
width:399px;height:70px; }
img.einbild:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/forum2.jpg);
width:399px;height:70px; }</style><a target="_blank" href="http://twardygrosz.de.tl/Forum/index.htm"><img class="einbild" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a></span></div>
</td>
</tr>
</tbody>
</table>

Hey,

Du darfst eine "class" nicht mehrfach verwenden.
So ist immer die unterste (im code) am stärksten.

Das ganze sollte gelöst werden in dem du diese einfach verschieden nennst.
aslo:

img.einbild1
img.einbild2
img.einbild3
...

Und das machst dann auch bei "img.einbild1:hover"
und "<img class="einbild1" alt="Ein Bild"..."

Hoffe es ist so halbwegs verständlich beschrieben.

lg Solvee

thx dir

oh habs nicht wirklich verstanden. wenn ich 4 webseiten hab und mache jeden hover button auf eine webseite funktionieren die.

alles aber auf einer seite funktionieren leider nicht bzw die funktionen stimmen wie zb. links aber die bilder stimmen nicht. er setzt alle bilder dann gleich. das heißt ich hab 4 gleiche hoverbuttons

thx dir

Ja...

du benutzt die Klasse " img.einbild " auf einer Website mehrmals und dies geht nicht.!
Denn du musst dir vorstellen, der gesamte Quellcode wird vom Browser erst einmal durchgelesen und dann ausgegeben.
Bin mir da auch nicht so 100% sicher aber ich denke er sortiert dann quasi CSS und HTML Code. Dann wird der ganze CSS-Code der sich auf deiner Seite befindet aneinandergereiht.


Und bei dir wird dann 4mal
img.einbild {... }
img.einbild {... }
img.einbild {... }
img.einbild {... }
aneinander gehängt und wird erst einmal unabhängig vom HTML-Code gelesen. Und wie Soll der Browser nun wissen welches "img.einbild" zu
welchem Button gehört (?), wenn alle gleich heißen.

So verweist er eben allen das gleiche zu und zwar das welches weiter unten im Code steht. Also
img.einbild {...*wird Ignoriert* }
img.einbild {... *wird Ignoriert*}
img.einbild {...*wird Ignoriert* }
img.einbild {...*Dies hier wird auf alle übertragen* }


Deshalb musst du jede Klasse einen eigenen Namen geben und diesen der einzelnen Button zu ordnen.


So hoffe konnte dir dies nun noch einmal etwas verständlicher erklären.
Und deine "Verwirrungen" somit mildern.


Solvee

thx
kannst du mir vl auch zeigen wo ich welche sachen ändern muss
wäre echt nett

Hab den Obigen Code verbessert.
So sollte es klappen.

Mit Rot habe ich die Veränderungen markiert.

Gruß Solee

thx hat geklappt.
jetzt noch nee frage dazu.

wieso kann ich jetzt die zeilen unter den buttons nicht wegmachen
hab mal auf der seite für dich ein h hinter gemacht damit du sihst was ich meine denn es sind leerzeichen.
wenn ich die lösche sind auch die bilder weg

http://twardygrosz.de.tl/test.htm

Ich möchte, dass ein Button sich beim Hover vergrößert, bekomme das allerdings mit diesen Codes und meinen Kenntnissen allein nicht hin.