Version imprimable
Bonjour,
Question simple : est-il possible de faire en JS (voir CSS) un système de rollover sur une image qui applique directement un effet à l'image (assombrir/ eclaircir) ? Le but du jeu est de ne pas être obligé de charger une nouvelle image pour faire le rollover d'une part, et surtout d'éviter d'avoir a faire 2 images à chaque fois, compte tenu qu'elle sont des milliers, et qu'elles sont regénérés régulièrement...
En vous remerciant
Salut,
Pour ça tu peux jouer avec la transparence mais gare aux compatibilités entre navigateurs.
Voila qui est ineteressant... Mais... La compatibilité... C'est un problème de navigateur ou de format d'image ? Si c'est un pb de navigateur, lesquels gerent ça, lesquels ne le gère pas ?
Merci
Le problème de la transparence est que la propriété, n'est pas gérée de la même manière par les différents navigateurs. Pour ça une petite recherche sur gougoule devrait de donner pas mal d'infos.
Pour ma part j'en avait fait en jouant avec la transparence en css oui. Un simple hover suffit.
Mais je crois que ce pu***n d'IE ne les prend pas en compte...
De toute façon IE n'est pas aux norme de programmation web donc bon autant le boycotter...
hello,
c'est tout a fait possible. Il faut créer une classe css qui applique la transparence sur l'image :
compatible IE7 / FF2 :)Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15<html> <style type="text/css"> .transparentStyle { filter : alpha(opacity=30); -moz-opacity : 0.3; opacity : 0.3; } </style> <head> </head> <body> <img onmouseover="this.className='transparentStyle'" onmouseout="this.className=''" src="machin.jpg" /> </body> </html>
Ah oui voilà il y a deux paramètres différents en CSS pour IE et FF :)
Voilà la méthode des onmouse marche très bien, ou sinon en css si tu fait ça sur des image qui sont des liens, tu met les paramètres CSS donné par jln13 dans un img a {}, ce qui t'évite de devoir repréciser la classe à chaque image :)
sinon on peut aussi avoir deux images en une seule ...
genre tu colles les duex images cote à cote pour n'en former qu'une, et ensuite il ne reste plus qu'a jouier du clipTop ou clipleft pour ne laisser apparaitre qu'une partie de l'image à tour de role ...
Ah ça je connaissait pas. Mais du coup la 2nde image est en invisible ou alors en none ? Car sinon ça laisse un blanc :/
Non il n'y a qu'une image ...
il suffit de coller les deux images cote à cote dans paint ou gimp et d'enregistrer en une seule image
+-------+--------+
|...........l............|
|.....1....l.....2 .....|
|...........l............|
+-------+--------+
ou verticalement
une seule image en deux parties ...
On peut aller jusqu'à 4 images et ensuite jouer du clip
Bah oui donc si c'est une seule image, si par exemple tu a un cadre autour, et que tu affiche la partie 1. Le cadre sera quand même contre la partie 2, mais qui ne sera pas visible non ?
edit : ah bon non j'suis con, sinon ce serai pas du rollover :D
soit tu fait une seule image en collant les images avec cadre (donc au milieur tu auras une double largeur de cadre
soit tu mets une bordure à ta balise image ...