Combiner deux fonctions

Bonjour,

J'ai glané le script suivant pour ma page d'accueil:

<SCRIPT language=JavaScript1.2> 
function makevisible(cur,which){ 
if (which==0) cur.filters.alpha.opacity=100 
else cur.filters.alpha.opacity=20} 
</SCRIPT> <SCRIPT language=JavaScript1.2> 
function makevisible(cur,which){ 
if (which==0) cur.filters.alpha.opacity=100 
else cur.filters.alpha.opacity=20} 
</SCRIPT>

<a href="images/mon_iimage.JPG" TARGET="_blank"><img onmouseout="makevisible(this,1)" onmouseover="makevisible(this,0)" src="images/picture.gif" style="filter: alpha(opacity=20)" alt="blabla" width="180" height="120" hspace="20" border="0"></a>

Ce code permet un effet de voile sur les images qui disparaît au passage de la souris.
Au passage ce script ne fonctionne que sous IE..

J'aimerais integrer la fonction presente ici:

http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript

Seulement je bute sur le :

<a class="image" href="lien.htm"></a>

En effet,j'ai essayé plusieurs combinaison et rien ne fonctionne

Merci à vous

Salut,

Tes filtres s'appliquent à des images, or il n'y en a pas d'utilisée dans la technique que tu cites, en tout cas pas en tant que telles.
Les images utilisées sont définies en background sur les liens concernés; or, j'ignore si ton filtre peut s'appliquer à des images en background.

En background??

Je crois que je n'ai pas été tres clair ce matin..

Avec un exemple c'est plus parlant..

http://membres.lycos.fr/webimage/

Voilà ce que donne le script en question.A ouvrir avec internet explorer pour fonctionner.


J'aimerais donc y integrer le script d'alsacreations pour faire varier l'image au passage de la souris..
Un peu comme sur le site de bmw mais en moins beau bien sûr..
http://www.bmw.fr

Voilà j'espère avoir été assez explicite..
Modifié par CTRL+V (08 Jul 2005 - 17:29)

bonjour,
pour un effet d'opacité, pas besoin de javascript :

a.image { /* définition de la classe "image" de la balise a */
display: block; /* la balise a doit être en bloc */
width: 128px; /* largeur de l'image réactive */
height: 128px; /* hauteur de l'image réactive */
background: url(images/image.gif) red; /* source de l'image de départ */
-moz-opacity:.2;
filter:alpha(opacity=20)
}
	 
a.image:hover {
background: url(images/image2.gif) red; /* source de la 2ème image */
-moz-opacity:1;
filter:alpha(opacity=100)
}

Mais le mieux serait la technique des portes coulissantes

Bonjour,

La technique des portes coulissantes dont tu parles a vraiment l'air "carrée".

Cependant j'ai déjà du mal à comprendre les quelques lignes de codes plus haut..Remarque peut-être qu'avec ce tuto je vais peut-être bien réussir à m'en sortir :
http://www.ultra-fluide.com/ressources/css/menu-onglets.htm


Si je comprends bien tu me proposes de créer deux images, une de départ en opaque et une éclairée.Bonne idée.Seulement voilà je n'ai aucune idée de la manière dont créer une opacité avec the gimp..

Sinon, j'insère ce script entre les head mais quid du code pour "appeler" l'image lorsqu'on passe devant le lien?
Modifié par CTRL+V (11 Jul 2005 - 20:22)

CTRL+V a écrit :
Bonjour,

La technique des portes coulissantes dont tu parles a vraiment l'air "carrée".

Si je comprends bien tu me proposes de créer deux images, une de départ en opaque et une éclairée.

Non, les deux images rassemblées en une seule, comme ceci :
http://wellstyled.com/files/css-nopreload-rollovers/example.html

avec l'effet d'opacité ajouté en css

Ok j'ai testé la méthode dont tu parles.

Cependant j'aimerais que le rollover se fasse à distance (on passe la souris sur un lien et une image eloignée change..).

Merci quand même.Si tu (vous) avez une autre idée.

Merci à vous