Changement d'image au passage de la souris
Résolu/Fermé
Utilisateur anonyme
-
18 févr. 2007 à 09:01
h4ckkids Messages postés 16 Date d'inscription dimanche 19 mai 2013 Statut Membre Dernière intervention 26 février 2014 - 19 mai 2013 à 18:19
h4ckkids Messages postés 16 Date d'inscription dimanche 19 mai 2013 Statut Membre Dernière intervention 26 février 2014 - 19 mai 2013 à 18:19
A voir également:
- Changement d'image au passage de la souris
- Quelle touche pour débloquer la souris ? - Guide
- Piratage facebook changer mot de passe - Guide
- Image iso - Guide
- Changement d'écriture - Guide
- Acronis true image - Télécharger - Sauvegarde
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
txiki
Messages postés
6597
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
515
18 févr. 2007 à 12:47
18 févr. 2007 à 12:47
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.
txiki
Messages postés
6597
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
515
19 févr. 2007 à 07:53
19 févr. 2007 à 07:53
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.
Utilisateur anonyme
>
txiki
Messages postés
6597
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
21 févr. 2007 à 02:26
21 févr. 2007 à 02:26
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.
saluc42
Messages postés
5
Date d'inscription
lundi 26 mai 2008
Statut
Membre
Dernière intervention
19 février 2012
>
txiki
Messages postés
6597
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
26 mai 2008 à 22:34
26 mai 2008 à 22:34
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.
Alex
>
saluc42
Messages postés
5
Date d'inscription
lundi 26 mai 2008
Statut
Membre
Dernière intervention
19 février 2012
19 août 2008 à 00:53
19 août 2008 à 00:53
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+
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+
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
h4ckkids
Messages postés
16
Date d'inscription
dimanche 19 mai 2013
Statut
Membre
Dernière intervention
26 février 2014
19 mai 2013 à 18:19
19 mai 2013 à 18:19
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 !
