Frage zu CSS
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
attribut
aussehen
austausch
background
beitrag
bild
button
display
effekt
fragen
grafik
gre
hintergrund
hintergrundbild
minute
mglichkeit
opus
tabelle
test
wenigsten
-
also meine frage:
ich will ne webside machen und da soll ein hover-effekt (bei java: onmouseover-effekt) rein...
also, wenn man mit der maus über die buttons geht, sollen die sich verändern.
mit java kapier ich das ja noch, mit css (bei texten) auch, aber bei grafiken mit css in einer tabelle nicht mehr...
könnt ihr mir weiter helfen? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Es heißt verdammt nochmal JavaSCRIPT.
Bei CSS geht das mit :hover:
input:hover
{
background-image:url(bla.jpg);
}
oder etliches Anderes.
-> http://css4you.de -
:hover funktioniert im Internet Explorer ohne JavaScript Hacks allerdings nur beim A Element. Ich empfehle dir entsprechende IE Hacks deinem Projekt beizulegen damit auch IE 5 und 6 die Features vom IE 7 haben und etwa genauso aussehen wie Mozilla, Opera und Netscape.
-
ich berücksichtige kein IE 5 oder 6 bei meiner seiten gestalltung. wer son einen sch*** browser benutzt is selbst schuld ^^
wenn schon IE dann könnt ihr wenigstens 7 benutzten, da er halbwegs valide ist ^^ und die funktionen aus css richtig unterstützt..ich benutz doch keine IE hacks, nur damit "kleinweich" bekommt was er haben möchte ^^ -
Hat dennoch nichts mit Programmiersprachen zu tun, deshalb verschoben nach HTML & JavaScript.
MfG,
thw -
also is ja schön, dass ihr euch hier so schön unterhaltet, aber ich möchte gerne wissen, wie man mehrere buttons (button1.gif, button2.gif, button3.gif) in ne tabelle macht und da so en scheiß hovereffekt drin is... also, dass der läd: (hover_button1.gif, hover_button2.gif, hover_button3.gif)
also hier ne tabelle:
<table>
<tr><td><img sry="button_1.gif"></td></tr>
<tr><td><img sry="button_2.gif"></td></tr>
<tr><td><img sry="button_2.gif"></td></tr>
</table>
und jetzt den hover-effekt mit css! schreibt bitte etwas mehr, weil ich in css noch net ganz so fitt bin -
thebigbeck schrieb:
<table>
<tr><td><img sry='button_1.gif'></td></tr>
<tr><td><img sry='button_2.gif'></td></tr>
<tr><td><img sry='button_2.gif'></td></tr>
</table>
und jetzt den hover-effekt mit css!
Das geht so nicht. Mit CSS kann man keine Attributwerte (src) austauschen. Du hast nur zwei Möglichkeiten:
1. Die Navigationslinks als Text setzen und die "Buttons" über CSS als Hintergrund. Siehe dazu die Antwort von benutzernaemelchen.
2. JavaScript nutzen. -
okey, also in tabellen geht das mit css net... schade...
dann muss ich wohl weiter mit java arbeiten...
danke für die antworten!
-
doch es müsste so gehen:
<table> <tr> <td> <img src="bild1.jpg" onmouseover="src='bild2.jpg'" onmouseout="src='bild1.jpg'"> </td> </tr> </table>
edit: falls dir unklar ist wo einfache und wo doppelte anführungszeichen sind dann klick auf zitieren dann steht da die richtige version
Beitrag geaendert: 12.5.2007 16:03:15 von scrawl -
lesen--> denken --> schreiben!
hab ich geschrieben:(Am anfang, also musst du einfach nur den ersten beitrag lesen!)
also meine frage:
ich will ne webside machen und da soll ein hover-effekt (bei java: onmouseover-effekt) rein...
also, wenn man mit der maus über die buttons geht, sollen die sich verändern.
mit java kapier ich das ja noch, mit css (bei texten) auch, aber bei grafiken mit css in einer tabelle nicht mehr...
könnt ihr mir weiter helfen? -
Schreib doch mal näher wofür dus einsetzen willst... eventuell kann man da nämlich wirklich was mit dem a-attribut machen, aber ich hab keine Lust, dir jetzt was zu schreiben und nachher brauchst dus gar nicht...
Nur so viel: Wenn du in die Tabelle Text setzt und diesen als Link kennzeichnest, also z.B. so:
<td><a href="#" class="test">Text</a></td>
Dann kannst du der Class "test" beim Attribut "a" folgende Eigenschaften geben, damit sich das Hintergrundbild des Links/Textes (wohlgemerkt nicht der Tabelle! Aber das merkt ja keiner^^) ändert:
a.test{
width: 100px;
height: 100px;
display: block;
background: url(hintergrund.jpg);
}
a.test:hover{
background: url(onmouseover.jpg);
}
Wichtig ist das display:block und die Höhe- und Weiteangabe falls das Bild größer als der Text ist. width und height vergibst du dann der Größe des Bildes entsprechend, hier 100x100 px
So... hoffe ich konnte dir bissl helfen, MfG Alex -
das is ja alles schön und gut, nur ich will nur ein bild und keinen text darüber
das was du grad geschrieben hast, raff ich, nur wie man das macht, dass da jetzt kein text drüber is, sondern sich nur das bild ändert, wenn man drüber geht, dass raff ich net -
-.- schonmal überlegt, dass LEERZEICHEN auch Text sind?
Ok ok... hier mal ein Beispiel für dich (jetzt hab ich schon wieder 5 Minuten meiner kostbaren Zeit geopfert -.-):
http://dev.bellyworld.de/temp/bilder_hover/
Wie du vllt dem Ordnernamen entnehmen kannst ("temp"), bleibt das Ding nicht ewig auf meinem Space... also sag mal bitte Bescheid, wenn dus runtergeladen hast, dann nehm ichs wieder runter.
Wenn noch fragen sind, frag ;)
MfG Alex -
okey, ich habs gedownloadet... DANKE! ich habs jetzt auch gerafft...
THX!
ENDGÜLTIG GECLOSED^^ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
