[Javascript] Rollover images

Logiciel & apps Programmation
1

Salut a tous!
Je cherche a créer un rollover sur des images. En fait il s’agit de miniatures de wallpapers et quand on passe dessus, ça affiche l’aperçu.

Voila la page en question: http://neofish.free.fr/abstract-creators/index.html

et le code:

<a href="page pour dl le wallpaper.html?quot; 
onMouseOver="aperçu1.src='images/aperçus/aperçu1_bleu_aperçu.jpg'" onMouseOut="aperçu_base.src='images/aperçus/aperçu_base.jpg'">
<img src="images/miniatures/abstrait1_bleu.jpg"></a>

aperçu1= la 1ere miniature(en bleu)
perçu_base= le fond orange avec le texte

Voila vous avez tout merci d’avance :wink:

2

Aidez moi svp, c’est juste un script tres basique de JS, je suis sur que vous etes beaucoup a savoir le faire…d’autant que moi rien ne marche :neutre:
Mais si vous avez besoin d’autres infos demandez :wink:

3

Donne quelqued précisions sur comment tu souhaites afficher l’apercu …

Si tu souhaite l’afficher en bas comme j’ai cru voir sur ta page, tu peux faire ainsi :

Les liens pour chaque image seront comme celui-la :


<a href="page_de_dl.truc" onmouseover="montre_apercu('aperçu1_bleu_aperçu.jpg');" onmouseout="montre_apercu('');"><img src="images/miniatures/abstrait1_bleu.jpg" alt="" /></a>

Le script a placer dans ta page :

<script type="text/javascript">
<!--//--><![CDATA[//><!--


function montre_apercu(image)
{
if(image=="")
document.getElementById("div_apercu").innerHTML="<img src='images/aperçus/aperçu_base.jpg' alt='' />";
else
document.getElementById("div_apercu").innerHTML="<img alt='' src='images/aperçus/"+image+"' />";
}

//--><!]]>
</script>

il te faudra aussi placer une balise div pour afficher l’apercu qq part (que tu as deja dans ton code en fait, j’ai juste changé le nom) :


<div id="div_apercu"><img src="images/aperçus/aperçu_base.jpg" alt="" /></div>
4

Voila j’ai remplacé

"+image+"

par

abstrait1_bleu_aperçu.jpg

(le nom de l’aperçu de l’image) et ça marche.
Par contre je crois que comme ça il va faloir 1 fonction par image… :confused:

5

Tu n’ass pas besoin de changer !

Ce n’est pas a remplacer, c’est un argument de la fonction :slight_smile:

Laisse le script comme il est, sinon oui tu auras besoin d’un script par image ce qui est inutile !

Tu as juste les liens des images à changer

<a href="page_de_dl.truc" onmouseover="montre_apercu('APERCU1.jpg');" onmouseout="montre_apercu('');"><img src="images/miniatures/IMAGE1.jpg" alt="" /></a>

<a href="page_de_dl.truc" onmouseover="montre_apercu('APERCU2.jpg');" onmouseout="montre_apercu('');"><img src="images/miniatures/IMAGE2.jpg" alt="" /></a>

etc…

6

Oui, je veux bien mais avec la partie que j’ai changée ça ne marche pas! En fait ça n’affiche pas l’aperçu

7

En fait c’est bon ça marche il y avait une erreur de nom d’image.
Mais il reste un probleme: les apreçus ne s’affichent pas instantanément.
Je voudrais savoir le code pour précharger les images svp. (je l’ai su mais jme souviens plus…)

Et un grand merci pour ton aide Theblackeagle :super:

8

:jap: :slight_smile:

Pour le préchargement d’image, on peut faire comme ca :
Après la balise <body>


<img src="leinverslimageaprechargee" style:"display:none" alt="" />
9

Au fait headhunter456, ne met aucun “ç” dans le nom de tes dossiers, ni dans les nom de fichier, cela occasione trop de probleme d’encodage. Ne garde que des “c”, ou des caractère qui n’ont paqs besoin de code html particulier (sinon tu risque d’avoir des probleme de liens si tu met des é ç etc en brut)