Tom's Guide > Forum > Programmation > [HTML] comment changer d'image au survol de la souris

[HTML] comment changer d'image au survol de la souris

Forum Programmation : [HTML] comment changer d'image au survol de la souris

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
budylove@IDN   27-05-2005 à 14:04:27

bonjour

voila j'ai deux images, le bouton normal et l'image quand le bouton est survolé

je voulais savoir si il y a une propriete qui permet lors du survol de la premiere image qu'elle se transforme en l'image numero 2 ?

merci

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
Badge Programmation Bronze SiM07   27-05-2005 à 14:06:19
- 0 +

Cela se fait avec la fonction OnMouseOver et OnMouseOut va voir sur editeur javascript pour te faire un petit code

Répondre à SiM07
Rennou   27-05-2005 à 14:07:08
- 0 +

Bien sûr :

<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />

image1 : normale
image2 : sulvolée
image3 : enfoncée

Message cité 1 fois
Répondre à Rennou
gccyrillus   27-05-2005 à 17:55:15
- 1 +

bonjour,
pour te passer de javascript tu englobe une balise <a> dans une balise <div>


exemple
dans la partie head :

<style type="text/css">
#survol a {display:block;width:243px;
height: 98px;

background-image:url(imageafficherpardefaut.gif);
}
#survol a:hover{display:block;width:243px;
height: 98px;

background-image:url(imageaupassagedelasouris.jpg);
}
img{
border:0;
}
</style>

et dans la page

<body >
<div id="survol"><a href="#"></a></div>
</body>


et ça marche !
a plus

tu remet les dimension de ton image a la place de celle que j'ai indiquer, a propos tu peut encore mettre un texte sur ton image, voir une balise img avec un gif transparent, laisse ton imagination faire !

j'ajoute ici pour enlever vos doutes le code complet de la page que vous pourrez tester:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br>
<!-- declaration du doctype, ici une feuille codée en xhtml -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- la langue de la page -->
<head>
<!-- l'entete du document dans lequel peuvent figurer plusieurs
balises qui renseignent sur le contenu du document, comme le titre, le clavier/langue

utiliser, le "css", etc.
Ces informations ne seront pas affichées excepter pour le titre qui apparaitra dans la

barre du navigateur -->
<title>nom de votre page ou site web</title>
<!-- le titre -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<!-- encodage des caracteres, ici occidental -->
<!-- portions dans laquelle ont declare les styles -->
<style type="text/css">
#survol a,#survol1 a, #survol2 a {
display:block;
width:243px;
height: 98px;
text-decoration:none;
background-image:url(http://gcyrillus.free.fr/tructuto/tutokit/aspectvide.JPG);

}
#survol a:hover, #survol1 a:hover, #survol2 a:hover{
display:block;width:243px;
height: 98px;
background-image:url(http://gcyrillus.free.fr/tructuto/tutokit/aspectvidecolorer.JPG);
}
img{border:0;}
</style>
</head><!-- fin des informations concernant la pages -->
<body ><!-- contenu visible de la page -->
<p>Il est encore possible d'ajouter un gif transparent dans la balise <a> et, ou du

texte</p>
<div id="survol"><a href="#"></a></div>
<div id="survol1"><a href="#"><br/>   et hop un joli texte<br/>heu, juste du

texte !</a></div>
<div id="survol2"><a href="#"><br/>   une image : <img

src="http://www.infos-du-net.com/images/menu/compte.gif" alt="une

image"/><br/>            &nb

sp; 
et une autre !<img src="http://www.infos-du-net.com/images/menu/deco.gif" alt="une

image"/></a></div>
</body></html><!-- fin du document -->

Répondre à gccyrillus
Rennou   27-05-2005 à 19:02:52
- 0 +

Ah ouais, pas con ! ;-)

Répondre à Rennou
nicov113   08-11-2008 à 00:31:13
- 0 +

salut tout le monde! j'aimerai savoir comment déplacer un texte au survol de la souris c'est pour donner un style a mon tableau car la il est vraiment pourri

J'ESPERE QUE QUELQU'UN POURRA ME DONNER LE CODE (sans trop de difficulté dans le code car je suis un débutant ;) )

merci d'avance a mon sauveur de mon tableaux !!!

Répondre à nicov113
ElieA   04-01-2009 à 21:49:58
- 0 +

Rennou a écrit :

Bien sûr :

<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />

image1 : normale
image2 : sulvolée
image3 : enfoncée





Merci pour le tuyau, mais si je place deux images interactives, ça ne marche plus ... que dois-je taper entre chaque bloc pour les rendre indépendants et actifs ?
EA

Répondre à ElieA
Badge Programmation Bronze CRicky   04-01-2009 à 21:56:53
- 0 +

Pour les 2 dernier posts, il faut appeler des fonctions javascript (sur le onmouseover par exemple) dans laquelle on peut par exemple modifier le style d'un objet (comme faire varier la taille de la police).

Message cité 1 fois
------------------------------ 6800A007B81300CD10B00131C989CF26880541
81F900FA750230EDBADA03ECA80875FBECA808
74FBE4603C0175DFB80300CD10B8004CCD21
 Répondre à CRicky
ElieA   05-01-2009 à 17:18:32
- 0 +

CRicky a écrit :

Pour les 2 dernier posts, il faut appeler des fonctions javascript (sur le onmouseover par exemple) dans laquelle on peut par exemple modifier le style d'un objet (comme faire varier la taille de la police).




Merci, je m'amuse comme un gamin avec ces images interactives.
Autre question, sur le onmousedown peut-on envoyer un lien ?
Si ouiv merci (par avance) de donner la formule magique.
ElieA

Répondre à ElieA
Badge Programmation Bronze CRicky   05-01-2009 à 19:49:28
- 0 +

Tu peux toujours faire une redirection avec window.location.replace("tonlien" )

------------------------------ 6800A007B81300CD10B00131C989CF26880541
81F900FA750230EDBADA03ECA80875FBECA808
74FBE4603C0175DFB80300CD10B8004CCD21
 Répondre à CRicky
Ankaein   02-03-2009 à 23:16:47
- 0 +

Salut tout le monde,

même problème mais avec une subtilité,
Est-il possible de changer une autre image que celle qu'on survole à la souris ?

je m'explique :
j'ai une image principale et je voudrais que cette image-là varie en survolant une autre sans que celle qui est survolée ne soit modifiée.

dans ce cas, la taille des images devrait-elle également être identique ?

Merci d'avance


Message édité par Ankaein le 02-03-2009 à 23:21:19
Répondre à Ankaein
Badge Programmation Bronze CRicky   03-03-2009 à 20:24:48
- 0 +

Tu crées une fonction javascript (appelée au survol d'une image) dans laquelle tu modifie l'autre image.

------------------------------ 6800A007B81300CD10B00131C989CF26880541
81F900FA750230EDBADA03ECA80875FBECA808
74FBE4603C0175DFB80300CD10B8004CCD21
 Répondre à CRicky
Ankaein   04-03-2009 à 09:49:29
- 0 +

sinon, tu crois que c'est possible en CSS aussi ?
et pour la taille des images dans tout ça ?

j'tape un lien vers le site du zéro qui massacre en passant ;)
http://www.siteduzero.com


Message édité par Ankaein le 06-03-2009 à 01:15:22
Répondre à Ankaein
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [HTML] comment changer d'image au survol de la souris
Aller à :

Il y a 2665 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,223 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens