PB images survolées, calques...

Répondre
syl20
WRInaute discret
WRInaute discret
 
Messages: 72
Inscription: 13 Jan 2006

PB images survolées, calques...

Message le Mer Avr 20, 2011 9:16

Bonjour à Tous,

Mon souci.

Mise en place d'une carte de france sur notre site.

Changement de couleur lors du survol des régions.

Un clic sur une région fait apparaître un tableau en dessous de la carte avec nos agences de cette région.

Mon souci.

J'ai utilisé les calques de dreamweaver car l'idéal aurait été de pouvoir définir une zone survolée, et mettre alors un lien sur la seconde image, ce qui ne parait pas possible.

Le souci des calques semble récurrent, impossible de fixer la position des calques.

Ainsi, si on clique sur la Bretagne, le tableau apparaît, mais si on clique sur Pays de la Loire, le tableau apparaît aussi, mais pas à la même position que le tableau Bretagne. Il est décalé vers le bas. Or je voudrais que tous les tableaux restent figés sur la première position.

Voir ici : http://www.aveo-home-staging.fr/carte-france.html

Faire le test sur Région Bretagne et Region Pays de la Loire.

Voici mon code actuel :

Code: Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/JavaScript">
<!--

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
<!--

.Style2 {
   color: #F0F0F0;
   font-weight: bold;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}
.Style3 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
}
.Style6 {
   font-size: 14px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}
#Layer1 {
   position:relative;
   width:389px;
   height:226px;
   z-index:1;
   left: 11px;
   top: 10px;
   visibility: hidden;
}
#Layer2 {
   position:relative;
   width:389px;
   height:226px;
   z-index:2;
   left: 11px;
   top: 1px;
   visibility: hidden;
}

-->
</style>
</head>

<body onLoad="MM_preloadImages('/images/stories/site/carte_france/haute-normandi.jpg','/images/stories/site/carte_france/nord.jpg','/images/stories/site/carte_france/picardie.jpg','/images/stories/site/carte_france/champagne.jpg','/images/stories/site/carte_france/lorraine.jpg','/images/stories/site/carte_france/alsace.jpg','/images/stories/site/carte_france/iledefrance.jpg','/images/stories/site/carte_france/centre.jpg','/images/stories/site/carte_france/bourgogne.jpg','/images/stories/site/carte_france/franchecomte.jpg','/images/stories/site/carte_france/poitou.jpg','/images/stories/site/carte_france/limousin.jpg','/images/stories/site/carte_france/auvergne.jpg','/images/stories/site/carte_france/rhonealpes.jpg','/images/stories/site/carte_france/aquitaine.jpg','/images/stories/site/carte_france/midipyrennees.jpg','/images/stories/site/carte_france/languedoc.jpg','/images/stories/site/carte_france/paca.jpg','/images/stories/site/carte_france/corse.jpg','carte/cartes/basse-normandie.jpg','carte/Regions/fond.jpg','carte/cartes/bretagne.jpg','carte/cartes/pays-loire.jpg')">
<p><img src="/images/stories/site/carte_france/france.jpg" name="Image1" width="450" height="530" border="0" usemap="#Map" id="Image1" />
  <map name="Map" id="Map">
    <area shape="poly" coords="48,68,40,101,89,127,136,125,150,106,115,86,103,71" href="#AgencesBretagne" target="_parent" onClick="MM_showHideLayers('Layer1','','show','Layer2','','hide')" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/bretagne.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="83,137,102,185,128,186,128,171,155,160,196,134,190,115,148,100,137,126" href="#agencespaysloire" onClick="MM_showHideLayers('Layer1','','hide','Layer2','','show')" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/pays-loire.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="141,54,142,98,198,120,204,113,202,101,198,87" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/basse-normandie.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="200,68,202,104,226,102,238,94,243,74,242,62" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/haute-normandi.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="251,35,247,57,318,89,322,80,278,38" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/nord.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="250,65,245,73,244,95,286,114,294,101,320,95,309,83,255,63" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/picardie.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="238,96,224,104,235,133,256,140,269,137,278,133,282,122,279,113" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/iledefrance.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="206,105,201,128,162,163,176,180,192,202,215,207,232,200,248,192,247,170,262,149,256,142,238,134,228,110" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/centre.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="331,77,282,120,282,138,294,161,325,170,338,180,351,170,342,161,324,138,338,111,346,110" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/champagne.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="351,98,334,119,329,138,348,167,370,170,382,176,389,152,395,136,420,136" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/lorraine.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="400,133,434,138,410,168,405,197,384,183" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/alsace.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="135,162,135,190,113,191,98,212,111,238,124,241,136,237,150,229,156,219,170,209,183,200,174,183,163,171" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/poitou.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="144,289" href="#" />
    <area shape="poly" coords="93,217,31,307,75,337,88,333,93,318,94,301,120,296,143,291,164,263,168,248,162,233,167,232,131,238,119,244" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/aquitaine.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="164,216,156,230,172,252,172,267,189,265,195,263,216,248,220,229,224,212,192,207,184,204" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/limousin.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="270,138,257,156,243,197,264,209,277,224,283,226,294,232,306,223,318,232,318,226,326,201,330,181" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/bourgogne.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="332,185,321,234,344,238,357,216,371,203,382,198,382,181,354,170" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/franchecomte.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="77,352,152,376,157,341,180,345,195,339,209,331,219,324,217,311,216,298,215,284,188,284,183,270,163,266,139,297,106,296" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/midipyrennees.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="224,205,223,236,187,277,197,288,214,277,223,281,234,282,245,288,257,292,264,287,265,278,266,261,266,244,275,228,282,218,249,196" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/auvergne.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="272,231,266,270,272,283,254,295,257,316,286,321,294,329,307,333,308,317,321,314,338,312,346,296,359,297,371,288,362,264,369,243,310,232" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/rhonealpes.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="157,343,155,392,186,402,192,377,189,361,256,353,278,341,270,325,255,315,249,292,229,286,216,309,227,319,198,334,192,345,176,338" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/languedoc.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="266,327,273,344,249,364,262,383,303,405,329,404,337,387,368,370,374,360,380,357,368,352,358,345,355,333,356,301,318,313,311,332,311,348" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/paca.jpg',1)" onMouseOut="MM_swapImgRestore()" />
    <area shape="poly" coords="389,411,360,431,354,470,368,498,387,507,393,469,408,435,400,402" href="#" onMouseOver="MM_swapImage('Image1','','/images/stories/site/carte_france/corse.jpg',1)" onMouseOut="MM_swapImgRestore()" />
  </map>
</p>
<div id="Layer1">
  <div align="center"><img src="/images/stories/site/carte_france/agences/bretagne.jpg" width="352" height="224" margin-top="567"></div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="Layer2">
  <div align="center"><img src="/images/stories/site/carte_france/agences/paysloire.jpg" width="352" height="224" margin-top="567"></div>

</div>
<p>&nbsp;</p>
</body>
</html>



J'ai essayé les calques en absolu, en relatif, mais rien y fait... On dirait que mes calques ne veulent pas se chevaucher.

Je ne suis pas attaché aux calques bien évidemment, car je connais les soucis d’interprétation des différents navigateurs, mais je ne trouve pas d'autres solutions pour réaliser ceci.
Je ne souhaite pas faire du flash, et je ne souhaite pas utiliser de script existant où on a jamais précisément ce que l'on souhaite.

Un petit coup de main serait la bienvenue.

Merci à tous.
Haut
syl20
WRInaute discret
WRInaute discret
 
Messages: 72
Inscription: 13 Jan 2006

RESOLU Re: PB images survolées, calques...

Message le Mer Avr 20, 2011 10:00

Bon, ben j'ai trouvé...

En fait, il faut indiquer dans le css de chaque layer le top, tout de suite après le position:aboslute. Et cela fonctionne nickel.

Alors que le top était en dessous du z-index et que visiblement il ne le prenait pas en compte.

Bref...

Merci à vous...
Haut
Répondre

Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group Traduction par: phpBB-fr.com, mod SEO par phpbb-seo.com