Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

remplacer 'src' et 'usemap' d'une image.

9 réponses
Avatar
philibus
Bonjour,Très débutant, j'essaie de créer un morceau de programme qui permettra de remplacer une image à liens multiples par d'autres images à liens multiples par survol des différents titres du menu.

J'ai écrit cette fonction Javascript :

Function survol (nom, adresse, carte) {document.images[nom].src=adresse; document.image[nom].usemap=carte;}

puis la liste des titres du menu et les événement s'y rattachant :

<a onmouseover="survol('photo','equipe1.jpg','#map1')">EQUIPE 1</a>
<a onmouseover="survol('photo','equipe2.jpg','#map2')">EQUIPE 2</a>
, etc..
<a onmouseover="survol('photo','equipe8.jpg','#map8')">EQUIPE 8</a>

puis vient l'image (name= "photo" src=''equipe1.jpg" usemap="#map1")
et enfin les différents 'maps' des différentes images à liens multiples.

Si les différentes photos s'affichent correctement selon le titre survolé par la souris, le 'map' reste désespérément celui de l'image numéro1 !!
Quelle erreur ai-je faite ? Ne me laissez pas mourir idiot ! !
D'avance, Merci
Philippe

9 réponses

Avatar
SAM
Le 2/19/09 10:07 PM, philibus a écrit :
Bonjour,Très débutant, j'essaie de créer un morceau de programme qui permettra
de remplacer une image à liens multiples par d'autres images à liens multiples
par survol des différents titres du menu.

J'ai écrit cette fonction Javascript :

Function survol (nom, adresse, carte) {document.images[nom].src­resse;
document.image[nom].usemapÊrte;}



Au jour d'aujourd'hui les images n'ont plus de nom mais un id,
le truc : document.images[nom]
ne doit plus pouvoir fonctionner (puisqu'il n'y a pas de name).

Outre que je plains les visiteurs qui devront attendre le changement de
vue au survol (s'apercevront-ils seulement qu'il était prévu qque
chose?), si ce que tu dis est vrai (qui utilise encore des maps pour des
menus ?) il y a de grandes chances que usemap soit read only.

function survol(nom, adresse, carte) {
var i = document.createElement('IMG');
i.id = nom;
i.alt = 'photo equipe';
i.title = 'Equipe N°'+adresse;
i.src = 'equipe' + adresse + '.jpg';
i.usemap = carte;
var cible = document.getElementById(nom);
cible.parentNode.replaceChild(i, cible);
}


Non testé


puis la liste des titres du menu et les événement s'y rattachant :

<a onmouseover="survol('photo','equipe1.jpg','#map1')">EQUIPE 1</a>



<a href="#" onclick="return false"
onmouseover="survol('photo', 1, '#map1');">EQUIPE 1</a>

puis vient l'image (name= "photo" src=''equipe1.jpg" usemap="#map1")



<img id="photo" alt="photo équipe" title="Equipe de tricot N°1"
src="equipe1.jpg" usemap="#map1">


et enfin les différents 'maps' des différentes images à liens multiples.



--
sm
Avatar
philibus
philibus a écrit le 19/02/2009 à 22h07 :
Bonjour,Très débutant, j'essaie de créer un morceau de
programme qui permettra de remplacer une image à liens multiples par
d'autres images à liens multiples par survol des différents
titres du menu.

J'ai écrit cette fonction Javascript :

Function survol (nom, adresse, carte) {document.images[nom].src­resse;
document.image[nom].usemapÊrte;}

puis la liste des titres du menu et les événement s'y rattachant
:

<a onmouseover="survol('photo','equipe1.jpg','#map1')">EQUIPE
1</a>
<a onmouseover="survol('photo','equipe2.jpg','#map2')">EQUIPE
2</a>
, etc..
<a onmouseover="survol('photo','equipe8.jpg','#map8')">EQUIPE
8</a>

puis vient l'image (name= "photo" src=''equipe1.jpg"
usemap="#map1")
et enfin les différents 'maps' des différentes images à
liens multiples.

Si les différentes photos s'affichent correctement selon le titre
survolé par la souris, le 'map' reste désespérément
celui de l'image numéro1 !!
Quelle erreur ai-je faite ? Ne me laissez pas mourir idiot ! !
D'avance, Merci
Philippe


Merci beaucoup pour votre réponse, et même si ma façon de procéder est dépassée, je vais tester ; c'est peut-être comme ça qu'on apprend, non ?
Philippe
Avatar
Bruno Desthuilliers
SAM a écrit :
Le 2/19/09 10:07 PM, philibus a écrit :
Bonjour,Très débutant, j'essaie de créer un morceau de programme qui
permettra
de remplacer une image à liens multiples par d'autres images à liens
multiples
par survol des différents titres du menu.

J'ai écrit cette fonction Javascript :

Function survol (nom, adresse, carte) {document.images[nom].src­resse;
document.image[nom].usemapÊrte;}



Au jour d'aujourd'hui les images n'ont plus de nom mais un id,
le truc : document.images[nom]
ne doit plus pouvoir fonctionner (puisqu'il n'y a pas de name).


>
Outre que je plains les visiteurs qui devront attendre le changement de
vue au survol (s'apercevront-ils seulement qu'il était prévu qque
chose?), si ce que tu dis est vrai (qui utilise encore des maps pour des
menus ?) il y a de grandes chances que usemap soit read only.



Pas sous FF3 en tous cas. Par contre, le nom de l'attribut est 'useMap',
pas 'usemap'.
Avatar
philibus
philibus a écrit le 19/02/2009 à 22h07 :
Bonjour,Très débutant, j'essaie de créer un morceau de
programme qui permettra de remplacer une image à liens multiples par
d'autres images à liens multiples par survol des différents
titres du menu.

J'ai écrit cette fonction Javascript :

Function survol (nom, adresse, carte) {document.images[nom].src­resse;
document.image[nom].usemapÊrte;}

puis la liste des titres du menu et les événement s'y rattachant
:

<a onmouseover="survol('photo','equipe1.jpg','#map1')">EQUIPE
1</a>
<a onmouseover="survol('photo','equipe2.jpg','#map2')">EQUIPE
2</a>
, etc..
<a onmouseover="survol('photo','equipe8.jpg','#map8')">EQUIPE
8</a>

puis vient l'image (name= "photo" src=''equipe1.jpg"
usemap="#map1")
et enfin les différents 'maps' des différentes images à
liens multiples.

Si les différentes photos s'affichent correctement selon le titre
survolé par la souris, le 'map' reste désespérément
celui de l'image numéro1 !!
Quelle erreur ai-je faite ? Ne me laissez pas mourir idiot ! !
D'avance, Merci
Philippe


Bravo Bruno !!!
Et merci encore ! Je vais pouvoir dormir tranquille la nuit prochaine !!
Il suffisait en effet de remplacer usemap par useMap et mon programme fonctionne exactement comme je le souhaite.
Philippe
Avatar
Bruno Desthuilliers
philibus a écrit :
(snip)

Bravo Bruno !!!
Et merci encore ! Je vais pouvoir dormir tranquille la nuit prochaine !!
Il suffisait en effet de remplacer usemap par useMap et mon programme
fonctionne exactement comme je le souhaite.



Avant de triompher, teste avec IE6, IE7, FF2, Safari et Opera (au moins).

<mode="puriste">
Et aussi, apprend à utiliser le DOM (notamment document.getElementById
et document.getElementsByTagName) et la gestion d'évènement.

Ah, et pendant qu'on y est: elle marche comment, sans javascript, ta page ?
</mode>
Avatar
SAM
Le 2/20/09 9:48 AM, Bruno Desthuilliers a écrit :

le nom de l'attribut est 'useMap', pas 'usemap'.



Plus fort que du roquefort !
Un attribut qui en JS prend une majuscule qque part !

Oui, bon ... il y a au moins : className
Mébon ce n'est pas 'clAss' par exemple.

--
sm
Avatar
Bruno Desthuilliers
SAM a écrit :
Le 2/20/09 9:48 AM, Bruno Desthuilliers a écrit :

le nom de l'attribut est 'useMap', pas 'usemap'.



Plus fort que du roquefort !
Un attribut qui en JS prend une majuscule qque part !

Oui, bon ... il y a au moins : className



Et tabIndex et isMap... entre autres...

Mébon ce n'est pas 'clAss' par exemple.



Nom, c'est "class name". Et c'est tout aussi logique pour "use map".
Enfin bon, mes deux centimes, hein ?-)
Avatar
SAM
Le 2/20/09 6:46 PM, Bruno Desthuilliers a écrit :
SAM a écrit :
Le 2/20/09 9:48 AM, Bruno Desthuilliers a écrit :

le nom de l'attribut est 'useMap', pas 'usemap'.



Plus fort que du roquefort !
Un attribut qui en JS prend une majuscule qque part !

Oui, bon ... il y a au moins : className



Et tabIndex et isMap... entre autres...

Mébon ce n'est pas 'clAss' par exemple.



Nom, c'est "class name". Et c'est tout aussi logique pour "use map".



Heu ... je me demande ... ?

Enfin bon, mes deux centimes, hein ?-)



Une petite révision s'impose là :-(
Tu n'as pas une url pour la liste complète ?
(un digest)

--
sm
Avatar
davel_x
SAM a écrit :
Le 2/20/09 6:46 PM, Bruno Desthuilliers a écrit :
SAM a écrit :
Le 2/20/09 9:48 AM, Bruno Desthuilliers a écrit :

le nom de l'attribut est 'useMap', pas 'usemap'.



Plus fort que du roquefort !
Un attribut qui en JS prend une majuscule qque part !

Oui, bon ... il y a au moins : className



Et tabIndex et isMap... entre autres...

Mébon ce n'est pas 'clAss' par exemple.



Nom, c'est "class name". Et c'est tout aussi logique pour "use map".



Heu ... je me demande ... ?

Enfin bon, mes deux centimes, hein ?-)



Une petite révision s'impose là :-(
Tu n'as pas une url pour la liste complète ?
(un digest)




Est-ce que ça ne viendrait pas de la remarque (Note) qui se trouve en
bas de page là :
http://www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html

Et vu que la même convention de nommage est utilisée en ActionScript
(issu d'ECMA aussi), je penche vers cette conclusion.

--
**davel**
http://www.davel.fr/blog/