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:
Code Javascript :
<!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>