affichage image avec onmousever et IE

**lewis34** · 06/11/2009, 20h55

Bonsoir,
je viens vous demander de l'aide car j'ai un petit soucis d'affichage avec des images qui doivent changer au survol de la souris .
Cela fonctionne impeccablement bien avec FF mais comme d'habitude IE fait des siennes et ne veut pas m'afficher l'image adequat quand je survol le lien.

Donc j'ai une image avec une opcité de 35% par defaut et au survol j'affiche l'image à 100%

voici le code original

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<div class="contenu"  >
    <a href="association/actualite.php?id=1"  id="lien_association"  onMouseOver = "document.getElementById('imglienassociation').src='billetterie/images/logo_association.png'; " onMouseOut = "document.getElementById('imglienassociation').src='billetterie/images/logo_association35.png'; "><img id="imglienassociation" class="imglien" src="billetterie/images/logo_association35.png" alt="actus" title="xxxxxxxxxxxx" width="212" height="158"   /></a>

ce code fonctionne parfaitement mais seulement avec FF quand je test sou IE

Il me semble que sous IE, la reponse attendu pour les element ne sont pas des document.getElementById, mais des getElementsByName, donc evidemment j'ai testé, mais sans resultat, dans le debogage (j'ai active le deboguage et j'utilise debugbar) il me renvoie une erreur document.getElementsByName("name") est nul...

dans l'urgence j'ai fait un petit script rapide en JS pour tester le navigateur et adapter
le voici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
function survol_over(element)
{
/* script pour faire fonctionner le mouser sous IE et FF
quand on utilise directement un machin du style élément....
FF attend un ID, IE un name ! 
*/
				//alert(document.getElementsByTagName("IMG").length);======> sous IE renvoi 0
 
 
	var image_fond=''
	//recup du nav
	var nav=navigateur();
	var Form='';
	var rep='billetterie/images/';
	switch(nav)
	{
		case'FF':	
			switch(element)
			{
				case'imglienassociation':
 
				document.getElementById("imglienassociation").src=rep+'logo_association.png';
				break;
				case'imglienbilletterie':
				document.getElementById("imglienbilletterie").src=rep+'logo_billetterie.png';
				break;
				case'imgliencontact':
				document.getElementById("imgliencontact").src=rep+'logo_contact.png';
				break;
				case'imglienprogramme':
				document.getElementById("imglienprogramme").src=rep+'logo_programme.png';
				break;
				case'imglienpartenaire':
				document.getElementById("imglienpartenaires").src=rep+'logo_partenaires.png';
				break;
				case'imglienexpo':
				document.getElementById("imglienexpo").src=rep+'exposition.png';
				break;
			}
 
		break;
 
		case'IE':
			switch(element)
			{				document.getElementsByName("imglienassociation").src=rep+'logo_association.png';
				break;
				case'imglienbilletterie':
				document.getElementsByName("imglienassociation").src=rep+'logo_billetterie.png';
				break;
				case'imgliencontact':
				document.getElementsByName("imglienbilletterie").src=rep+'logo_contact.png';
				break;
				case'imglienprogramme':
				document.getElementsByName("imglienprogramme").src=rep+'logo_programme.png';
				break;
				case'imglienpartenaire':
				document.getElementsByName("imglienpartenaires").src=rep+'logo_partenaires.png';
				break;
				case'imglienexpo':
				document.getElementsByName("imglienexpo").src=rep+'exposition.png';
				break;
			}
		break;
		default:
			switch(element)
			{
				case'imglienassociation':
				document.getElementById("imglienassociation").src=rep+'logo_association.png';
				break;
				case'imglienbilletterie':
				document.getElementById("imglienbilletterie").src=rep+'logo_billetterie.png';
				break;
				case'imgliencontact':
				document.getElementById("imgliencontact").src=rep+'logo_contact.png';
				break;
				case'imglienprogramme':
				document.getElementById("imglienprogramme").src=rep+'logo_programme.png';
				break;
				case'imglienpartenaire':
				document.getElementById("imglienpartenaires").src=rep+'logo_partenaires.png';
				break;
				case'imglienexpo':
				document.getElementById("imglienexpo").src=rep+'exposition.png';
				break;
			}
		break;
 
	}
}

le navigateur est bien recupere je precise.

Je reajoute que j'ai testé sous toutes les formes possible
document.getElementsByTagName("IMG") avec img majuscule/minuscule
document.getElementsByTagName[le_rang]
document.getElementsByTagName("le_name")
et idem en enlevant le Tag, bref je nage

si vous pourriez m'indiquez une piste ou alors sur l'erreur que j'ai faite et que je ne vois pas je vous en serais redevable

merci par avance

Invité · 06/11/2009, 21h05

jour

c'est bizarre car ce genre de chose marche tres bien

sinon dans ce que tu met si c'est la meme chose que ton fichier la balise div n'est pas ferme

**lewis34** · 06/11/2009, 21h21

merci de ta rapidité, non non , mon div est bien fermée, la j'ai mis que le premier lien pour exemple (y'en a 6 en tout avec des images différentes)

ca marche en général mais pas sur cette page... va savoir pourquoi.
mon doctype est ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">

en lisant ton message que cela etait peut etre du ustement à un tag non fermé, j'ai tout reverifier je viens de percuter que je n'ai pas essayé en le changeant.. peut etre cela viens de la, je vais tester en transitional.

je vous tiens au courant..

edit en changeant le doctype cela ne change rien IE veut pas de mes images

**Bovino** · 07/11/2009, 08h28

Essaye en évitant les espaces entre le nom de l'attribut, le "=" et la valeur de l'attribut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="association/actualite.php?id=1"  id="lien_association"  onMouseOver="document.getElementById('imglienassociation').src='billetterie/images/logo_association.png'; " onMouseOut="document.getElementById('imglienassociation').src='billetterie/images/logo_association35.png'; ">

**lewis34** · 07/11/2009, 10h33

Probleme resolu ce matin...

le soucis venait d'un script que j'avais fait en js qui me permettait d'afficher les png24 sans le fond bleu.

je l'ai donc desactivé et enregistrer mes png24 en png 8

la ça fonctionne merci a ceux qui m'ont guidés sur d'autres pistes

bonne journée

affichage image avec onmousever et IE

JavaScript

Discussions similaires

Partager

Partager