Geckozone

Bon ça marche, mais toujours pas surIE7, va falloir peaufiner tout ça et faire disparaitre les cadres des transparents (ça j'ai une idée).
Par contre tu m'avais fait mettre les paramètres de boite dans #idbasses et il faut les mettre dans, bien sûr, dans a #idbasse :hover!
http://amichant.free.fr/essaimap.html
Il y a aussi le alt qui parait?
Je l'ai supprimé.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Je ne comprends pas ton problème, il serait plus simple que tu fasses une référence directe à ce que j'ai écrit.

C'est ce que j'ai fait, et là j'avais juste une petite boite qui apparaissait en haut à droite et qui poussait le div tenor vers le bas, alors j'ai modifié la boite mais dans :hover, le reste c'est comme tu m'as dit en changeant les noms?!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Tiens regarde j'ai mis strictement tes paramètres partout!

Si on met pas de dimension de boite c'est éparpillé
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Normal, tu n'écoutes rien, chenapan!

Où sont les images cadres et/ou transparentes?
Par exemple http://amichant.free.fr/images/tenor.gif ?
Et les autres?

Pas sur le serveur!!!

C'est sûr qu'elle va marcher moins bien comme cela!

SANS CES IMAGES, CELA NE PEUT PAS FONCTIONNER COMME PREVU!!!!!!!!

Il ne doit pas y avoir de positionnement en float, je t'ai dit du RELATIF, à la rigueur de l'absolu.

Il faut que tu arrêtes de tapisser les murs alors que l'électricité et les conduites de chauffage et d'eau ne sont pas intallées...

Bonjour,
C'est malheureusement pas la première fois, mais j'ai oublié de charger les img transparentes. Je m'en excuse vivement!
Mais c'est fait et ça change rien, si ce n'est que comme elles sont chargées, on voit le cadre car, je pense, faut mettre hidden sur l'image et non sur le lien. C'est en relatif.
Maintenant si tu penses que je suis trop con, on va gagner du temps:
Tu as toutes les dénominations exactes, les images chargées, tu me fais la page(puisqu'il n'y a rien d'autres) avec basses et tenors.
Moi, je répète j'ai mis strictement ce que tu as écrit...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Faut pas s'énerver, mais tu manques cruellement de méthodologie.

Il faut faire les choses petit à petit, et dans l'ordre.
Tester d'abord le principe sur un seul cas, par exemple les basses
Je crée le masque
je le positionne
puis mise en place de la réaction au survol de la souris...

Le fignolage c'est pour la fin quand les fonctions principales sont OK !

Tu confonds classe et id ! LES ID SONT UNIQUES POUR TOUTE LA PAGE
si j'ai un id="toto", je ne peux plus le réutiliser MEME pour un élément de type différent! Pas étonnant que tu ais le bordel!
+ déclaration en double dans les css

Ne mets pas de style dans le html

Jette un oeil là: http://lavl.free.fr/ ( essaimap.html a été supprimée)

J'ai mis un cadre css autour de l'image transparente, comme cela tu peux utiliser la même image partout tu définis juste sa taille en css, le fait de déformer du transparent n'est pas génant.

Il y a un schmurtz avec IE...certainement le hover qui coince. Faut faire des tests sur IE de base...

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
  <meta content="text/html; charset=iso-8859-1" http-equiv="content-type">
  <title>essaimap</title>
  <style type="text/css">
</head>
body {
  background-color: #ffcc33;
  }
  #mapgroup {
  position:relative; /*obligatoire ou fixed ou absolute */
  background: url(http://amichant.free.fr/images/ggroupDax.jpg);
  width: 550px;
  height: 314px;
 margin-left:auto;
  margin-right:auto;  
  }
  #mask_basse {  /* positionne l'image sur les basses!*/
  display:block;
  position:absolute;
  width: 200px; height: 120px;
  border: 1px dashed red;
  top:100px;
  left:200px;
  }

  a #idbasse {
  visibility: hidden;
  }
   a span#idbasse  /* corrige petit bug FF*/
  {
display:none;
  }
  a:hover span#idbasse 
  {
	display:block;
	position:absolute;
	  border: solid #62c0f4;
	  border-width: 1px 1px 1px 10px;
	  height:30px; width:300px;
	  background: white;
	  visibility: visible;
	  color: #3366ff;
	  margin-left: 10px;
	  margin-top: 320px;
  }
  </style>
</head>

<body>
  <div id="mapgroup">
      <a nohref="nohref">
          <img id="mask_basse" src="http://amichant.free.fr/images/bass.gif">
           <span id="idbasse">EUREKA !</span>
      </a>
  </div>
</body>
</html>

Fabrice: sous win, ça marche pour FF et Safari, mais pas pour IE6.
Mais il est bien connu que hover ne marche pour IE qu'avec une balise <a>.
Certains contournent ce problème avec un petit hack javascript, mais c'est se compliquer ...

Chinon,
Il me semble que le hover devrait fonctionner sur

Code : Tout sélectionner

<a href="toto.html"><img src="monimage.png" /> </a>

Non?

Si oui, alors test sur

Code : Tout sélectionner

<a href="#"><img src="monimage.png" /> </a>

puis

Code : Tout sélectionner

<a nohref="nohref"><img src="monimage.png" /> </a>

puis test avec class ou id

Comme cela, ça marche sur IE 7

Code : Tout sélectionner

  <a href="#"><img id="mask_basse" src="http://amichant.free.fr/images/bass.gif"><span id="idbasse">EUREKA !</span></a>

c'est le nohref qui semble coincer!

Fabrice, merci, mais tu as quand même modifié certains trucs comme a:hover span#idbasse et je n'avais pas, je le sais, mis deux id identiques, il y avait id bass et id basse, oui je sais c'est pas très original, mais peu importe.
J'ai mis les 2 zones basses et tenors, je veux que ce soit positionné sur les pupitres réels donc: Basse Tenors
et dessous Alti Soprani
ça fonctionne, reste à mettre hidden sur les masques pour faire disparaitre les bordures, à peaufiner et faire en sorte que ça marche sous IE.
Autrement je l'emploierais pas puisque j'ai voulu faire ça uniquement pour découvrir autre chose et faire avancer (laborieusement ) le schmilblic!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

GAUNCE a écrit :Fabrice, merci, mais tu as quand même modifié certains trucs comme a:hover span#idbasse et je n'avais pas, je le sais, mis deux id identiques, il y avait id bass et id basse, oui je sais c'est pas très original, mais peu importe.

C'est ce qu'on appelle chercher la m...e! trop de risque de confusion.

Avec la modif du href cela doit marcher presque partout !

Il faut juste cacher le soulignement du lien qui est dans le span ! Je l'ai intégré dans la partie css.

Maintenant que j'ai reçu la bière belge, le vinde Loire, il me manque juste le foie gras des Landes pour Noel!

Oui comme ça, ça marche sous IE7 aussi, mais pas dans Kompozer? et en plus comme tu vois il y a des cadres de couleurs partout, des soulignement dans le survol?!!!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Tu ne suis pas le cours attentivement, cela manque de dynamisme...
j'ai intégré une légére modif pour faire disparaitre les soulignements du lien du span par l'ajout de

a span#idbasse /* corrige petit bug FF*/
{
display:none;
}

Tu as intérêt à refaire une petite image ENTIEREMENT transparente, sans cadre que tu utiliseras pour chaque groupe.
Le cadre tu le mets en css
border: 1px dashed grey;
pour un cadre discret !
A toi de choisir qlq chose d'élégant

Geckozone

zone reactive