IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Image et Maparea


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2011
    Messages : 5
    Par défaut Image et Maparea
    Bonjour,

    J'ai une image avec une maison qui comporte 4 fenêtres. Je souhaiterais pouvoir allumer les différentes pièces de cette maison en cliquant sur les fenêtres. (je débute en Javascript)

    J'ai déjà une fonction pour "allumer" une de mes fenêtres. Cependant, j'aimerais pouvoir les allumer une par une puis les éteindre une par une.

    Actuellement, ma fenêtre en haut à gauche s'allume puis s'éteint et c'est tout. Je ne peux plus la rallumer. Comment faire pour pouvoir l'allumer et l'éteindre indéfiniment? Puis, suffit-t-il d'appliquer l'événement OnClick pour que cela s'applique à toutes les fenêtres?

    Voici ma fonction :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    function swapPic(zone,nr){
    	var pic=document.getElementById('crofthouse')
    	pic.src='images/'+nr+'.jpg'
    	zone.onclick=function(){pic.src='images/0000.jpg'}
    }
    et ma div avec mon image et mes zones cliquables :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <div id="myImage" style=" width:auto; height:auto;">
     <img src="images/0000.jpg" alt="0000" usemap="#housemap" id="crofthouse" style="border:1px solid red;" title=" All Off " />
       <map id="mymap" name="housemap">
         <area shape="rect" coords="206,139,225,167" title="Top Left" onClick="swapPic(this,1000)">
         <area shape="rect" coords="355,138,374,166" title="Top Right" >
         <area shape="rect" coords="206,194,225,227" title="Bottom Left" >
         <area shape="rect" coords="353,195,374,227" title="Bottom Right" >
         <area shape="rect" coords="278,195,300,242" title="The Door" >
       </map>
     </div>
    Pouvez-vous m'aider? Je cherche une démarche à suivre et je ne veux pas de réponse en code, simplement une voie qui peut me conduire à la solution !

    [EDIT]
    Petite précision :
    J'ai déjà nommé toutes mes images. J'ai tous les états possibles soit 16images.
    Si la fenêtre en haut à gauche est allumé, mon image est noté comme ceci : 1000.
    1 => fenêtre en haut à gauche allumée
    0 => fenêtre en haut a droite éteinte
    0 => fenêtre en bas à gauche éteinte
    0 => fenêtres en bas à droite éteinte

    Et, ainsi de suite, je pense que vous avez compris l'idée !
    [/EDIT]

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Tu as du rater ceci lors de tes recherches préliminaires ...http://www.developpez.net/forums/d96...-larea-survol/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2011
    Messages : 5
    Par défaut
    Merci, je vais essayer de comprendre ce tuto !

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2011
    Messages : 5
    Par défaut
    Alors, j'ai compris le tuto mais le soucis c'est que je ne peux pas allumer 2 fenêtres en même temps donc ce n'est pas la finalité que je désire. Comment faire pour garder l'état précédent des différentes régions cliquables?

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Bien sur que si ...
    Les gifs étant transparents, il te suffit de modifier la façon dont les partie allumées s'affichent et par exemple stocker leur été (allumé ou éteint) dans un array que tu parcourres au click d'un area !
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Octobre 2011
    Messages : 5
    Par défaut
    Ok merci ! Je vais essayer cela

Discussions similaires

  1. Resize d'une image
    Par Anonymous dans le forum C
    Réponses: 6
    Dernier message: 13/07/2008, 22h23
  2. recherche des algorythmes pour images 2d
    Par exxos dans le forum Algorithmes et structures de données
    Réponses: 3
    Dernier message: 24/05/2002, 13h46
  3. lire une image au format RAW
    Par Anonymous dans le forum OpenGL
    Réponses: 5
    Dernier message: 20/05/2002, 00h11
  4. faire un selection dans une image aves les APIs
    Par merahyazid dans le forum C++Builder
    Réponses: 3
    Dernier message: 30/04/2002, 10h44
  5. Création image BMP
    Par Anonymous dans le forum C
    Réponses: 2
    Dernier message: 25/04/2002, 16h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo