Effet de survol en javascript

Posté par

Binabik, le dimanche 17 avril 2005 à 11:28:45

Salut à tous

Bon moi j'ai un problème avec un code (normalement) tout simple mais qui refuse de fonctionner grrrr
Le but est: quand on passe la souris sur une image lien, l'image est remplacé par une autre de même taille.

Voila le truc:
<html>
<head>
<script language="JavaScript">

var a
a=new Array();
a[0]=new Image;
a[0].src="/img2.gif";
a[1]=new Image;
a[1].src="/img1.gif";

//change l'image
function roll(img,nb) {
eval("img.src=a["+nb+"].src");
}

</script>
</head>

<body>
<A HREF="#"
onmouseover="roll(img1,0)";
onmouseout="roll(img1,1)">
<img name="img1" src="img1.gif" border="0">Lien</a><br>

</body>
</html>

et pour voir ce qui cloche: http://membres.lycos.fr/binabik87/survol.htm
ps: bien sur les noms et chemins des 2 images sont bons, pas de soucis là dessus.

Merci bien
+

Répondre à Binabik Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

beeboo, le dimanche 17 avril 2005 à 13:33:37

Ecrire

eval(img+".src=a["+nb+"].src");

au lieu de

eval("img.src=a["+nb+"].src");

Répondre à beeboo

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Binabik, le dimanche 17 avril 2005 à 15:32:27

euh ... non ça marche toujours pas :/

Répondre à Binabik

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

kij_82, le dimanche 17 avril 2005 à 20:36:29

Pour ce genre de traitement, je te conseil le javaScript :

fichier javascript à inclure :

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

// Changement d'image :

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;

// Ici une petite fonction pour loader tes images liens :
function preloadImages() {
if (document.images) {
home_over = newImage("images/home-over.gif");
home_click = newImage("images/home-click.gif");
register_over = newImage("images/register-over.gif");
register_click = newImage("images/register-click.gif");
forum_over = newImage("images/forum-over.gif");
forum_click = newImage("images/forum-click.gif");
download_over = newImage("images/download-over.gif");
download_click = newImage("images/download-click.gif");
links_over = newImage("images/links-over.gif");
links_click = newImage("images/links-click.gif");
login_bouton_over = newImage("images/login_bouton-over.gif");
login_bouton_down = newImage("images/login_bouton-down.gif");
preloadFlag = true;
}
}

Exemple d'utilisation : index.php :

<td rowspan="2" valign=top>
<a href="../index.php"
onmouseover="changeImages('home', '../images/home-over.gif'); return true;"
onmouseout="changeImages('home', '../images/home.gif'); return true;"
onmousedown="changeImages('home', '../images/home-over.gif'); return true;"
onmouseup="changeImages('home', '../images/home-over.gif'); return true;"
onclick="changeImages('home', '../images/home-click.gif');">
<img name="home" src="../images/home.gif" width="47" height="45" border="0" alt=""></a></td>

Voilà a toi de décoder ;)

@+ ~ iclic @ gauch,iclic, iclic @ droate, iclic, iclic
et ya pas de bôg môsieu ! ~

Répondre à kij_82

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

beeboo, le dimanche 17 avril 2005 à 22:15:23

Ok j'ai trouvé, tu as oublié de mettre des quotes autour de img dans le passage de paramètres . Docn voilà le code qui marche :

<html>
<head>
<script language="JavaScript">

var a
a=new Array();
a[0]=new Image;
a[0].src="/img2.gif";
a[1]=new Image;
a[1].src="/img1.gif";

//change l'image
function roll(img,nb) {
eval(img+".src=a["+nb+"].src");
}


</script>
</head>

<body>
<A HREF="#"
onmouseover="roll('img1',0)";
onmouseout="roll('img1',1)">
<img name="img1" src="img1.gif" border="0">Lien</a><br>


</body>
</html>

avec en gras, les corrections par rapport au code original

Répondre à beeboo

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

roro59650, le jeudi 17 janvier 2008 à 10:19:24

Bonjour,
Pour mon premier message sur ce site, ça commence bien...
En effet, le hasard veut que j'ai une bonne mémoire.
Donc en fait, je me renseignait sur le "onmouseover" et je suis d'abord tombé sur le site de webmaster de lycos, et je regarde le code un peu, et voilà quoi, je retient une erreur : entre le onmouseover et le onmouseout, il y a un point virgule...
Et que vois-je ici? un point virgule entre le onmouseover et le onmouseout...
J'ai farfouillé un peu le code de lycos, et il y a EXACTEMENT les mêmes variables...
Donc je ne sais pas si "binabik" a testé le code ou quoi, mais quand on fait ça, on affiche la source, ou on dit d'où elle viens...
Voici le code de la page http://webmaster.lycos.fr/topics/technic/javascript/javascript-workshop13/0/ (en gras, les parties copiées...):
1: <HTML>
2: <HEAD>
3: <TITLE>Rollover</TITLE>
4:
5: <style>
6: 
32: </style>
33:
34:
35:
36: <SCRIPT LANGUAGE="JavaScript">
37: 
73: </SCRIPT>
74: </HEAD>
75:
76: <BODY BGCOLOR="#FFFFFF">
77: <A HREF="#"
78: onmouseover="roll(img1,0)";
79: onmouseout="roll(img1,1)">
80: <IMG name="img1" SRC="img1.gif" BORDER=0 >Un RollOver simple
81: </A><br><br>
82: <A HREF="#"
83: onmouseover="trans(img2,0)"
84: onmouseout="trans(img2,1)">
85: <IMG name="img2"
86: style="filter: revealTrans(Transition=12, Duration=0.35)"
87: SRC="img1.gif" BORDER=0 >Un rollover avec transition sous IE, simple sur Netscape.
88: </A><br><br>
89: <A HREF="#"
90: onMouseover="makevisible(img3,0)"
91: onMouseout="makevisible(img3,1)">
92: <IMG SRC="img1.gif" NAME="img3" BORDER="0" style="filter:alpha(opacity=50)">
93: Un autre Rollover (Opacité, ne fonctionne uniquement avec Internet Explorer)<BR>
94: </A><br><br>
95: <A HREF="#"
96: onmouseover = "img4.className='mouseBeOnMe'"
97: onmousedown = "img4.className='mouseBeDown'"
98: onmouseup = "img4.className='mouseBeUp'"
99: onmouseout = "img4.className='mouseBeOffMe'">
100: <img src = "img3.gif" border = "0" name="img4"
101: class = "mouseBeOffMe">Un autre Rollover à 3 positions
102: </A>
103:
104: </BODY>
105: </HTML>

Comme on peut voir, il n'y a qu'une fois l'erreur du point virgule, donc "binabik" n'a même pas fouillé un peu le code...
Je trouve ça plus que nul le copié collé sans reflexion...
A+, et mort au plagia!
PS : la solution, pour ceux qui passerait par ici, est le fameux point virgule qui n'a pas lieu d'être...

Répondre à roro59650

Posez votre question Répondre

Trucs & astuces pertinents trouvés dans la base de connaissances

11/02 15h24	Effets pour vos images	Javascript
14/04 19h52	Librairies Javascript	Javascript
05/11 11h45	[Javascript] Date de dernière modification	Javascript
05/11 11h52	[Javascript] Effacer un champ de formulaire lors du clic (focus)	Javascript
08/11 10h32	[Javascript] Lien aléatoire / Choisir un lien au hasard	Javascript

Plus d'astuces sur « Effet de survol en javascript »

Discussions pertinentes trouvées dans le forum

29/03 20h58	Dreamwer 8 effet survol et livre d'or	7
23/02 05h32	Prob avec un JavaScript: effet de survol	5
20/02 17h52	[dreamweaver] erreur javascript image survolé	3

Plus de discussions sur « Effet de survol en javascript »

Logiciels pertinents trouvés dans les téléchargements

	Photofiltre - PhotoFiltre est un logiciel de retouche d’images très complet. Il permet d'effectuer des réglages simples ou avancés sur une...	Catégorie: Retouche photo Licence: Freeware/gratuit
	Beneton Movie GIF - Exigences minimales : Une carte graphique compatible DirectX 8 ou plus récente (avec un minimum de 32 MB de mémoire...	Catégorie: Animation Licence: Freeware/gratuit
	Tux Paint - TuxPaint Tux Paint est un logiciel de dessin libre conçu pour les jeunes enfants âgés de 3 ans et plus. Il possède une...	Catégorie: Dessin Licence: Freeware/gratuit
	Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...	Catégorie: Extensions Firefox Licence: Freeware/gratuit

Plus de logiciels gratuits sur « Effet de survol en javascript »