Rollover a 1 seule image

**gloubi** · 18/03/2008, 14h52

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

**beeboo** · 18/03/2008, 15h03

Salut,
Pour ça tu peux jouer avec la transparence mais gare aux compatibilités entre navigateurs.

**gloubi** · 18/03/2008, 15h25

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

**beeboo** · 18/03/2008, 18h34

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.

**arcanum** · 18/03/2008, 18h35

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...

**jln13** · 18/03/2008, 20h03

hello,

c'est tout a fait possible. Il faut créer une classe css qui applique la transparence sur l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
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>

compatible IE7 / FF2

**arcanum** · 18/03/2008, 20h26

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

Rollover a 1 seule image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager