在页面加载Javascript的功能

我有以下JavaScript代码，它是如何加载一个地图与不同地区，当你悬停或点击一个国家，它会显示有关该国家在右侧aditional信息的地图。在页面加载Javascript的功能

我想要做的是当页面加载时，一个随机的国家已经显示信息，没有悬停或clic。

住在这里例如：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>

来源

2011-10-18 RonEskinder

我试图自己创建JavaScript函数，但没有成功，我做了设置随机数组，但不知道如何在地图中分配它。数组给出了项目的ID，但没有关于如何使它从那里工作的线索。（Math.floor（Math.random（）* keywords.length）] 关键字= [“crica”，“panama”，“guatemala”，“Honduras”，“elSalvador”，“nic”] – RonEskinder

你正在做的很好，我真的不能相信没有视觉的东西

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;

你做得很好，你可以做到。

来源

2011-10-18 23:48:31 kinduff

试过这个没有运气的所有...任何人都可以帮助我解决这个问题，我失去了我的想法 '$（document）.ready（function（）{ keywords = [“crica”，“panama”，“guatemala “，”洪都拉斯“，”elSalvador“，”nic“] var keyword =关键字[Math.floor（Math.random（）* keywords.length）] jQuery（”＃map-container“+ keyword）; var regionMap ='。'+ $（this）.attr（keyword）+'-map'; var regionList ='。'+ $（this）.attr（keyword）+'-list'; jQuery（regionMap） .addClass（'selected'）。css（'display'，'inline “）; jQuery（regionList）.addClass（'selected'）。css（'display'，'inline'）;' – RonEskinder

在页面加载Javascript的功能

回答

相关问题