Um (verlinkte) Bilder abzudunkeln bzw. transparent zu machen, und ggf. bei onMouseover wieder normal werden zu lassen, bedarf es Cascading Style Sheets (CSS). Als erstes müssen die Bilder oder Buttons in ein Block-Element (div).
<div class="buttons">
<a href="http://www.www.hot-elle.de" target="_blank"><img src="http://www.hot-elle.de/he_80x15.gif" width="80" height="15" border="0" title="Buenos Dias Elias"/></a>
</div>
Dann müssen wir die CSS Klasse “buttons” definieren.
<style type="text/css">
<!--/* Transparente Buttons */
.buttons {
margin-top: 20px;
padding-left: 2px;
font: 1.1em/1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align: justify;
color: #666;
list-style: none;
}.buttons a img,
.buttons a:visited img {
text-decoration:none;
border-bottom:0px;
filter:alpha(opacity=50); /* IE */
-moz-opacity: 0.50; /* Gecko */
opacity: 0.50; /* Opera */
}.buttons a:hover img {
text-decoration:none;
border-bottom:0px;
filter:alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /* Gecko */
opacity: 0.90; /* Opera */
}-->
</style>
Dabei werden folgende Werte akzeptiert:
-moz-opacity 0.00 (durchsichtig) bis 1.00 (undurchsichtig)
opacity 0.00 (durchsichtig) bis 1.00 (undurchsichtig)
filter:alpha(opacity=) 0 (durchsichtig) bis 100 (undurchsichtig).
Zusammenfassung - Quellcode einer Webseite mit Alpha Opacity Filter.
<html>
<head>
<title>Titel deiner Seite</title><style type=”text/css”>
<!–/* Transparente Buttons */
.buttons {
margin-top: 20px;
padding-left: 2px;
font: 1.1em/1.3em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
text-align: justify;
color: #666;
list-style: none;
}.buttons a img,
.buttons a:visited img {
text-decoration:none;
border-bottom:0px;
filter:alpha(opacity=50); /* IE */
-moz-opacity: 0.50; /* Gecko */
opacity: 0.50; /* Opera */
}.buttons a:hover img {
text-decoration:none;
border-bottom:0px;
filter:alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /* Gecko */
opacity: 0.90; /* Opera */
}–>
</style></head>
<body><div class=”buttons”>
<a href=”http://www.www.hot-elle.de” target=”_blank”><img src=”http://www.hot-elle.de/he_80×15.gif” width=”80″ height=”15″ border=”0″ title=”Buenos Dias Elias”/></a>
</div></body>
</html>
Das Ergebnis sieht dann in etwa so aus. Im normalen Zustand sind die Buttons abgedunkelt.
Wenn aber jemand mit der Maus über einen der Buttons fährt wird dieser wieder komplett dargestellt.
DEMO: Auf der Startseite, in der Sidebar ganz unten, hast du die Chance den Effekt selber auszuprobieren.
.
Suchen
Latest
- Tot geglaubte Leben länger!
- Neuseeland: Christchurch mit Cave Rock, Godley Head, Sign of Takahe und Pak’n Safe mit Self Checkout sowie Rückflug nach Sydney und ist denn heut schon Weihnachten?
- Neuseeland: The Catlins mit Slope Point, Curio Bay, Nugget Point und Cooks Rock, Dunedin mit Balwin St und Moana Pool, Moeraki Boulders, Mt Cook mit Lake Pukaki, Delphin Tour in Kaikoura
- Neuseeland: Queenstown - Hang Gliding, Milford Sound und 12 Stunden
- Neuseeland: Hokitika, Franz Josef und Fox Gletscher, Jackson Bay, Wanaka
- Neuseeland: Te Papa in Wellington, Marlborough Sounds, Abel Tasman National Park, Pancake Rocks und Monteith’s Brauerei
- Neuseeland: Wicked Camper, Goat Island Marine Park, Bay of Island, Cape Reinga, Waipoua Forest, Coromandel Peninsula, White Island, Rotorua, Tamaki Mauri Village, Wai-O-Tapu Thermal Wonderland, Taupo, Tongariro Alpine Walk und Mt. Taranaki
Recent Comments
Categories
Heute: 3
danke, genau danach habe ich gesucht!
Danke, hat mir sehr geholfen!
Danke! Ein einfacher Effekt mit großer Wirkung! Wieso weist Du denn der Klasse “buttons” eine font zu?
Keine Ahnung, mir war halt so… *gg*