Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] OneClick qui affiche une image ( Galaxie ds Ogame )

Ssin
    19 août 2006 à 11:21:32

    Bonjour,

    J'aimerais connaitre le JS qui permet d'ouvrir une petite image dans laquelle ont peut glisser des informations, comme dans le menu "Galaxie" de Ogame quand on clique sur une planète.

    Voila une illustration :

    Image utilisateur

    La fenètre "Planète Assaland" s'ouvre quand on met la souris sur une des images derrière, représentant une planète .

    Je crois savoir que si je met mon image de ce type la :

    <img src="../images/..........gif" height="22" width="22" alt="Nourriture">


    Le alt affiche quelque chose quand la souris est dessus. On m'a dit que je pouvais glisser un Onemouseover en JS.

    Que faire ?

    Merci d'avance !!!
    • Partager sur Facebook
    • Partager sur Twitter
    Sitevolution
      19 août 2006 à 12:32:39

      premièrement, je te corriges tout de suite, toutes les fonctions Javascript qui commence par ON, c'est pas OneMouseOver, mais OnMouseOver ! et c'est pas non plus OneClick, mais OnClick ! ;)

      ensuite, le alt est le texte qui s'affiche si l'image ne peut pas être affichée, c'est l'attribut title qui te sert à afficher du texte au passage de la souris sur une image (ou même sur autre chose), mais cette attribut ne te permet pas de faire une fenêtre comme ça.

      Deux méthodes possibles



      1ère méthode



      Pour réaliser ce que tu demandes, tu dois utiliser la fonction Javascript OnClick dans ta balise <img />.
      Comme ça, des que l'on clique sur l'image, ce que tu voudras apparaîtra, donc pour faire apparaître une fenêtre, c'est comme ça :
      <img src="chemin_de_ton_image" alt="texte remplacant" title="texte qui s'affiche au passage de la souris (petit texte)" onclick="window.open('fenetre.html','informations','toolbar=0,menubar=0,location=0,scrollbars=0,width=400,height=300')"; />

      mais avec cette méthode tu dois créer une page pour chaque fenêtre d'information !


      2ème méthode



      cette deuxième méthode est un peu plus longue, mais elle n'utilise pas de Javascript, donc pas de risque que le visiteur ne puisse pas voir la fenêtre !
      Pour cette méthode, tu dois faire ceci pour ta balise <img /> :
      <div id="image1">
      <img src="ton_image" />
      <div id="fenetre1">
      Je suis une fenêtre d'exemple !!!
      <!--le contenu de ta fenêtre-->
      </div></div>

      Puis, tu dois mettre ce CSS dans une feuille de style ou entre les balises <style>, elles mêmes placées entre les balises <head> :
      #fenetre1//,#fenetre2,#fenetre3,etc... autant de fois que tu as des fenêtres différents (il faudra changer l'id pour chaque fenêtre et image dans le code HTML)
      {
          display : none;
      }

      #image1:hover #fenetre1//,#image2:hover #fenetre2,#image3:hover #fenetre3, etc... comme avant
      {
          display : block;
          width : 40%;
          position : absolute;
          top : 50%;
          left : 30%;
          border : 3px double white;
          color : white;
          background-color : black;
      } 

      et c'est tout ! pourtant cela va donner exactement ce que tuveux, le seul problème est que tu dois mettre autant de ",#fenetre*" et de ",#image*" que tu as de fenêtre à ouvrir !

      bonne chance à toi !!! @+
      • Partager sur Facebook
      • Partager sur Twitter
      Ssin
        19 août 2006 à 15:48:42

        Bonjour, et merrci beaucoup sitevolution

        J'ai trouver le script qu'il me faut, mais j'ai encore un probleme : mon onMouseOver n'est pas asser "large"

        Voila ce que cela donne quand je clique sur la ligne :

        Image utilisateur

        Voici mon code :

        <!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" lang="en" xml:lang="en">
        <head>
        <title>La Terre des Anciens</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
                                                                                        .infobulle{
                                                                                                position: absolute;     
                                                                                                visibility : hidden;
                                                                                                border: 1px solid Black;
                                                                                                padding: 50px;
                                                                                                font-family: Verdana, Arial;
                                                                                                font-size: 10px;
                                                                                                background-color: #FFFFCC;
                                                                                        }
                                                                        </style>
        </head>
        <body>
                                        <script language="javascript" type="text/javascript">
                                        <!--
                                        function GetId(id)
                                        {
                                        return document.getElementById(id);
                                        }
                                        var i=false; // La variable i nous dit si la bulle est visible ou non
                                       
                                        function move(e) {
                                          if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
                                            if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
                                            GetId("curseur").style.left=e.pageX + 5+"px";
                                            GetId("curseur").style.top=e.pageY + 10+"px";
                                            }
                                            else { // Modif proposé par TeDeum, merci à lui
                                            if(document.documentElement.clientWidth>        0) {
                                                GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
                                                GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
                                            }
                                            else {
                                                GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
                                                GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
                                            }
                                            }
                                          }
                                        }
                                       
                                        function montre(text) {
                                          if(i==false) {
                                          GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
                                          GetId("curseur").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
                                          i=true;
                                          }
                                        }
                                        function cache() {
                                        if(i==true) {
                                        GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
                                        i=false;
                                        }
                                        }
                                        document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
                                        //-->
                                        </script>
        <div id="overall_container">

                <div id="logo">
                  <object         type="application/x-shockwave-flash"
                                  data="header.swf"
                                width="830"
                                height="213">
                <param name="movie" value="header.swf" />
            <param name="quality" value="high" />
            </object>
            </div>

                <div id="content">
                        <div id="box_area">
                                <div id="box_left_deco"></div>
                                <div id="box_content">
                                        <div id="realbox_header">

                                        </div>
                                        <div id="realbox_content">
                                        <br>
                                        <? include 'calculressources.php'; ?><br />
                                        Vous pouvez ici acheter vos unités militaire, recruter des mercenaires, etc ...
                                        </div>
                                        <div id="realbox_footer">
                                        </div>
                                </div>

                        </div>
                        <div id="postbox_area">
                                <div id="postbox_left_deco">
                                <a class ="copyrights" href="empire.php">Apercu de Votre Nation</a><br>
        <br>
        <a class ="copyrights" href="gestionterres.php">Gestion de Vos Terres</a><br>
        <br>
        Gestion de Vos Armées<br>
        <br>
        Votre Confrérie<br><br>
        Actes Diplomatiques<br><br>
        <a class ="copyrights" href="profil.php">Votre Personnage</a><br><br>
        <a class ="copyrights" href="messagerie.php">Votre Pigonnière</a><br><br>
         </div>
                                <div id="postbox_content">
                   <div id="curseur" class="infobulle"></div>
                           <p onmouseover="montre('Ici je met tout le texte que je veut , <b>meme de l\'html</b> !');" onmouseout="cache();">Un paragraphe avec une info bulle !</p>
                  <a href="#" onmouseover="montre('Vie : , Attaque : , Defense :');" onmouseout="cache();">Un lien avec une info bulle</a></p> 
        • Partager sur Facebook
        • Partager sur Twitter
        Sitevolution
          19 août 2006 à 17:37:13

          rajoutes dans ton CSS :
          .infobulle p
          {
              width : 20%;
          }

          essaies ceci, ça devrait fonctionner ! ;)

          PS : j'espère que tu comprends le code que tu as, sinon c'est inutile de l'avoir mis ! :)
          • Partager sur Facebook
          • Partager sur Twitter

          [JS] OneClick qui affiche une image ( Galaxie ds Ogame )

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown