Gruppen
- Top Gruppen
- Betriebsysteme
- Windows classik
- Linux
- BS-Sonstige
- Software
- Datenbanken
- Bildbearbeitung
- Audio/mp3/Video
- Security/Viren
- SW-Sonstige
- Hardware
- Mainboard/CPU
- Grafikkarten
- Peripherie
- Laptop/Notebook
- HW-Sonstiges
- Netzwerk
- Telefon,ISDN,Modem
- W-Lan
- NW-Sonstiges
- Programmierung
- PHP,ASP,Perl...
- Java,C++...
- Webseiten/HTML
- Sonstiges
- PC-Sonstiges
- Plauderecke
- SN Intern
- Test
/ Forum / Webseiten/HTML
Webseiten/HTML
Fragevon ddffddfffdd vom 22.06.2021, 16:50 Options
Hover efekt für images
Hallo!
Wie macht man in html ein link-bild mit einem hover effekt?
das geth irgendwie nicht:
danke!
Wie macht man in html ein link-bild mit einem hover effekt?
das geth irgendwie nicht:
<style>
A:link {color:"colorcode"; text-decoration: (none, underlined, bold, italic, other)}
A:visited {color:"colorcode"; text-decoration: (none, underlined, bold, italic, other)}
A:hover {src="img/btn2.jpg"}
</style>
<title>asdfasdfasdfasdf</title>
</head>
<body>
<h1>asdfasdfasdfasdf!</h1>
<A href="index.html">
<img src="img/btn.jpg" alt="Pic not present" />
</A>danke!
Antwort 1 von gast42 vom 22.06.2021, 20:55 Options
Mit HTML gibt's gar keine Hover-Effekte!
Dein CSS-Code "geht nicht", weil er kompletter Quatsch ist!
Wie CSS richtig geht kannst du bei SelfHTML nachlesen.
Eine Variante, die zwar funktioniert, aber dennoch nicht empfehlenswert ist:
<style type="text/css">
a:link {
display:block;
width:200px;
height:100px;
background-image:url(img/btn.jpg);
}
a:hover {
background-image:url(img/btn2.jpg);
}
</style>
...
<a href="bla.htm"></a>
Dein CSS-Code "geht nicht", weil er kompletter Quatsch ist!
Wie CSS richtig geht kannst du bei SelfHTML nachlesen.
Eine Variante, die zwar funktioniert, aber dennoch nicht empfehlenswert ist:
<style type="text/css">
a:link {
display:block;
width:200px;
height:100px;
background-image:url(img/btn.jpg);
}
a:hover {
background-image:url(img/btn2.jpg);
}
</style>
...
<a href="bla.htm"></a>
Antwort 2 von Computerfreaki vom 22.06.2021, 21:21 Options
Hover-Effekte werden meist mit JavaScript realisiert:
hier dein Bild:
Jetzt fügst du event-Handler hinzu:
mfg
computerfreaki
hier dein Bild:
<img src="bild_norm.jpg" alt="" />Jetzt fügst du event-Handler hinzu:
<img src="bild_norm.jpg" alt="" onmouseover="this.src='bild_hover.jpg';" onmouseout="this.src='bild_norm.jpg'" />mfg
computerfreaki
Antwort 3 von Solo vom 22.06.2021, 22:55 Options
HI,
schau mal auf diese Seite: http://www.html-world.de/program/js_e_2.php#bildertausch(hover-effekt)
schau mal auf diese Seite: http://www.html-world.de/program/js_e_2.php#bildertausch(hover-effekt)
Antwort 4 von gast42 vom 23.06.2021, 06:32 Options
@solo: das ist die Kunst, das was Computerfreaki direkt in die event-Attribute geschrieben hat, in unnötig komplizierte (und damit unnötig bremsende) Funktionen zu setzen. scnr
Ähnliche Themen
ohne vertikale Schiebeleiste
abschweb 14.12.2007 - 81 Hits - 26 Antworten
CSS Hover Effeckt geht bei Firefox nicht
Fassy91 23.05.2008 - 81 Hits - 5 Antworten
CSS p:hover
detommy 24.04.2009 - 324 Hits - 4 Antworten
class container vergrößern bei hover
x-maz 04.05.2009 - 390 Hits - 1 Antwort
Hinweis
Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..
Neue Einträge
