Changement d'image au passage de la souris
Résolu
Utilisateur anonyme
-
h4ckkids Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
h4ckkids Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Changement d'image au passage de la souris
- Changer de dns - Guide
- Quelle touche pour débloquer la souris ? - Guide
- Passage qwerty azerty - Guide
- Image iso - Guide
- Changement d'écriture facebook - Guide
9 réponses
C'est très simple
-Vous pouvez insérer le bloc de code css dans votre feuille css si vous en avez une
<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;}" > </a>
</body>
</html>
-Vous pouvez insérer le bloc de code css dans votre feuille css si vous en avez une
Salut à tous,
Tu peux faire une CSS dans laquelle tu déclare ceci:
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.
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.
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:
Ensuite, dans tes pages, avant </head>, tu écrit:
Ceci t'évitera de mettre les <font> et </font> pour tes textes à chaque fois.
Pour cela tu peux faire:
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:
<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.
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.
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.
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.
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.
Google ==> Image survolée (:
Ou pour les utilisateurs de Dreamweaver (testé sous CS5)
Insertion => Objets images => image survolée
A+
Ou pour les utilisateurs de Dreamweaver (testé sous CS5)
Insertion => Objets images => image survolée
A+
https://openclassrooms.com/forum/sujet/changer-text-en-image-au-passage-souris-11436
----------------------------------------
http://couleurs-du-webmaster.fr.cr/
----------------------------------------
http://couleurs-du-webmaster.fr.cr/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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>
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.^^
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.^^
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 !
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 !