Image qui bouge quand curseur passe [Résolu/Fermé]

Signaler
-
Messages postés
60
Date d'inscription
jeudi 12 novembre 2009
Statut
Membre
Dernière intervention
13 février 2010
-
Bonjour,

Dans la colonne de droite de mon blog créé avec Wordpress, j'ai ajouté des images avec liens.

Le probleme, quand on passe le curseur dessus, c'est que :


1) Les images bougent d'environ 1 centimetre en diagonale...

2) Un cadre apparait...



Le code html dans mon widget est pourtant tout simple:

<a href="monsite/forum"target="_blank"> <img src=" monsite/images/image.jpg"></a>



Pourriez-vous m'aider a ce que les images ne bougent plus et qu'il n'y ait plus de cadre ??? J'ai bien cherche sur google et n'ai rien trouvé...


Merci !!!

15 réponses

Messages postés
18503
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
27 janvier 2021
4 251
Dans la partie de code suivante, supprime la ligne soulignée :
#sidebar a:hover{
background-color:#8C8C79;
text-decoration:none;
display: block;
color:#fff;
margin: 0px;
padding: 5px 7px 5px 7px;
border-bottom: 1px solid #f2f2f2;
}
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63550 internautes nous ont dit merci ce mois-ci

Genial, merci pour tout ! Je kiffe de plus en plus les css !
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
208
Qu'as-tu déclaré comme styles pour le a:hover ?
Voila ce qu'il y a dans ma feuille de style:


#sidebar img, #sidebar img a, #sidebar img a:hover{padding: 5px; margin: 0; border:none;}




C'est celui la ?
> samcop84
Qqn pourrait me dire a quel endroit de la feuille de style je dois trouver la ligne a changer ?

Merci d'avance!
Messages postés
18503
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
27 janvier 2021
4 251
Pour avoir un code valide :
<a href="monsite/forum" onclick="window.open(this.href); return false;"> <img src="monsite/images/image.jpg" alt="" /></a>


Pour le CSS, le problème est bien dans la ligne que tu as donné.
Voilà le code corrigé :
#sidebar img, #sidebar img a, #sidebar img a:hover{margin: 0; border:none;} 
Merci bcp pour ton aide, j'ai fait tout ce que tu as dit mais malheureusement ca ne veut toujours pas marcher :(


Voici la partie de la feuille de style qui pose probleme apparemment:





/* sidebar */

#sidebar {
font-family: verdana, arial, tahoma;
font-size:8pt;
font-weight:bold;
width:240px;
float:right;
margin:0;
padding: 0;

}

#sidebar h2{
font:normal 11pt arial, georgia, times;
color: #5C6A73;
font-weight:bold;
margin: 0;
padding: 0;
padding-top:10px;
text-transform:uppercase;
}

#sidebar label{
font:normal 11pt arial, georgia, times;
color: #000;
margin: 0;
padding: 0;
}

#sidebar p {margin:0; padding: 0 6px 0 8px;}



#sidebar img, #sidebar img a, #sidebar img a:hover{margin: 0; border:none;}

#sidebar ul {
margin:12px;
padding:0;
}

#sidebar ul li {
margin: 0;
padding: 0;
line-height: 14pt;
list-style-type: none;
}

#sidebar ul ul {
margin:14px 0;
padding:0;
}

#sidebar ul ul li {
list-style-type: none;
}

#sidebar ul ul ul{
margin: 0;
padding: 0;
}

#sidebar ul ul ul li{
padding: 0 0 0 0px;
list-style-type: none;
color: #898989;
}

#sidebar li a{

text-decoration:none;
display: block;
color:#575757;
text-decoration: none;
margin: 0px;
padding: 5px 7px 5px 7px;
border-bottom: 1px solid #f2f2f2;
}

#sidebar a:hover{
background-color:#8C8C79;
text-decoration:none;
display: block;
color:#fff;
margin: 0px;
padding: 5px 7px 5px 7px;
border-bottom: 1px solid #f2f2f2;
}

#sidebar a:active{
background-color:#364022;
text-decoration:none;color:#fff;
}
Messages postés
60
Date d'inscription
jeudi 12 novembre 2009
Statut
Membre
Dernière intervention
13 février 2010

voici un javascripte
<script type="text/JavaScript">
<!--
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;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<body onLoad="MM_preloadImages('chemin de la photo1XXX')"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','chemin ed la photo2XXX',1)"><img src="file:///C|/Documents and Settings/soufianecreator/Bureau/webinvent/1.jpg" name="Image1" width="1700" height="2338" border="0"></a>
Messages postés
60
Date d'inscription
jeudi 12 novembre 2009
Statut
Membre
Dernière intervention
13 février 2010

:d
Messages postés
18503
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
27 janvier 2021
4 251
@soufianecreator : Javascripte ? C'est nouveau ?
Messages postés
60
Date d'inscription
jeudi 12 novembre 2009
Statut
Membre
Dernière intervention
13 février 2010

oups j'ai oublier le dernier lien
Messages postés
18503
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
27 janvier 2021
4 251
Et il sert à quoi ton script ?
C'est quoi le rapport avec ce topic ?
Messages postés
60
Date d'inscription
jeudi 12 novembre 2009
Statut
Membre
Dernière intervention
13 février 2010

tu vois pas ou koi
c ce sont deux image qui bouge au survole de la souris
Messages postés
18503
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
27 janvier 2021
4 251
Justement le but c'est de ne pas faire bouger le lien (et pas une image).
Je ne penses pas qu'un code aussi lourd que le tiens soit nécessaire pour un effet rollover.
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
208
Soufiane... on va peut-être arrêter là les noms d'oiseaux ?
Avion a raison : le script que tu as collé-copié de dreamwaever n'a rien à faire dans la problématique de départ et est inadapté.

Je pense que le sujet est clos (Avion tu le mets en résolu ?)
Messages postés
18503
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
27 janvier 2021
4 251
C'est fait.
Messages postés
18503
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
27 janvier 2021
4 251
Non, je suis spyder-man !
Puis moi je ne dors pas à 10h55 !
De toutes façons, tu es hors sujet, et je n'ai pas d'ordres à recevoir par un débutant comme toi.
Messages postés
60
Date d'inscription
jeudi 12 novembre 2009
Statut
Membre
Dernière intervention
13 février 2010

mais que'est ce que tu crois t'est superman
couche toi tu n'as aucun chose avec moi allé éloigne toi de ma vue pffff
Messages postés
60
Date d'inscription
jeudi 12 novembre 2009
Statut
Membre
Dernière intervention
13 février 2010

tu sais même pas pti égoïste
Messages postés
60
Date d'inscription
jeudi 12 novembre 2009
Statut
Membre
Dernière intervention
13 février 2010

bien dsl pr le derrangemnt dans cet discussion