Problème avec le Script: IMAGE QUI CHANGE AU SURVOL DE LA SOURIS image ... [Résolu]
A voir également:
- Problème avec le script: image qui change au survol de la souris image ...
- Image qui change au survol de la souris - Codes sources - Javascript (Effets)
- Un bouton image qui change d'image au survol de la souris. - Codes sources - Java (Divers)
- Tri naturel inverse sur script images avec pagination ✓ - Forum - PHP
- Changer le volume avec la souris - Codes sources - Visual Basic / VB.NET (Souris, Clavier, etc…)
- Flash : Changer le curseur de la souris dans une animation. - CodeS SourceS - Guide
14 réponses
Oulala toute un usine à gaz pour faire un rollover... Un simple CSS suffirait amplement.
1- Créé une images avec les deux états sur le même plan (normal / survolé). Tu trouveras ton image à l'adresse suivante :
http://siteecom.net/tmp/regarderenstreaming.png
2- Il te suffit de créer ton lien avec la bonne CSS :
<style type="text/css">
a.btnStream{
display: block;
height: 112px;
width: 382px;
background: transparent url(adresse_de_ton_image) no-repeat 0 0;
}
a.btnStream:hover{
background-position: 0 -112px;
}
</style>
[adresse_du_lien ]
Aperçu ici :
http://siteecom.net/tmp/stream.html
A+
1- Créé une images avec les deux états sur le même plan (normal / survolé). Tu trouveras ton image à l'adresse suivante :
http://siteecom.net/tmp/regarderenstreaming.png
2- Il te suffit de créer ton lien avec la bonne CSS :
<style type="text/css">
a.btnStream{
display: block;
height: 112px;
width: 382px;
background: transparent url(adresse_de_ton_image) no-repeat 0 0;
}
a.btnStream:hover{
background-position: 0 -112px;
}
</style>
[adresse_du_lien ]
Aperçu ici :
http://siteecom.net/tmp/stream.html
A+
a.btnStream
>> le "a" est un sélecteur de tags (ici les ancres [adresse_du_lien ]
[adresse_du_lien ]
>> le "a" est un sélecteur de tags (ici les ancres [adresse_du_lien ]
[adresse_du_lien ]
Bien le bonjour, j'ai localisé le problème, mais alors pour l'expliquer...
J'ai regarder le site fournis, et c'est la que tout marche plus.
Avec Firebug, j'ai jeter un coup d'oeil au javascript et je me suis rendu compte que les "&&" c'était transformé en "&"; alors le pourquoi du comment, c'est une autre paire de manche, mais dans l'idée l'erreur vient de la !
Peut-être un "remplacer" un peu violent ?
fonction d'origine:
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
fonction sur le site:
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
???
[o-_-o]
J'ai regarder le site fournis, et c'est la que tout marche plus.
Avec Firebug, j'ai jeter un coup d'oeil au javascript et je me suis rendu compte que les "&&" c'était transformé en "&"; alors le pourquoi du comment, c'est une autre paire de manche, mais dans l'idée l'erreur vient de la !
Peut-être un "remplacer" un peu violent ?
fonction d'origine:
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
fonction sur le site:
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
???
[o-_-o]
Merci d'avoir prit le temps de me répondre Zobibol,
Donc, l'erreur vient de là:
Fonction d'origine:
function MM_swapImgRestore() { //v3.0
var i,x,a= document.MM_sr; for(i=0;a && i&</gras></souligne>&&(x =a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
Je fais quoi maintenant pour corrigé cette erreur ?? " sachant que j'ai remplacé les && du petit passage par & "
merci de répondre
Donc, l'erreur vient de là:
Fonction d'origine:
function MM_swapImgRestore() { //v3.0
var i,x,a= document.MM_sr; for(i=0;a && i&</gras></souligne>&&(x =a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
Je fais quoi maintenant pour corrigé cette erreur ?? " sachant que j'ai remplacé les && du petit passage par & "
merci de répondre
non, le code Scriptque l'administrateur du smkdgg.com m'avais passé ne fonction pas sur mon site, comme sur le tienne !
et je veux que vous m'aidiez à trouver se qui ne vas pas et corriger si possible l'erreur " en sachant que j'utilise firfox comme navigateur de recherche "
et je veux que vous m'aidiez à trouver se qui ne vas pas et corriger si possible l'erreur " en sachant que j'utilise firfox comme navigateur de recherche "
Merci beaucoup
[auteur/XTREMDUKE/15638.aspx XtremDuke],
j'ai tester est sa fonction très bien
" j'aime bien votre façon d'expliquer ... , vous êtes trop cool ^^, je vous note 20/20 "
@++ tard
[auteur/XTREMDUKE/15638.aspx XtremDuke],
j'ai tester est sa fonction très bien
" j'aime bien votre façon d'expliquer ... , vous êtes trop cool ^^, je vous note 20/20 "
@++ tard
Bon soir,
Le code que vous m'aviez donner [auteur/XTREMDUKE/15638.aspx XtremDuke]fonction très bien, mais je voulus tester de mettre plusieur boutan de se type à la fois dans un même code CSS mais sa ne fonction pas , voila mon teste:
<style type="text/css">
a.btnStream{
display: block;
height: 127px;
width: 382px;
background: transparent url(http://img381.imageshack.us/img381/7757/caaabtee2pk1.png) no-repeat 0 0;
}
b.btnStream{
display: block;
height: 112px;
width: 382px;
background: transparent url(http://siteecom.net/tmp/regarderenstreaming.png) no-repeat 0 0;
}
a.btnStream:hover{
background-position: 0 -127px;
}
b.a.btnStream:hover{
background-position: 0 -112px;
}
</style>
[adresse_du_lien ]
lol je sais qu'il a plusieurs erreur , je veux que ses 2 boutons envoit vers 2 liens déferants ^^
merci de m'aider
Le code que vous m'aviez donner [auteur/XTREMDUKE/15638.aspx XtremDuke]fonction très bien, mais je voulus tester de mettre plusieur boutan de se type à la fois dans un même code CSS mais sa ne fonction pas , voila mon teste:
<style type="text/css">
a.btnStream{
display: block;
height: 127px;
width: 382px;
background: transparent url(http://img381.imageshack.us/img381/7757/caaabtee2pk1.png) no-repeat 0 0;
}
b.btnStream{
display: block;
height: 112px;
width: 382px;
background: transparent url(http://siteecom.net/tmp/regarderenstreaming.png) no-repeat 0 0;
}
a.btnStream:hover{
background-position: 0 -127px;
}
b.a.btnStream:hover{
background-position: 0 -112px;
}
</style>
[adresse_du_lien ]
lol je sais qu'il a plusieurs erreur , je veux que ses 2 boutons envoit vers 2 liens déferants ^^
merci de m'aider
merci beaucoup pour votre aide et l'explication [auteur/XTREMDUKE/15638.aspx XtremDuke] je change rien 20/20
Bon jour,
J'ai toujour un petit problème , sa fonction pas , en plus j'ai fais tous ce que vous avez dis
voila le code après la modification:
<style type="text/css">
a.btnStream{
display: block;
height: 27px;
width: 382px;
background: transparent url(http://larbi.ad.free.fr/images/2_films_amazighs.png) no-repeat 0 0;
}
a.btnStream_2{
display: block;
height: 27px;
width: 382px;
background: transparent url(http://larbi.ad.free.fr/images/2_humour_amazighs.png) no-repeat 0 0;
}
a.btnStream:hover{
background-position: 0 -27px;
}
a.btnStream_2:hover{
background-position: 0 -27px;
}
</style>
[adresse_du_lien ]
[adresse_du_lien ]
voila le résultat sur cette page: http://larbi.ad.free.fr/index.php?file=Page&name=test22
merci de m'aider
J'ai toujour un petit problème , sa fonction pas , en plus j'ai fais tous ce que vous avez dis
voila le code après la modification:
<style type="text/css">
a.btnStream{
display: block;
height: 27px;
width: 382px;
background: transparent url(http://larbi.ad.free.fr/images/2_films_amazighs.png) no-repeat 0 0;
}
a.btnStream_2{
display: block;
height: 27px;
width: 382px;
background: transparent url(http://larbi.ad.free.fr/images/2_humour_amazighs.png) no-repeat 0 0;
}
a.btnStream:hover{
background-position: 0 -27px;
}
a.btnStream_2:hover{
background-position: 0 -27px;
}
</style>
[adresse_du_lien ]
[adresse_du_lien ]
voila le résultat sur cette page: http://larbi.ad.free.fr/index.php?file=Page&name=test22
merci de m'aider
en effet ma page teste ne fonction plus
voila j'ai fais 2 imprs écran:
1er: image normale sans passage de la souris => http://img357.imageshack.us/img357/6803/imprim1ru0.jpg
2eme: image entrain de survole par la souris => http://img357.imageshack.us/img357/7281/imprim2ml4.jpg
merci pour l'aide
voila j'ai fais 2 imprs écran:
1er: image normale sans passage de la souris => http://img357.imageshack.us/img357/6803/imprim1ru0.jpg
2eme: image entrain de survole par la souris => http://img357.imageshack.us/img357/7281/imprim2ml4.jpg
merci pour l'aide
C'est bon j'ai trouvé mon erreur
au lieu de 72px j'avais mis 27px lol
voila le bon code:
<style type="text/css">
a.btnStream{
display: block;
height: 72px;
width: 382px;
background: transparent url(http://larbi.ad.free.fr/images/2_films_amazighs.png) no-repeat 0 0;
}
a.btnStream_2{
display: block;
height: 72px;
width: 382px;
background: transparent url(http://larbi.ad.free.fr/images/2_humour_amazighs.png) no-repeat 0 0;
}
a.btnStream:hover{
background-position: 0 -72px;
}
a.btnStream_2:hover{
background-position: 0 -72px;
}
</style>
[adresse_du_lien ]
[adresse_du_lien ]
@ la prochaine
au lieu de 72px j'avais mis 27px lol
voila le bon code:
<style type="text/css">
a.btnStream{
display: block;
height: 72px;
width: 382px;
background: transparent url(http://larbi.ad.free.fr/images/2_films_amazighs.png) no-repeat 0 0;
}
a.btnStream_2{
display: block;
height: 72px;
width: 382px;
background: transparent url(http://larbi.ad.free.fr/images/2_humour_amazighs.png) no-repeat 0 0;
}
a.btnStream:hover{
background-position: 0 -72px;
}
a.btnStream_2:hover{
background-position: 0 -72px;
}
</style>
[adresse_du_lien ]
[adresse_du_lien ]
@ la prochaine