1
J'ai le code javascript suivant, ce que fait son charge une carte avec différentes régions, lorsque vous passez la souris ou cliquez sur un pays, il affichera des informations supplémentaires sur ce pays dans le côté droit de la carte.ajouter une fonction sur la page Charger en Javascript
Ce que je veux faire est quand la page se charge, un pays aléatoire montre déjà l'information, sans un vol stationnaire ou un clic.
exemple en direct ici: http://roneskinder.com/fm/image-map/index.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="js/easySlider1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
continuous: true
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#map-container AREA").mouseover(function() {
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
jQuery(regionMap).css('display', 'inline');
// Check if a click event has occured and only change the Region hover state accodringly
if (!jQuery('#practice-container ul').hasClass('selected')) {
jQuery(regionList).css('display', 'inline');
}
}).mouseout(function() {
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
// Check if a click event has occured and only change the Region hover state accodringly
if (!jQuery(regionMap).hasClass('selected')) {
jQuery(regionMap).css('display', 'none');
}
// Check if a click event has occured and only change the Region hover state accodringly
if (!jQuery('#practice-container ul').hasClass('selected')) {
jQuery(regionList).css('display', 'none');
}
});
jQuery("#map-container AREA").click(function() {
jQuery('#map-container img.region').removeClass('selected').css('display', 'none');
jQuery('#practice-container ul').removeClass('selected').css('display', 'none');
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
jQuery(regionMap).addClass('selected').css('display', 'inline');
jQuery(regionList).addClass('selected').css('display', 'inline');
});
});
</script>
</head>
<body style="padding: 0; margin: 0;">
<form runat="server">
<div id="map-view-container">
<div id="map-container">
<img src='transparentMap.png' width='481' height='350' border='0' alt='' usemap='#regionMapView'
class='map' />
<map name='regionMapView' id='regionMapView'>
<area shape="poly" coords="101,148,103,139,102,135,112,124,125,118,131,110,135,112,142,107,167,104,181,101,188,102,194,97,193,92,207,99,237,98,250,93,285,107,253,123,238,121,231,129,227,136,210,149,194,147,183,154,174,155,175,171,162,176,158,171,149,170,147,153,136,152,133,158,122,150,113,152"
href="#Honduras" id="Honduras" />
<area shape="poly" coords="74,167,62,166,29,167,20,165,9,155,12,148,9,138,24,114,65,107,67,102,57,101,52,95,32,84,41,79,42,69,96,60,102,105,111,105,124,108,125,105,133,106,130,110,126,115,126,118,112,123,102,136,101,148,92,153,83,159"
id="guatemala" />
<area shape="poly" coords="157,178,172,191,207,215,214,216,224,213,241,212,257,210,264,215,271,220,280,217,281,212,273,203,278,188,273,192,275,183,276,169,282,180,283,162,283,145,290,129,286,114,288,107,273,110,251,124,237,121,236,127,227,133,226,137,209,149,198,147,184,153,174,155,176,172,157,179,157,178"
href="#nic" id="nic" />
<area shape="poly" coords="75,167,82,159,92,156,100,147,113,153,123,151,133,158,138,152,147,154,148,170,151,172,147,174,135,176,124,170,124,174"
href="#elSalvador" id="elSalvador" />
<area alt="panama England" shape="poly" coords="311,245,306,257,313,261,309,269,314,277,314,273,329,269,334,273,346,273,353,284,362,286,365,283,363,280,368,279,370,285,370,292,382,294,388,285,397,285,397,279,399,276,387,266,399,263,408,254,407,248,420,243,432,248,441,253,447,259,458,255,446,268,463,283,469,276,479,256,473,247,475,244,466,240,443,230,423,230,414,226,377,245,368,250,339,246,336,248,335,254,330,246,320,244,312,244"
href="#panama" id="panama" />
<!-- <area shape="poly" alt="southEast" id='southEast' coords="96,60,102,55,106,56,114,44,120,41,123,44,130,41,130,57,127,66,131,76,121,98,111,104,102,105"
href="#southEast" />-->
<area id="crica" alt="crica" shape="poly" coords="212,222,216,216,232,213,257,210,273,220,285,216,290,223,297,231,308,240,317,244,310,245,308,251,306,257,313,261,308,268,313,278,305,278,294,267,288,267,297,273,297,277,281,274,278,266,281,261,253,244,244,237,234,234,233,236,245,244,242,249,228,244,218,243,213,235,219,228,213,221"
href="#crica" />
<area id='london' shape='poly' alt='London' coords='186,365, 186,360, 187,360, 187,359, 188,359, 188,358, 189,358, 189,357, 191,357, 191,356, 192,356, 192,355, 196,355, 196,356, 198,356, 198,357, 200,358, 200,359, 201,359, 201,360, 203,360, 203,362, 202,362, 202,364, 200,364, 199,365, 198,366, 195,366, 194,367, 193,367, 193,368, 191,368,190,367, 188,367, 188,366, 187,366, 187,365'
href='#london' />
</map>
<img src='mvCostaRica.png' width='481' height='350' border='0' class='region crica-map'
alt='Costa Rica' />
<img src='mvPanama.png' width='481' height='350' border='0' class='region panama-map'
alt='Panama' />
<img src='mvGuatemala.png' width='481' height='350' border='0' class='region guatemala-map'
alt='Guatemala' />
<img src='mvHonduras.png' width='481' height='350' border='0' class='region Honduras-map'
alt='Honduras' />
<img src='mvElSalvador.png' width='481' height='350' border='0' class='region elSalvador-map'
alt='El Salvador' />
<img src='mvNicaragua.png' width='481' height='350' border='0' class='region nic-map'
alt='Nicaragua' />
<!-- <img src='mvBelice.png' width='481' height='350' border='0' class='region southEast-map'
alt='Belice' />-->
<img src="mvCentralAmerica.png" width="481" height="350" class="regionBg" />
</div>
<div id="practice-container">
<!--Nicaragua-->
<ul class="nic-list">
<li>
<iframe id="iframe1" src="../image-slider/nicaragua/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--El Salvador-->
<ul class="elSalvador-list">
<li>
<iframe id="iframe2" src="../image-slider/elSalvador/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Honduras-->
<ul class="Honduras-list">
<li>
<iframe id="iframe3" src="../image-slider/honduras/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Belice-->
<ul class="southEast-list">
<li>
<img src="images/0.png" alt="" /></li>
</ul>
<!--Panama-->
<ul class="panama-list">
<li>
<iframe id="iframe4" src="../image-slider/panama/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Guatemala-->
<ul class="guatemala-list">
<li>
<iframe id="iframe5" src="../image-slider/guatemala/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Costa Rica -->
<ul class="crica-list">
<li>
<iframe id="iframe6" src="../image-slider/costaRica/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
</div>
</div>
</form>
</body>
</html>
J'ai essayé de créer la fonction javascript moi-même, mais je n'ai pas réussi, j'ai réussi à faire le tableau aléatoire mais je n'ai aucune idée sur la façon de l'assigner dans la carte. Le tableau restitue l'identifiant des objets mais n'a pas la moindre idée de comment le faire fonctionner à partir de là. keywords = ["crica", "panama", "guatemala", "Honduras", "elSalvador", "nic"] var mot-clé = mots-clés [Math.floor (Math.random() * keywords.length)] – RonEskinder