login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > Overige > CSS > Simple css mouse over (image)

Simple css mouse over (image)

Auteur: CDNC - 29 juni 2006 - 17:00 - Gekeurd door: Gerard - Hits: 5370 - Aantal punten: 4.33 (6 stemmen)




Handig voor een mouseover te maken zonder dat je 2 afbeeldingen nodig hebt.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);

=> is zodat het in IE zou werken
=> 100 is normaal dus geen foto-bewerking en dus ook de maximale waarde

css code - Bekijk de code zonder highlighting - Klap code in 
  1. -moz-opacity: 0.8;

=> is zodat het in FF zou werken
=> 1 is normaal dus geen foto-bewerking en dus ook de maximale waarde


Dit is niet W3C-valid maar het werkt dus wel in IE & FF.

Code:
CSS
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>
  2. .foto img {
  3.     border:1px solid #000000;
  4.     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  5.     -moz-opacity: 0.8;
  6. }
  7. .foto:hover img {
  8.     border:1px solid #000000;
  9.     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  10.     -moz-opacity: 1; 
  11. }
  12. </style>



Gebuik:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="#" class="foto"><img src="foto.jpg" alt="foto"></a>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (13)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.026s