Changement d'image au passage de la souris [Résolu/Fermé]

Signaler
-
Messages postés
16
Date d'inscription
dimanche 19 mai 2013
Statut
Membre
Dernière intervention
26 février 2014
-
Bonjour,
Je voudrais savoir comment faire pour changer une image au passage de la souris.
Je m'explique...
Je veux faire des liens avec des photos (comme un menu) et je voudrais une autre photo au moment ou l'utilisateur passe la souris.

Est-ce que quelqu'un aurait une solution pour moi (ce que je ne doute pas)
Merci pour vos futures reponses qui, je l'espere, seront rapides!

W.

9 réponses

C'est très simple


<html>
<head>
<title>
Test
</title>
<style type='text/css'>
a#test    { display:block;
				background-image: url('image1.png'); text-decoration: none; 
		}
a#test:hover{background-image: url('image2.png')
	 }
</style>
</head>
 
<body>
<a id='test' style="width:150px;height:56px;" href="javascript:function(){return false;}" >&nbsp;</a>
</body>
</html>


-Vous pouvez insérer le bloc de code css dans votre feuille css si vous en avez une
13
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 83995 internautes nous ont dit merci ce mois-ci

Messages postés
6282
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
386
Salut à tous,
Tu peux faire une CSS dans laquelle tu déclare ceci:

a { /* aspect du lien dans le site */
	img: mon_image; /* ce sera l'image de départ
	}
	
a:hover { /* image du lien survolé */
       img: ma-seconde_image; /* l'image au survol  du lien
	padding: 3px;
	}


ATTENTION ! il faut impérativement que les tailles des 2 images soient identiques !
Bon courage.

Le bonheur est la seule chose que l'on peut donner sans l'avoir.
Messages postés
6282
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
386
Salut willgie,
Tu ne sais pas ce que tu perds. Tu te faciliterai grandement la vie avec les feuilles de styles (CSS pour cascading style sheet).
Exemple: Tu veux que ton titre soit centré, en rouge, taille h1 et en verdana.
Et bien, au lieu de d'écrire ça à chaque balise <h1> tu fait une feuille de style séparée, et toutes les balises <h1> de toutes tes pages auront cette valeur.
voici la syntaxe:
// ma feuille de styles
h1 { /* aspect des titres du site */
font-family: verdana, arial, sans serif;
text-align: center;
color: #FF0000;
}
Tu enregistre cetta page en mon-style.css et tu met quelque part dans ton site.
Ensuite, dans tes pages, avant </head>, tu écrit:
<link href="mon_dossier/mon_style.css" rel="stylesheet" type="text/css"  />

Ceci t'évitera de mettre les <font> et </font> pour tes textes à chaque fois.
Pour cela tu peux faire:
body { /* taille et police du texte dans mes pages */
font-family: verdana;
font-size: 1em; /* taille relative de la police */
color: #0000FF; /* couleur bleue */
}

Tout les textes contenu dans le corp de la page (body) aura tes spécifications.
Maintenant, si tu ne veux avoir une spécifité dans une page particulière, où un paragraphe, tu peux créer une "classe":
Elle se distinguent par le point (.) qui précéde:
.toto { /* ce paragraphe sera en vert */
text align: left; /* texte aligné à gauche par exemple */
color: #669966; /* je ne me souviens plus du code héxadécimal pour le vert */
}
Ensuite tu applique ce style au paragraphe comme ceci:
<p class="toto"> mon paragraphe </p>

Voilà !
J'espère que j'ai été assez clair.
un site d'explication des css: http://fr.selfhtml.org/navigation/css.htm#ecriture
mais celui-ci est peut plus clair: https://openclassrooms.com/fr/courses#part_8

Le bonheur est la seule chose que l'on peut donner sans l'avoir.
Utilisateur anonyme >
Messages postés
6282
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017

Merci beaucoup pour ton explication qui est tres clair...

Je te le promet, etudier le CSS est dans mes projets!
Et je vais m'y mettre des que j'ai un peu de temps car je sais que ca simplifie tout mais je ne m'y etait jamais attarde.

Mais j'ai trouver une solution a mon probleme en utilisant le onmouseover, onmouseout... dont j'ai trouve le code sur un autre site (je ne sais plus lequel!)

je vais quand meme, une fois mes stylesheet crees, essaye ta methode.

Merci encore
W.
Messages postés
5
Date d'inscription
lundi 26 mai 2008
Statut
Membre
Dernière intervention
19 février 2012
>
Messages postés
6282
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017

Bonjour, je suis un débutant dans la création de site internet. Comme willgie, je voudrais que lorsque je passe la souris sur la photo (qui est un lien) celle-ci change. Je voudrais qu'elle passe d'une photo en niveau de gris à une photo en couleur (variation de l'opacité aussi en même temps). Si quelqu'un avait une solution en html si possible, cela me sauverait la vie. Je sais coder dans aucun langage même pas html. Merci.
>
Messages postés
5
Date d'inscription
lundi 26 mai 2008
Statut
Membre
Dernière intervention
19 février 2012

Salut Saluc42,

vas voir ici : http://www.infos-du-net.com/forum/97074-21-html-changer-image-survol-souris

j'espere que cela poura t'aider

a+
> Alex
alors la c sur sa vas tous nous aider !
Google ==> Image survolée (:

Ou pour les utilisateurs de Dreamweaver (testé sous CS5)

Insertion => Objets images => image survolée

A+
Messages postés
16
Date d'inscription
dimanche 19 mai 2013
Statut
Membre
Dernière intervention
26 février 2014

Bonjour, donc j'ai cherché hier sur ce topic et je n'ai pas trouvé la réponse alors j'ai décidé de faire moi même un système où il y a une grande image et 4 miniatures en dessous, et lorsque l'on passe le curseur sur l'une des miniatures, le grande est remplacé par la petite.




<!DOCTYPE html>
<body>
Ici je crée les variables où seront contenus les noms des images.(car je gère ça avec PHP normalement)
<script language="javascript">
url_image1 = 'image/lacoste1.jpg';
url_image2 = 'image/lacoste2.jpg';
url_image3 = 'image/vans2.jpg';
url_image4 = 'image/nike4.jpg"';
</script>

Ici, j'affiche la grande image au centre
<img id="image_articlee" class="image_article" src="image/lacoste2.jpg" alt="image du produit" />



Et ici, sont affichées les 4 miniatures qui sur l'évènement OnMouseOver remplaceront la grande image

<img onMouseOver="document.getElementById('image_articlee').src = url_image1;" style='width: 50px; border: solid 1px black;' id="image_article"  class="image_article" src="image/lacoste1.jpg" alt="image du produit" />

<img onMouseOver="document.getElementById('image_articlee').src = url_image2;" style='width: 50px; border: solid 1px black;' id="image_article"  class="image_article" src="image/lacoste2.jpg" alt="image du produit" />

<img onMouseOver="document.getElementById('image_articlee').src = url_image3;" style='width: 50px; border: solid 1px black;' id="image_article"  class="image_article" src="image/vans3.jpg" alt="image du produit" />
<img onMouseOver="document.getElementById('image_articlee').src = url_image4;" style='width: 50px; border: solid 1px black;' id="image_article"  class="image_article" src="image/nike4.jpg" alt="image du produit" />


</body>
</html>




faut utiliser un onmouseover....
je suis novice sur NVU, je viens de créer mon site et je voudrai juste que mes photos s agrandissent au passage de la souris !!!! quelqu' un pourrait m aider !! la plus simple des methodes sera la bienvenue biensur !! hihi merci
Bonjour
J'ai fait une image cliquable de tres grande taille [url]http://www.guildekameloth.com/MAP-ARCHLORD-TP-h11.htm[/url] et j'aimerai savoir si je pouvait afficher une image au passage de la souris sur les rond.
pour l'instant je peux juste ouvrir une fenetre sur l'image en cliquant dans le rond mais en plus sa n'ouvre pas une nouvelle page se qui me gêne un peux,je suit pas tres fort dans se genre de truc donc si vous avez une solution sa m'arangerai merci.^^
utilise la balise target dans ton lien =)

<A HREF="tapage.htm" TARGET="_blank">tontexteoutonimage</A>


voili voilou
Target blank n'est pas valide w3c
Pour un code valide il faut utiliser:
onclick="window.open(this.href); return false;"
bonjour,

j'ai testé énormément de code trouver sur le web pour le changement d'image au survole de celle-ci mais cela ne marche pas, enfin si mais que pour une image si j'en est plusieurs de la même page rien y fait sa ne marche pas, ma question est donc la suivante :

peut t-on en HTML ou CSS avoir dans une même page des survole d'image (bien sur différente !)

merci d'avance !