Image lien et effet survolée en même temps

Fermé
ambreambre Messages postés 19 Date d'inscription mercredi 7 avril 2010 Statut Membre Dernière intervention 8 mai 2010 - 6 mai 2010 à 00:41
ambreambre Messages postés 19 Date d'inscription mercredi 7 avril 2010 Statut Membre Dernière intervention 8 mai 2010 - 8 mai 2010 à 12:49
Bonjour,

Je ne sais pas écrire du Javascript, du coup, je récupère des bouts de codes pour les personnaliser autant que faire ce peut.
(mais là j'ai récupéré un bout de code et cela ne fonctionne pas je ne sais pas pourquoi :/ )

Je cherche le code javascript pour faire d'une image un lien vers une page, mais avec un effet de survol dessus en même temps !
(Je crois qu'on trouve A HREF et onMouseOver et onMouseOut dedans ...)
(En fait, mon image c'est un bouton de mon menu qui me mène vers une autre page de mon site. Elle représente un dessin gris, et quand la souris passe dessus je veux que ce soit une autre image qui apparaisse avec le dessin qui est en noir ;-) , et puis quand je clic dessus j'arrive sur le menu en question.)

Fastoche vous allez me dire ! C'est un truc hyper courant, mais pourtant impossible de mettre la main là dessus !!!
(Peut-être que je n'utilise pas les bons mots clefs quand je cherche..)

Si vous pouviez m'aider en me donnant ce code ou en me disant ou je peux trouver ça ;-)

Grand merci d'avance'

PS :
Ce que j'avais trouvé c'était ça, mais ça marche pas :(

<head>
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/* PRECHARGEMENT DE L IMAGE DANS LE CACHE DU NAVIGATEUR */
if(document.images)
{
i854784 = new Image;
i854784 = "images/chap_legraph.jpg";
<!-- MON IMAGE DE REMPLACEMENT -->
}
</SCRIPT>
<!-- FIN DU SCRIPT -->
</head>

<!-- DEBUT DU SCRIPT -->
<A HREF="/WWWGRAPH./index.php" <!-- MA PAGE DE DESTINATION AU CLIC DE LA SOURIS -->
onMouseOver="i854784.src='images/chap_legraph.jpg'" <!-- MON IMAGE DE REMPLACEMENT -->
onMouseOut="i854784.src='images/chap_legraph_gris.jpg'"> <!-- MON IMAGE 1 DE BASE -->
<IMG SRC="images/chap_legraph_gris.jpg" BORDER=0 NAME="i854784" ALT="menu LE GRAPHIQUE" HSPACE=0 VSPACE=0>
</A>
<!-- FIN DU SCRIPT -->


A voir également:

2 réponses

Bonjour,
Le code que t'as récupéré me parait crédible à condition que tu crées les deux image : la normal et celle en réponse à l'évènement de passage de la souris, si ça ne marche pas merci de donner le lien de la page Web que tu as essayé de faire et on débugera
A bientôt
1
ambreambre Messages postés 19 Date d'inscription mercredi 7 avril 2010 Statut Membre Dernière intervention 8 mai 2010 5
7 mai 2010 à 15:21
Bin, j'ai bien créé les deux images. Bizarrement elles ne s'affichent pas :/ pourtant j'ai vérifié plusieurs fois les noms, les chemins, les dossiers.. bref' j'arrive pas à comprendre grrrr !
Bon je vais le mettre en ligne ce week-end et te donner l'adresse dès que c'est fait ;-) merci
0
ambreambre Messages postés 19 Date d'inscription mercredi 7 avril 2010 Statut Membre Dernière intervention 8 mai 2010 5
7 mai 2010 à 18:43
Alors c'est l'incompréhension totale parce que maintenant ça marche !!!

Cela faisait plusieurs jours que cela ne fonctionnait plus, même mes includes en php ne fonctionnaient plus ! et là tout est ok. Et je bosse en local donc cela ne peux même pas être une histoire de serveur problématique chez un hébergeur..
ça me rends dingue !!! ... o_0 ... !!!
Bon, je croise les doigts pour que ça dur ;-)

Merci pour votre aide !
0
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
6 mai 2010 à 11:14
Salut,

le script me parait aussi correct mais assez compliqué si tu ni connais vraiment rien..

je te propose une solution alternative plus simple a mon gout :p


<img src="images/imageDeBase.png" onmouseover="this.src='images/imageSurvole.png';" onmouseout="this.src='images/imageDeBase.png';" >



Explication :


this est l'élément courant
donc this.src la source de l'image
onmouseover (quand la souris survole l'élément)
onmouseover(quand on ne survole plus l'élément)

En esprérant avoir aidé :p

Adns
0
ambreambre Messages postés 19 Date d'inscription mercredi 7 avril 2010 Statut Membre Dernière intervention 8 mai 2010 5
7 mai 2010 à 15:24
Ok, mais dans ce code que tu me donnes je ne vois pas le lien vers une page ???

Car je voudrais un effet de survol sur mon image ET un lien vers une page quand je clic dessus.
0
jeangilles Messages postés 816 Date d'inscription samedi 21 juin 2008 Statut Membre Dernière intervention 17 juillet 2012 186
7 mai 2010 à 16:28
Oui, il manque un onclick
Un truc comme ceci devrait marcher :

<img src="images/imageDeBase.png" onmouseover="this.src='images/imageSurvole.png';" onmouseout="this.src='images/imageDeBase.png';" onclick="window.location = 'mettre_ici_l_url' ;" >
0
ambreambre Messages postés 19 Date d'inscription mercredi 7 avril 2010 Statut Membre Dernière intervention 8 mai 2010 5
8 mai 2010 à 12:49
comme je le disais dans un commentaire plus haut à Matt, finalement mon code fonctionne ^^
comprends pas ce qui c'est passé, (???) suis désolée :/

mais je vais tester quand même celui-ci juste pour voir !!!
merci beaucoup pour ton aide ;-)
0