Bug IE mouseover

Bonjour,

Je me lance dans la création d'un nouveau site internet et je rencontre des soucis avec IE. Au passage de la souris, mes images disparaissent avec une croix rouge en haut à gauche. J'ai appliqué un mouseover sur ces images et visiblement IE n'arrive pas à comprendre ou trouver l'image pour la remplacer au passage de la souris.

Y a-t-il un moyen de rectifier ça?

Voici la page test: one.voice.free.fr

et mon code java:

$(document).ready(function() {
$("img[name='imgOver']").mouseover(function() {
var extension=$(this).attr("src").substr(-4);
var srcImg=$(this).attr("src");
if(srcImg.indexOf("fonce")==-1) {

var newName=srcImg.substr(0,srcImg.length-4)+"-fonce"+extension;

}
$(this).attr("src",newName);
});

$("img[name='imgOver']").mouseout(function() {
var extension=$(this).attr("src").substr(-4);
var srcImg=$(this).attr("src");
var newName=srcImg.substr(0,srcImg.length-10)+extension;
$(this).attr("src",newName);
});


D'avance merci pour votre aide !

Bonsoir,

il me semble que IE ne réagit pas au "name" du élément img, mais plutôt à l' id.

Bonsoir merci de prendre le temps de réfléchir à mon problème.

En changeant avec l'id ça ne marche pas non plus...

re,

merci de prendre le temps de lire les règles de ce forum....comme la mise en page de tes posts?
pour la présentation de ton code, avant que Laurie-Anne te tombe dessus...

avec ton "code java" , c'est clair, cela ne va pas marcher.

les effets du style "rollover" sont pourtant simples. Et ici, ce sera vraisemblablement pour des liens. Un changement de couleur du texte (effet recherché, non?) au passage de la souris sur des liens, moi je le voyais en css...

en même temps une feuille de style externe, mais du style dans les balises quand même...
finalement, c'est un problème ou plusieurs?

bon, j'ai pas répondu à la question, mais une piste tout de même :

dans chacun de tes liens :

onmouseover="document.name.src='lien vers la nouvelle image'"
onmouseout="document.name.src='lien vers l' ancienne image'"

le name ici, c'est imgOver pour toi. (mais comme déjà dit, sous IE, cela ne marchera pas avec name, il faut coller un name et un id semblable, et donc changer de name pour chaque lien, enfin avec 4 liens en même temps...)

il est possible également de le coller en externe, mais pour cela, il faut une astuce sur les noms des images.

ok merci je vais essayer de changer ça!
Modifié par Lunakya (24 Nov 2011 - 08:22)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.


Accessoirement, il n'y a absolument aucune chance que ton code passe au compilateur Java... Parce que ce n'en est pas. C'est du JavaScript. Et la différence entre les deux est un peu comme celle entre une pomme et un chat...


Bonne continuation

Bonjour, j'ai une question similaire me semble-t-il :

Je souhaite qu'au passage de la souris sur un div, l'image change mais j'arrive à rien. Mais la contrainte est que j'ai une class CSS tiledlb commune à plusieurs DIV et c'est pourquoi je mets le onmouseover dans le "style=" directement.

<div class="tiledbl" id="ssgp" style="background-image: url('/images/tiles/anim.gif');" onmouseover="document.ssgp.src='/images/tiles/texte.png';" ></div>

J'ai essayé aussi sans succès :

onMouseOver="this.style.backgroundImage=url('/images/tiles/text.png');"
onMouseOver="this.background-image='/images/tiles/text.png';"

Connaissez vous une solution ou alors dois-je créer dans mon CSS autant de div différentes (j'en ai 5 mais quand même, ça serait lourd je trouve) qu'en pensez-vous ?
merci
christophe

Avé,
La seule méthode que j'ai trouvé est d'utiliser la balise <a> dans la <Div> :

<style type="text/css">
a.test:link {
 width: 290px;
 height: 140px;}

a.test:hover   {
 background-image: url(/images/tiles/texte.png);}
</style>

<div id="ssgp"><a href="" class="test" ></a></div>

Bonjour,

humm, un div à l'origine vide, oui....enfin, perso, non.

dans ton div, tu colles un img, css en display none, un onmouseover dans l'élément img qui appelle une fonction machin.

côté javascript :

function machin() {
document.getElementById("id de l'image").style.display = "inline";
}