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

**SpaceFrog** · 18/03/2008, 20h36

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

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

Ah ça je connaissait pas. Mais du coup la 2nde image est en invisible ou alors en none ? Car sinon ça laisse un blanc :/

**SpaceFrog** · 18/03/2008, 20h50

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

**arcanum** · 18/03/2008, 21h04

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

**SpaceFrog** · 19/03/2008, 10h50

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

Rollover a 1 seule image

JavaScript

Discussions similaires

Partager

Partager