11485 sujets

JavaScript, DOM et API Web HTML5

Pb ouverture popup en arrière plan avec sélecteur d'images

Bonjour,
J'ai construit un sélecteur de sites internet (listes d'icones avec jquery) placé dans une info bulle-GoogleMap (qui s'affiche lorsque l'on clique sur le marqueur).
J'ai un problème car, à part sous Firefox, avec tous les autres navigateurs les sites s'affichent en arrière-plan (sauf le "bon coin", mais cela doit être du à une particularité du site) .
Je ne pense pas que le problème soit à rechercher dans GM ou Jquery, mais plutôt dans les fonctions que j'ai construites (dans les retours peut-être!).
Quelqu'un peut-il m'aider?

Merci d'avance
Trachy

Voici le site :
http://www.paysagesdefrance.com/index1.htm

Voici le 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">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tourisme : Paysages de France, Golfe du Morbihan, location, Villes du Golfe du Morbihan, hébergements, vacances</title>

<!-- script jQuery liste déroulante icones -->
<script type="text/javascript" src="libraryjQuery/customdropdown/js/jquery.js" ></script>
	<script type="text/javascript" src="libraryjQuery/customdropdown/js/jquery-dropdown.js" ></script>
 	
<!-- script Google Maps -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="JavaScript" src="libraryV3/markermanager_packed.js" type="text/JavaScript"></script>
<script src="libraryjQuery/gmap3/gmap3.min.js" type="text/javascript"></script>

<!-- Feuilles de style jQuery liste déroulante icones-->
<link rel="stylesheet" type="text/css" href="libraryjQuery/customdropdown/customdropdown.css" />

<!-- Feuilles de style -->
<link rel="stylesheet" type="text/css" href="style/emplacement.css" media="all">
<link rel="stylesheet" type="text/css" href="style/police.css" media="all">
<link rel="stylesheet" type="text/css" href="style/format.css" media="all">

<style type="text/css">
html{
     height:100%;
}
body{
     height:100%;
     margin:0px;
     padding:0px;
}
#infoWindow{
     margin:0;
     padding:0;
     width: 370px;
}
#infoWindow h1{
     font:20px italic "Times New Roman", Times, serif;
     color:#267AA8;
     text-align:center;
}
#infoWindow h2{
     font:17px "Times New Roman", Times, serif;
     margin:.5em 0;
     padding:0;
     text-align:center;
     color:orange;
}
#texteinfoWindow{
     margin:0;
     padding:0;
     font:11px "Trebuchet MS",sans-serif;
}
#texteinfowindow p{
     margin:.5em 0;
     padding:0;
     text-indent:2em;
     text-align:left;
     
}
#select_icones{
     float: right;
     margin: 0 .5em .5em 0;
     width: 220px;
     height: 163px;
}
#map{
     height:100%;
}
</style>

<script language="javascript">

var other_web_sites =[];
other_web_sites[0]="http://www.vacances.com/location-vacances.php?id_zone=23549";
other_web_sites[1]="http://www.papvacances.fr/annonces/location-vacances-morbihan-56-g420";
other_web_sites[2]="http://www.leboncoin.fr/locations_de_vacances/offres/bretagne/morbihan/?f=a&th=1";
other_web_sites[3]="http://www.armor-vacances.com/locations-56-morbihan/golfe-du-morbihan.html";
other_web_sites[4]="http://www.7enlocation.com/d56-t0-p0/location-vacances-morbihan";
other_web_sites[5]="http://www.a-gites.com/bretagne/location-vacances-morbihan.html";


function analyse(url){
window.open(url,'paysagesdefrance','toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,width=1170,height=600,screenx=0,screenY=0,left=0,top=0');
return;
}

function f(content)
{
var debut = content.html().indexOf("http");
var fin = content.html().indexOf(" ",debut);
var web_site = content.html().substring(debut,fin);
// selon navigateur le nom est terminé par une apostrophe ou un guillemet
if((web_site.charAt(web_site.length - 1)=='"')||(web_site.charAt(web_site.length - 1)=="'")){web_site=web_site.substring(0,web_site.length-1)};
analyse(web_site);
return;
}

function selecteur_icones(){
$(function(){
document.getElementById('select_icones').innerHTML ="<ul><li value='1'><img src='images/infobulle/icone_vacances.jpg' alt='"+other_web_sites[0]+"' title='www.vacances.com'/></li><li value='2'><img src='images/infobulle/icone_pap.jpg' alt='"+other_web_sites[1]+"' title='www.pap.fr'/></li><li value='3'><img src='images/infobulle/icone_leboncoin.jpg' alt='"+other_web_sites[2]+"' title='www.leboncoin.fr' /></li><li value='4'><img src='images/infobulle/icone_armorvac.jpg' alt='"+other_web_sites[3]+"' title='www.armorvac.com' /></li><li value='5'><img src='images/infobulle/icone_7en.jpg' alt='"+other_web_sites[4]+"' title='www.7enlocation.com' /></li><li value='6'><img src='images/infobulle/icone_amivac.jpg' alt='"+other_web_sites[5]+"' title='www.amivac.com' /></li></ul>";
$("#select_icones ul:eq(0)").imgDropDown({title:"<img id='image_selected' src='images/infobulle/icone_points.jpg' alt='autres sites' title='autres sites'/>", callback:f});});
}	

function load(){

//carte

var centreCarte = new google.maps.LatLng(47.58879945676841,-2.8348159790039062);
     var optionsCarte = {
          zoom: 11,
          center: centreCarte,
          mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var mymap = new google.maps.Map(document.getElementById("map"), optionsCarte);

// infoWindow

    var html = '<div id="infoWindow">' +
               '<h1>Golfe du Morbihan</h1>' +
               '<h2>Sites Web</h2>' +
               '<div id="texteinfoWindow">' +
		'<div id="select_icones"><a href="#" onmouseover="javascript:selecteur_icones()"><img src="images/infobulle/icone_points.jpg" alt="sites web" title="sites web"/></a></div>' +
                '</div>' +
     		'</div>';
     var infobulle = new google.maps.InfoWindow({
          content: html
     })

//marqueur

     var optionsMarqueur = {
          position: centreCarte,
          map: mymap,
          title: "infos site_web"
     }
     var marqueur = new google.maps.Marker(optionsMarqueur);
     google.maps.event.addListener(marqueur, 'click', function() {
          infobulle.open(mymap, marqueur);
     });
}
</script>
</head>
<body OnLoad="load()">
<div id="map"></div>
</body>
</html>
Sujet clos
Aller à