Javascript et balise map

Résolu/Fermé

to-me Messages postés 72 Date d'inscription mercredi 20 août 2008 Statut Membre Dernière intervention 26 mars 2010 - 20 août 2008 à 14:16
to-me Messages postés 72 Date d'inscription mercredi 20 août 2008 Statut Membre Dernière intervention 26 mars 2010 - 22 août 2008 à 09:22

Bonjour,

J'ai une page html, avec deux images superposées image1 et image2. image1 au début ne possède pas d'attribut src car je la veut transparente. Suivant le clic sur l'une des petites photos présentes sur image2 je souhaite que image1 apparaisse avec la petite photo. Mais je ne sais pas comment adapter mon code javaScript pour cela.

function ouvreimage() {

// ouvre l'image sur le premier plan de la page à partir du click sur une des photos sur image2

onclick = document.getElementById('zoneimage').innerHTML='<img src="photo1.jpg" />';

}

Les zones de clic sont faits avec les balises <map>

<area id="photo1" shape="rect" coords="100,8,300,20" href="javascript:ouvreimage()">

Merci d'avance pour votre attention...

A voir également:

Javascript et balise map
Google map satellite gratuit - Guide
Telecharger javascript - Télécharger - Langages
Telecharger carte google map - Guide
Itinéraire google map entre deux adresses - Guide
Coordonnées gps google map - Guide

8 réponses

Réponse 1 / 8

gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
21 août 2008 à 09:34

Bonjour,

t'inquiète, tonton Gaetan est encore là ! (^_^)'

Essaye cela:

function visibilite(thingId)
{
var targetElement = document.getElementById(thingId).style.display ;
if (targetElement == "none")
targetElement = "" ;
else 
targetElemen = "none" ;
}

<div id="id_div_1" style="display:none;">CE TEXTE EST INVISIBLE AU DEPART</div>

<img id="zoneimage" src="" style="display:block; position:absolute; left:220px; top:99px; width:500px; height:300px; z-index:1; cursor: pointer " width="137" height="132" onclick="visibilite('id_div_1')" />

Une fois de plus, je ne peux pas te garantir que ça marchera car je test pas les codes que je te donne ... ^^

Bon, j'ai modifié quelques trucs:

- Dans ta fonction, j'ai allégé pas mal
- Ton div contenais l'image mais tu le mettais invisible et tu mettais l'image visible à l'intérieur, c'est pas terrible ... donc j'ai fermer le div avant de mettre l'image donc en gros, l'image n'est plus dans le div.
- J'ai mis une main sur l'image POUR QUE L'ON CROIT que ce soit un lien (j'insiste bien sur le fait que s'en est pas un ! ^^)
- Heu j'ai retiré le 'javascript:' sur l'événement onclick car il sert juste qu'on on met du code javascript et là on appelle juste une fonction. J'ai aussi retiré le 'return false' (test avec et test sans si ça ne marche pas)
- Tu passais à ta fonction l'id en paramètre MAIS tu fermais les simple quote avant la fin du nom
Tu mettais ça ==> 'id_div'_1
au lieu de ça ==> 'id_div_1'

Donc ça ne pouvait pas marcher ...

Test et redis moi ;)

A+

Gaerebut

to-me Messages postés 72 Date d'inscription mercredi 20 août 2008 Statut Membre Dernière intervention 26 mars 2010 8
21 août 2008 à 12:04

Bonjour!

Franchement, chapeau! J'aurais pas mieux fait pour optimiser mon code avec celle que tu m'as donné soit:

function ouvre_image() {
document.getElementById('zoneimage').innerHTML='<img src="photo1.jpg" alt="photo"/>';
}

<area id="photo1" shape="rect" coords="100,8,300,20" onclick="ouvre_image()">

Elle marche du tonnerre. En ce qui concerne la visibilité de la div j'ai du abandonner l'idée, une fois l'image ouverte, en cliquant dessus on la rend invisible mais si l'usager veut revoir les photos, cela devient impossible car on ne peut agir sur un objet non visible.
Alors j'ai changé voilà ce que j'ai fais, j'ai utilisé une image transparente. Finalement ça fonctionne sauf sous ie, aucun onclick ne répond :-(

Voici la partie html:

-de la photo qui est le lien pour changer transparent.gif en image1.jpg dans image1

<img id="image1" src="./image1.jpg" title="image 1" style="width:93px; height:69px;" onclick="ouvreimage1();return false;">

- de l'image1, le onclick remet l'image transparente si l'utilisateur ne veut plus voir les images en grand:

<img id="zoneimage" src=" " style="display:block; position:absolute; left:220px; top:121px; width:500px; height:300px; z-index:1; " onclick="javascript:transparent()">

Je crois que j'ai tout essayé sans succés.

Est-ce que c'est moi qui ne voit pas l'erreur?

Réponse 2 / 8

gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
21 août 2008 à 14:02

Re,

bon, apriori j'ai trouvé ce qui marche pas!
Essaye ce code et dit moi :

function visibilite(thingId)
{
var targetElement = document.getElementById(thingId);
if (targetElement.style.display == "none")
targetElement.style.display = "block" ;
else 
targetElement.style.display = "none" ;
}

<div id="id_div_1" style="display:none;">CE TEXTE EST INVISIBLE AU DEPART</div>

<img id="zoneimage" src="" style="display:block; position:absolute; left:220px; top:99px; width:500px; height:300px; z-index:1; cursor: pointer " width="137" height="132" onclick="visibilite('id_div_1')" />

Si ça ne marche pas, c'est peut-être que sous ie, tu bloque le Javascript ! lol

A+

Gaerebut

Réponse 3 / 8

gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
20 août 2008 à 14:25

Salut,

essaye de remplacer le href du <area ... par onclick et d'enlever le onclick de ta fonction et de mettre directement l'instruction document.GetEl....

Donc en gros ça donne ceci:

function ouvre_image() {
document.getElementById('zoneimage').innerHTML='<img src="photo1.jpg" alt="photo"/>';
} 

<area id="photo1" shape="rect" coords="100,8,300,20" onclick="ouvre_image()">

A+

Gaerebut

Réponse 4 / 8

to-me Messages postés 72 Date d'inscription mercredi 20 août 2008 Statut Membre Dernière intervention 26 mars 2010 8
20 août 2008 à 14:33

Re,

Merci pour ton aide et ta réponse rapide.

Maintenant avec ce code je ne peux ouvrir qu'une photo et comme il existe 5photos je suis obligé de créer 5fonctions pour les 5 <area>.

Ne saurais tu pas comment optimiser mon code?

Merci.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
20 août 2008 à 14:51

Ok!

heu est-ce que ce sera fixe ou tu pourra dans l'avenir rajouter ou supprimer des photos ?

Sinon, t'a cas essayer ceci :

function ouvre_image(image, photo) {
document.getElementById(image).innerHTML='<img src="'+photo+'" alt="photo"/>';
} 

<area id="photo1" shape="rect" coords="100,8,300,20" onclick="ouvre_image('zoneimage1','photo1.jpg')">
<area id="photo2" shape="rect" coords="200,9,400,30" onclick="ouvre_image('zoneimage2','photo2.jpg')">
<area id="photo3" shape="rect" coords="300,10,500,40" onclick="ouvre_image('zoneimage3','photo3.jpg')">
<area id="photo4" shape="rect" coords="400,11,600,50" onclick="ouvre_image('zoneimage4','photo4.jpg')">
<area id="photo5" shape="rect" coords="500,12,700,60" onclick="ouvre_image('zoneimage5','photo5.jpg')">

Bon, j'ai mis n'importe quoi pour les coordonées, j'ai mis des ID différents et des nom de zone ainsi que des nom d'image en JPG!
A toi d'adapter ton code!

Essayes le et dit moi ;)

A+

Gaerebut

to-me Messages postés 72 Date d'inscription mercredi 20 août 2008 Statut Membre Dernière intervention 26 mars 2010 8
20 août 2008 à 19:14

MERCI!

Je ne pourrais tester le code que demain car je ne suis pas sur mon lieu de travail. Promis je te tiens au courant
Dsl d'en demander tant mais entre temps j'ai essayé de caché image1 tant qu'on a pas cliqué sur une photo(ce qui complique la chose c'est que les photos ne sont pas des liens <a> mais des <area>)

Voici le code javascript

function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}

voici la partie html

<div id="id_div_1" style="display:none;">

<img id="zoneimage" src="" style="display:block; position:absolute; left:220px; top:99px; width:500px; height:300px; z-index:1; " width="137" height="132" onclick="javascript:visibilite('id_div'_1); return false;">

</div>

mais ça ne fonctionne pas. image1 est invisible mais un clic sur une photo ne le rend pas visible.
Ensuite j'essaie de faire l'opération inverse, au début image 1 est visible et un click sur lui même doit le rendre invisible.

J'ai cherché partout mais les autres utillisent des liens pour conditions du genre

<a href="javascript:cacheId('contenu');">Fermer</a>

mais ça ne correspond pas à mon travail.

S.O.S

Merci

Réponse 6 / 8

gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
21 août 2008 à 12:26

Si c'est possible regarde ici (clique sur le menu de droite "Mon compte" pour voir que ça marche), le div est invisible et se réaffiche:

==> http://socializebeta.ithink.fr/_v1/

Sinon, essaye ce code là plutôt.

Peut-être que ça marchera.

function visibilite(thingId)
{
var targetElement = document.getElementById(thingId).style.display ;
if (targetElement == "none")
targetElement = "block" ;
else 
targetElement = "none" ;
}

<div id="id_div_1" style="display:none;">CE TEXTE EST INVISIBLE AU DEPART</div>

<img id="zoneimage" src="" style="display:block; position:absolute; left:220px; top:99px; width:500px; height:300px; z-index:1; cursor: pointer " width="137" height="132" onclick="visibilite('id_div_1')" />

Redis moi

A+

Gaerebut

Réponse 7 / 8

to-me Messages postés 72 Date d'inscription mercredi 20 août 2008 Statut Membre Dernière intervention 26 mars 2010 8
21 août 2008 à 12:52

Merci Gaerebut! t'es un As, ça marche je viens de le tester mais ça ne correspond pas à la demande "d'en haut".
Merci encore tout de même j'ai quand même appris. De mon côté, j'ai localisé le pb le onclick dans mes balises images ne sont pas compatibles avec IE mais je ne trouve pas de solutions...

A+

Réponse 8 / 8

to-me Messages postés 72 Date d'inscription mercredi 20 août 2008 Statut Membre Dernière intervention 26 mars 2010 8
22 août 2008 à 09:22

Bonjour gaerebut,

voici une solution: il faut mettre une balise <div> à la place de <img> et dans le code javascript définir une balise <img> qui contient l'image agrandie.Ainsi, Le onclick fonctionne sous IE.

Merci encore pour tes conseils, corrigés et remarques.
C'est sympa!

A+

Discussions similaires

la balise <br> ou <br />

Balise </br>

balise <br> HTML

Javascript Arrondi à 2 chiffres après la virgule

Discussions similaires

Newsletters