19.08.2004, 16:18
so
nachdem ich Nobodys Thread mit Mouseover gelesen habe, hab ich mich dazu entschlossen dieses Tut zu schreiben,
ich hab ja auf Nobodys Frage geantwotret dass es auch eine Methode mit CSS gibt ein bild zu verändern.
Das sind die Filter:
Es gibt verschiedene Filter in css ich stell aber heute erstmal 2 vor (einen Text und einen Grafik Filter) die anderen kann man ja noch ergänzen:
1.) Text
Ich hab den filter glow ausgewählt.
Damit bringt man einen Satz oder ein Wort zum glühen.
[code=php]
<div style="color:blue;
filter:Glow(color=#000000, strength=12)">Text</div>[/code]
Mit Style=" style " wird immer ein Style definiert, dieser STyle bezieht sich dann auf alles zwischen <div> und </div>
Dem Text wird gesagt, dass er Blau ist (color: blue
und dann wird der Filter Glow angewandt.
In den Klammern steht, dass der Glühende Rand schwarz ist.
Und der Rand die Stärke 12 hat.
Je höher die Zahl ist, desto dicker der Rand.
2.) Bild
hier hab ich mich für einen Schwarz weiß filter entschieden ich benutz den selber auf http://www.die-ferienprofis.de
Der filter heißt Gray()
[code=php]
<img src="bild.jpg" class="sw">
[/code]
Hier schreibe ich den Filter nicht mit style="", sondern rufe eine vordefinierte Klasse auf.
Die Klasse muss im head zwischen
[code=php]<style stype="text/css">
<!--
[/code]
und
[code=php]
-->
</style> [/code]
definiert werden.
Und lautet bei mir:
[code=php]<style stype="text/css">
<!--
.sw
{
filter:Gray()
}
-->
</style> [/code]
das .sw bedeutet, dass eine Klasse erstellt wird die den Namen sw hat.
. steht für Klasse.
Nun zum Mouseover
Um einen Mousover effekt zu erziehlen muss man die Klasse noch etwas erweitern:
[code=php]<style stype="text/css">
<!--
.sw a:hover
{
filter:Gray()
}
-->
</style> [/code]
ich habe hier das a:hover ergänzt.
Das bedeutet, dass das, was zwischen { und } steht, dann ausgeführt werden soll wenn man mit der maus über einem Link ist der sich auf diese Klasse bezieht.
Um das zu erreichen müssen wir aber auch unseren Bild Tag noch etwas abändern, wir müssen ihn nämlich um einen Link erweitern:
[code=php]
<a href="#"> <img src="bild.jpg" class="sw"> </a>
[/code]
wenn nun jemand mit der maus über das Bild geht, ist der Link aktiv und der Filter wird eingesetz, das Bild wird also Schwarz-Weiß angezeigt.
Wenn jemand auf das Bild klickt passiert garnichts weil ja href="#" ist.
Ich hoffe ihr habt alles verstanden, Fragen könnt ihr, wie immer gerne posten :-)
nachdem ich Nobodys Thread mit Mouseover gelesen habe, hab ich mich dazu entschlossen dieses Tut zu schreiben,
ich hab ja auf Nobodys Frage geantwotret dass es auch eine Methode mit CSS gibt ein bild zu verändern.
Das sind die Filter:
Es gibt verschiedene Filter in css ich stell aber heute erstmal 2 vor (einen Text und einen Grafik Filter) die anderen kann man ja noch ergänzen:
1.) Text
Ich hab den filter glow ausgewählt.
Damit bringt man einen Satz oder ein Wort zum glühen.
[code=php]
<div style="color:blue;
filter:Glow(color=#000000, strength=12)">Text</div>[/code]
Mit Style=" style " wird immer ein Style definiert, dieser STyle bezieht sich dann auf alles zwischen <div> und </div>
Dem Text wird gesagt, dass er Blau ist (color: blue
und dann wird der Filter Glow angewandt.
In den Klammern steht, dass der Glühende Rand schwarz ist.
Und der Rand die Stärke 12 hat.
Je höher die Zahl ist, desto dicker der Rand.
2.) Bild
hier hab ich mich für einen Schwarz weiß filter entschieden ich benutz den selber auf http://www.die-ferienprofis.de
Der filter heißt Gray()
[code=php]
<img src="bild.jpg" class="sw">
[/code]
Hier schreibe ich den Filter nicht mit style="", sondern rufe eine vordefinierte Klasse auf.
Die Klasse muss im head zwischen
[code=php]<style stype="text/css">
<!--
[/code]
und
[code=php]
-->
</style> [/code]
definiert werden.
Und lautet bei mir:
[code=php]<style stype="text/css">
<!--
.sw
{
filter:Gray()
}
-->
</style> [/code]
das .sw bedeutet, dass eine Klasse erstellt wird die den Namen sw hat.
. steht für Klasse.
Nun zum Mouseover
Um einen Mousover effekt zu erziehlen muss man die Klasse noch etwas erweitern:
[code=php]<style stype="text/css">
<!--
.sw a:hover
{
filter:Gray()
}
-->
</style> [/code]
ich habe hier das a:hover ergänzt.
Das bedeutet, dass das, was zwischen { und } steht, dann ausgeführt werden soll wenn man mit der maus über einem Link ist der sich auf diese Klasse bezieht.
Um das zu erreichen müssen wir aber auch unseren Bild Tag noch etwas abändern, wir müssen ihn nämlich um einen Link erweitern:
[code=php]
<a href="#"> <img src="bild.jpg" class="sw"> </a>
[/code]
wenn nun jemand mit der maus über das Bild geht, ist der Link aktiv und der Filter wird eingesetz, das Bild wird also Schwarz-Weiß angezeigt.
Wenn jemand auf das Bild klickt passiert garnichts weil ja href="#" ist.
Ich hoffe ihr habt alles verstanden, Fragen könnt ihr, wie immer gerne posten :-)
