Changement d'une image par une autre au survol ; problème quantitatif

super_newbie_pro · 23 Octobre 2008

Bonjour

J'ai un problème avec la multiplication du nombre d'images à mettre en cache. Pour changer une image par une autre quand la souris passe dessus, pour l'instant j'utilise ça :

1°) Entre les balises Head, je mets ça :

<script LANGUAGE="JavaScript">
/* PRECHARGEMENT DE L IMAGE DANS LE CACHE DU NAVIGATEUR */

if(document.images)

{

i630951 = new Image;

i630951 = "images_communes/fr_survol.jpg";

}

</SCRIPT>

=====================================

2°) Et là où se trouve mon image à changer, je mets ça :

<A HREF="paysage.html"

onMouseOver="i630951.src='images_communes/fr_survol.jpg'"

onMouseOut="i630951.src='images_communes/fr_origine.jpg'"><IMG

SRC="images_communes/fr_origine.jpg" BORDER=0 NAME="i630951" ALT="Français"

HSPACE=0 VSPACE=0></A>

Problème, pour mon site que je suis en train de faire ( http://www.sengueingaro.fr/ ) j'ai plusieurs boutons de langues... FR, IT, AL, US, etc... et je voudrais une image au survol, différente pour chacun de ces boutons.

Ainsi, au passage de la souris sur le drapeau FR, celui-ci s'éclaicit (image du drapeau éclairée à +20%). Je voudrais que le drapeau US soit aussi éclairé au passage de la souris dessus, de même pour les autres, mais ça impliquerait d'avoir plusieurs images préchargées... Comment faire ? Mon script ci-dessus ne marcherait pas.

D'avance merci pour votre aide.

EDIT ; pareil si je le fais en CSS, ça coince quand j'ai besoin de plusieurs images différentes pour plusieurs passages sur différentes images :

entre les balises <head></head>

<style>
#image

{

width: 00px; (taille de l'image en pixels)

height: 00px; (taille de l'image en pixels)

background: url; (images/image1.jpg)

}

#image:hover

{

width: 00px; (taille de l'image qui s'affiche, en pixels, quand on passe dessus)

height: 00px; (taille de l'image qui s'affiche, en pixels, quand on passe dessus)

background: url; (images/image1_quand_on_passe_dessus.jpg)

}

</style>

entre les balises <body></body>

<div id="image"></div>

(images = lien vers votre image d'origine)

Même problème qu'en java ; si j'ai 5 boutons, où chaque bouton doit avoir sa propre image quand la souris passe dessus, on fait comment ?

Merci

Modifié 23 Octobre 2008 par super_newbie_pro

PotatoesJunky · 23 Octobre 2008

Le plus simple : tu vas là : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Il y a plein d'exemples de menus en CSS dont plusieurs correspondent à ce que tu veux (plusieurs boutons, chacun ayant une image différente).

Il te suffit de cliquer sur l'image du menu pour voir une page avec le code CSS et le code HTML dudit menu.

Très simple à comprendre et à adapter à ton site

KnockedMaster · 24 Octobre 2008

Bonsoir,

Ou bien utiliser la propriété CSS 3 opacity.

Malheureusement elle n'est pas encore bien implémentée chez Microsoft ...

@+

Knockedmaster

Connexion

Changement d'une image par une autre au survol ; problème quantitatif

Sujets conseillés

super_newbie_pro

Lien vers le commentaire

Partager sur d’autres sites

PotatoesJunky

Lien vers le commentaire

Partager sur d’autres sites

KnockedMaster

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité