Changer image en JS
Résolu
halima15
Messages postés
167
Date d'inscription
Statut
Membre
Dernière intervention
-
artragis Messages postés 481 Date d'inscription Statut Membre Dernière intervention -
artragis Messages postés 481 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je veux créer une fonction qui me permette de changer une image à chaque ke je passe la souris sur un lien
mais le probleme c'est que j'ai initilialisé l'image qui va s'afficher on load
et je veux quand je passe la souris sur le lien cette image qui se change
et le probleme que j'ai c'est que les images s'affiche dans une autre page
j'espére ke j'ai bien expliqué mon probleme
et Merci d'avance
je veux créer une fonction qui me permette de changer une image à chaque ke je passe la souris sur un lien
mais le probleme c'est que j'ai initilialisé l'image qui va s'afficher on load
et je veux quand je passe la souris sur le lien cette image qui se change
et le probleme que j'ai c'est que les images s'affiche dans une autre page
j'espére ke j'ai bien expliqué mon probleme
et Merci d'avance
A voir également:
- Changer image en JS
- Changer dns - Guide
- Changer clavier qwerty en azerty - Guide
- Changer carte graphique - Guide
- Image iso - Guide
- Changer wifi chromecast - Guide
3 réponses
tu veux faire un rollover, tu en as plusieurs type : les lourds, les fréquents bien écrits et les légers bien butors
mais surtout aujourd'hui il existe une technique simple : le CSS
avec le css voila ce que ça donne : code en deux partie :
1 le HTML
comme je l'ai mis il suffit d'une image à fond transparent
2Le CSS
avec un JS je te mets un code bien butor mais très léger, le but étant de te dégouter de cette solution :
mais surtout aujourd'hui il existe une technique simple : le CSS
avec le css voila ce que ça donne : code en deux partie :
1 le HTML
<img src="image_fond_transparent.gif" id="id_image_rollover"/>
comme je l'ai mis il suffit d'une image à fond transparent
2Le CSS
#id_image_rollover{
background-image:url('image_que_tu_veux_afficher');
}
#id_image_rollover:hover{//on met l'élément ":hover" pour dire "au passage de la souris"
background-image:('image_de_remplacement');
}
avec un JS je te mets un code bien butor mais très léger, le but étant de te dégouter de cette solution :
<img id="id_image_rollover" src="premiere_image" onmouseover="document.getElementById('id_image_rollover').src='image_remplacement.png'"/>
Voilà j'ai trouvé la solution
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function changerImage() {
var k=Math.floor(Math.random()*4);
switch(k) {
case 0:document.getElementById('image').src="Chaimaa.jpg";break
case 1:document.getElementById('image').src="Ilhame.jpg";break
case 2:document.getElementById('image').src="aya.jpg";break
case 3:document.getElementById('image').src="Imane.jpg";break
}
}
//-->
</script>
</head>
<body>
<a href="#" onmouseover="changerImage()">Cliquez ici pour changer l'image</a><br>
<img src="aya.jpg" width=100 height=100 id="image"></img>
</body>
</html>
et Bonne chance à vous tous:)
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function changerImage() {
var k=Math.floor(Math.random()*4);
switch(k) {
case 0:document.getElementById('image').src="Chaimaa.jpg";break
case 1:document.getElementById('image').src="Ilhame.jpg";break
case 2:document.getElementById('image').src="aya.jpg";break
case 3:document.getElementById('image').src="Imane.jpg";break
}
}
//-->
</script>
</head>
<body>
<a href="#" onmouseover="changerImage()">Cliquez ici pour changer l'image</a><br>
<img src="aya.jpg" width=100 height=100 id="image"></img>
</body>
</html>
et Bonne chance à vous tous:)
tu sait j'ai un autre probleme
je veux faire une liste déroulante qui porte les noms des images ,
et quand l'utilisateur selectionne un nom l'image s'affiche
et le meme probleme je veux qui'il s'affichage dans la même page et pas dans une autre
voilà ce que j'ai fait et ça marche pas
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function afficherImage() {
for(var i=0;i<document.formulaire.image.length;++i)
if(document.formulaire.image.options[i].selected == true)
document.formulaire.getElementById('image').src=document.formulaire.image.options[i].value;
}
//-->
</script>
</head>
<body onload="afficherImage()">
<form name="formulaire">
<select name="image"><option value="chaimaa.jpg">Chaimaa<option value="aya.jpg">Aya<option value="Imane.jpg">Imane<option value="ilham.jpg">Ilham</select>
<img src="chaimaa.jpg" id="image" width=100 height=100>
</form>
</body>
</html>
pouvez vous me donner la solution ou mon erreur
je veux faire une liste déroulante qui porte les noms des images ,
et quand l'utilisateur selectionne un nom l'image s'affiche
et le meme probleme je veux qui'il s'affichage dans la même page et pas dans une autre
voilà ce que j'ai fait et ça marche pas
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function afficherImage() {
for(var i=0;i<document.formulaire.image.length;++i)
if(document.formulaire.image.options[i].selected == true)
document.formulaire.getElementById('image').src=document.formulaire.image.options[i].value;
}
//-->
</script>
</head>
<body onload="afficherImage()">
<form name="formulaire">
<select name="image"><option value="chaimaa.jpg">Chaimaa<option value="aya.jpg">Aya<option value="Imane.jpg">Imane<option value="ilham.jpg">Ilham</select>
<img src="chaimaa.jpg" id="image" width=100 height=100>
</form>
</body>
</html>
pouvez vous me donner la solution ou mon erreur