Bonsoir,
Voci une application simplifiée illustrant le problème.
Une Infowindow contient une liste déroulante d'images construite avec Jquery.
Un clic sur l'une de ces images provoque l'ouverture d'une fenêtre.
Cette fenêtre reste sur le devant avec Firefox et Opéra, mais passe en arrière plan automatiquement avec IE ou Chrome.
Pouvez-vous me dire pourquoi, et me donner une solution qui me permettrait de maintenir la fenêtre ouverte sur le devant avec IE et Chrome (sachant que je ne peut agir sur le contenu de l'URL affiché).
Merci d'avance
Trachy
Voici le lien : (cliquez sur le Marker, puis survolez et cliquez dans l'image " ... " pour faire apparaitre la liste déroulante d'images, puis cliquez dans l'une des imapes pour faire apparaitre la fenêtre)
[URL="http://www.cybtechnologie.com/essai/essaiPOPUP.htm"]http://www.cybtechnologie.com/essai/essaiPOPUP.htm[/URL]
Voici le code :
[code =html]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- 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>
<!-- Feuilles de style jQuery liste déroulante icones-->
<link rel="stylesheet" type="text/css" href="libraryjQuery/customdropdown/customdropdown.css" />
<script type="text/javascript">
var strsitesweb="<ul><li value='1'><img src='mairie.jpg' alt='http://www.toulouse.fr' title='http://www.toulouse.fr' /></li><li value='2'><img src='ot.jpg' alt='http://www.tourisme.fr' title='http://www.tourisme.fr' /></li><li value='3'><img src='abritel.jpg' alt='http://www.abritel.fr' title='http://www.abritel.fr' /></li><li value='4'><img src='wikipedia.jpg' alt='http://www.wikipedia.fr' title='http://www.wikipedia.fr' /></li><li value='5'><img src='wikitravel.jpg' alt='http://www.wikitravel.fr' title='http://www.wikitravel.fr' /></li></ul>";
function popup(url){
window.open(url,'paysagesdumonde','toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,width=1170,height=600,screenx=0,screenY=0,left=0,top=0');
return;
}
function selecteur_icones(){
$(function(){
document.getElementById('id_select_icones').innerHTML = strsitesweb;
$("#id_select_icones ul:eq(0)").imgDropDown({title:"<img id='image_selected' src='points.jpg' alt='autres sites' title='autres sites'/>", callback:f});});
}
function f(content)
//fonction utilisée pour présenter le site web à partir du sélecteur d'icônes - récupération du nom de l'url dans "content" par traitement de chaine de caractères
{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)};
popup(web_site);
}
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = "<div id='content' ><table><tr><td><img src='australie.jpg' /></td><td valign='top'><div id='id_select_icones'><a href='#' onmouseover='javascript:selecteur_icones();'><img src='points.jpg' border='1' /></a></div></td></tr></table></div>";
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
[/code]
Voci une application simplifiée illustrant le problème.
Une Infowindow contient une liste déroulante d'images construite avec Jquery.
Un clic sur l'une de ces images provoque l'ouverture d'une fenêtre.
Cette fenêtre reste sur le devant avec Firefox et Opéra, mais passe en arrière plan automatiquement avec IE ou Chrome.
Pouvez-vous me dire pourquoi, et me donner une solution qui me permettrait de maintenir la fenêtre ouverte sur le devant avec IE et Chrome (sachant que je ne peut agir sur le contenu de l'URL affiché).
Merci d'avance
Trachy
Voici le lien : (cliquez sur le Marker, puis survolez et cliquez dans l'image " ... " pour faire apparaitre la liste déroulante d'images, puis cliquez dans l'une des imapes pour faire apparaitre la fenêtre)
[URL="http://www.cybtechnologie.com/essai/essaiPOPUP.htm"]http://www.cybtechnologie.com/essai/essaiPOPUP.htm[/URL]
Voici le code :
[code =html]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- 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>
<!-- Feuilles de style jQuery liste déroulante icones-->
<link rel="stylesheet" type="text/css" href="libraryjQuery/customdropdown/customdropdown.css" />
<script type="text/javascript">
var strsitesweb="<ul><li value='1'><img src='mairie.jpg' alt='http://www.toulouse.fr' title='http://www.toulouse.fr' /></li><li value='2'><img src='ot.jpg' alt='http://www.tourisme.fr' title='http://www.tourisme.fr' /></li><li value='3'><img src='abritel.jpg' alt='http://www.abritel.fr' title='http://www.abritel.fr' /></li><li value='4'><img src='wikipedia.jpg' alt='http://www.wikipedia.fr' title='http://www.wikipedia.fr' /></li><li value='5'><img src='wikitravel.jpg' alt='http://www.wikitravel.fr' title='http://www.wikitravel.fr' /></li></ul>";
function popup(url){
window.open(url,'paysagesdumonde','toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,width=1170,height=600,screenx=0,screenY=0,left=0,top=0');
return;
}
function selecteur_icones(){
$(function(){
document.getElementById('id_select_icones').innerHTML = strsitesweb;
$("#id_select_icones ul:eq(0)").imgDropDown({title:"<img id='image_selected' src='points.jpg' alt='autres sites' title='autres sites'/>", callback:f});});
}
function f(content)
//fonction utilisée pour présenter le site web à partir du sélecteur d'icônes - récupération du nom de l'url dans "content" par traitement de chaine de caractères
{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)};
popup(web_site);
}
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = "<div id='content' ><table><tr><td><img src='australie.jpg' /></td><td valign='top'><div id='id_select_icones'><a href='#' onmouseover='javascript:selecteur_icones();'><img src='points.jpg' border='1' /></a></div></td></tr></table></div>";
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
[/code]