Aligner les calques sur une image

par **orgerix** » 02 avr. 2007, 17:59

Merci.

Par contre, ca marche toujours pas. Par exemple, si je veux que mon calque commence au coin superieur droit, je met donc*

div#i56 {
position:absolute;
left:1204px;
top:100px;
visibility:hidden;
background-color:#ffffce;
border: 1px solid black;

<area shape="rect" onmouseover="document.getElementById('i56').style.visibility='visible';" onmouseout="document.getElementById('i56').style.visibility='hidden';" href="localisation.php?id=56" coords="1181,100,1204,128" />

Et ca décale toujours... (par rapport en haut surtout)

par **Cyrano** » 02 avr. 2007, 14:18

Heu, pourtant ce code marche sur IE...

Peut-être bien, mais IE est assez laxiste et cette syntaxe est invalide.

J'ai repris ton code et testé ceci en ajoutant de quoi "voir" l'espace occupé par l'image que je n'ai pas et ça semble fonctionner, teste toi-même pour voir :

Code : Tout sélectionner

<?xml version="1.0" encoding="windows-1252"?>
<!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" xml:lang="fr">
<!-- Date de création: 02/04/2007 -->
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>Roll-over sur image mappée</title>
    <meta http-equiv="imagetoolbar" content="no" />
    <meta http-equiv="Content-language" content="fr" dir="ltr" />
    <meta http-equiv="charset" content="iso-8859-1" />
    <style type="text/css">
    /* <![CDATA[ */
    /* On positionne le contenant pour pouvoir positionner le contenu */
      a#mon_bloc {
          display: block;
          position: relative;
          width: 100px;
          height: 50px;
          text-decoration: none;
      }
      /* On positionne le bloc de texte, mais on le masque (display); */
      a#mon_bloc span {
          display: none;
          position: absolute;
          top: 0;
          left: 101px;
          width: 100px;
          height: 50px;
          color: #333;
          background-color: #ccc;
          border: 1px solid #c33;
          text-align: center;
      }
      /* On affiche le bloc de texte au survol */
      a#mon_bloc:hover span {
          display: block;
      }
      /* Comme on utilise une ancre (balise <a>), on protège certains éléments de l'image afin de garder un aspect normal */
      a#mon_bloc img {
          border: none;
          cursor: default;
      } 
      img#mon_image_1 {
          width: 100px;
          height: 100px;
      }
    /* ]]> */
    </style>
    <style type="text/css">
    /* <![CDATA[ */
    div#i56 {
        position:absolute; 
        left:1219px; 
        top:135px; 
        visibility:hidden; 
        background-color:#ffffce; 
        border: 1px solid black;
    }
    img#imgcarte {
        border: 1px solid #0ff;
        width: 1200px;
        height: 200px;
    }
    /* ]]> */
    </style>
  </head>
  <body>
    <map name="carte">
      <area shape="rect" onmouseover="document.getElementById('i56').style.visibility='visible';" onmouseout="document.getElementById('i56').style.visibility='hidden';" href="localisation.php?id=56"  coords="1181,100,1204,128" />
    </map>
    <div style="position:relative;">
      <div id="i56">Text</div>
      <a href="profil.php">Modifier son mot de passe</a>
      <img id="imgcarte" src="creercarte.php" usemap="#carte" alt="" />
    </div>
  </body>
</html>

Tu noteras que j'ai renommé ton id "56" en "i56" (i pour "image"), sinon, ça ne fonctionne pas sous Firefox.

par **orgerix** » 02 avr. 2007, 13:49

Heu, pourtant ce code marche sur IE...

Pour revenor à ma question, pour que les valeur de top et left soient en fonction des coordonées de l'image, il sffit que je rajoute une balise div qui englobe tout avec comme style position=relative.

Code : Tout sélectionner

<style type="text/css"> 
#56{position:absolute; left:1219px; top:135px; visibility:hidden; background-color:#ffffce; border: 1px solid black;} 
</style> 
<map name="carte"> 
<area shape="rect" onmouseover="document.getElementById('56').style.visibility='visible';" onmouseout="document.getElementById('56').style.visibility='hidden';" href="localisation.php?id=56"  coords="1181,100,1204,128" /> 
</map> 
<div style="position:relative;"><div id="56">Text<br></div><a href="profil.php">Modifier son mot de passe</a> 
<img src="creercarte.php" usemap="#carte"></div>

par **Cyrano** » 01 avr. 2007, 22:34

Attention : la valeur d'un attribut id ne peut pas commencer par un chiffre.

par **orgerix** » 01 avr. 2007, 21:46

J'ai pas de problème a faire les calque, mais j'aimerai juste savoir comme faire pour que les valeur de top et left soi en fonction du coin en haut à gauche de l'image. Voila mon code :

Code : Tout sélectionner

<style type="text/css">
#56{position:absolute; left:1219px; top:135px; visibility:hidden; background-color:#ffffce; border: 1px solid black;}
</style>
<map name="carte">
<area shape="rect" onmouseover="document.getElementById('56').style.visibility='visible';" onmouseout="document.getElementById('56').style.visibility='hidden';" href="localisation.php?id=56"  coords="1181,100,1204,128" />
</map>
<div id="56">Text<br></div><a href="profil.php">Modifier son mot de passe</a>
<img src="creercarte.php" usemap="#carte">

par **Cyrano** » 01 avr. 2007, 18:49

Non, dans ce cas, ton texte devrait être en relatif et non en absolu, l'image n'étant pas un contenant. Je crois que je commence à avoir une idée de ce que tu veux faire, voici une autre approche. Il serait plus cohérent de faire la chose suivante :

Code : Tout sélectionner

<a id="mon_bloc" href="/." onclick="return false;"><img src="image_xyz.jpg" id="mon_image_1" /><span>Mon texte alternatif</span></a>

L'évènement onclick permet d'annuler l'effet du clic sur l'image : on utilise l'astuce de la balise <a> pour ajouter l'effet de texte au survol de l'image par le pointeur de souris.

Et le CSS :

Code : Tout sélectionner

/* On positionne le contenant pour pouvoir positionner le contenu */
p#mon_bloc {
    position: relative;
}
/* On positionne le bloc de texte, mais on le masque (display); */
a#mon_bloc span {
    display: none;
    position: absolute;
    top: 0;
    left: 200px;
    width: 100px;
    height: 50px;
    color: #333;
    background-color: #ccc;
    border: 1px solid #c33;
}
/* On affiche le bloc de texte au survol */
a#mon_bloc:hover span {
    display: block;
}
/* Comme on utilise une ancre (balise <a>), on protège certains éléments de l'image afin de garder un aspect normal */
a#mon_bloc img {
    border: none;
    cursor: default;
}

Essaye ça et reviens nous dire si ça t'ouvre une piste de solution satisfaisante

par **orgerix** » 01 avr. 2007, 14:11

Ok, donc selon mon exemple, ca donnerai quelque chose comme ca :

Code : Tout sélectionner

<img src="image_xyz.jpg" id="mon_image_1" alt="" />
<div id="mon_calque1"> Un texte </div>
</img>

avec img en relatif et div en absolu, et les coordonée que je rentrerai dans les attribut lfet et top seront calculé partir du coin suprieur gauche de l'image.

J'ai raison ?

J'utilise ca surtout comme alternative au texte alternatif avec les événement OnmouseOver et OnMouseOut, en jouant sur la visibilité.

par **Cyrano** » 01 avr. 2007, 12:56

Le terme de "calque" est un abus de langage en CSS, mais bon, peu importe.

Le problème est lié au positionnement. Un élément de bloc peut être positionné par rapport au premier élément parent qui sera lui-même positionné. Si aucun élément parent ne l'est, alors le positionnement de ton élément se fera par rapport à <body> et donc à ta fenêtre. TU dois donc mettre le bloc contenant ton image avec une position, par exemple, relative :
-1- le HTML :

Code : Tout sélectionner

<div id="mon_calque1">
  <img src="image_xyz.jpg" id="mon_image_1" alt="" />
</div>

-2- le CSS :

Code : Tout sélectionner

/* Positionnement du contenant */
div#mon_calque {
    position: relative;
    top: 0;
    left: 0;
    width: 80%;
    height: 200px;
}
/* Positionnement de l'image */
img#mon_image_1 {
    width: 250px;
    height: 120px;
    position: absolute; /* l'image sera positionnée par rapport au bloc parent identifié "mon_calque" */
    top: 10px;
    left: 50%;  /* On décale l'image à la moitié de la largeur du bloc parent */
    margin-left: -125px;  /* On ramène l'image vers la gauche de la moitié de sa propre largeur */
}

Ceci est un exemple, adapte selon tes besoins.

Attention cependant avec le positionnement en absolu : l'élément est alors sorti du flux normal et si tu ajoutais du texte dans le même bloc contenant, il se positionnerait comme si l'image n'existait pas, ça risque de donner lieu à des chevauchements indésirables.

par **orgerix** » 01 avr. 2007, 12:25

Bonjour,

J'ai fait de claque en CSS, mais le problème, c'est que pour l'instant, je ne sais que mettre les coordonnées par rapport au coin supérieur gauche de la fenetre du navigateur, ce qui provoque des calculs compliqué pour ajuster les calques, et surtout que ma page est prévu que pour une configuration particuliaire.

Y a t il moyen de modifier l'origine des coorodonées, par exemple à l'origine des coordonées d'une image ?

Aligner les calques sur une image

Répondre

Étendre la vue Revue du sujet : Aligner les calques sur une image

Aligner les calques sur une image