我有以下 javascript 代码，它会加载一个包含不同区域的 map ，当您将鼠标悬停或单击一个国家/地区时，它会在 map 右侧显示有关该国家/地区的附加信息。
我想要做的是当页面加载时，一个随机国家已经在显示信息，没有悬停或点击。
此处为实例: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>
最佳答案
你做的很好，没有视觉的东西我真的无法思考
keywords = ["crica","panama","guatemala","Honduras","elSalvador","nic"]
然后是随机函数
var keyword = keywords[Math.floor(Math.random()*keywords.length)]
所以你在这里得到了很多东西
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');
});
您需要为准备好的新文档更改点击功能，并将 AREA 替换为关键字。如果哈希更适合您，那么:
document.location.hash = keyword;
你做得很好，你可以做到。
关于javascript - 在 Javascript 中添加页面加载功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7814623/