在 Javascript 中添加页面加载功能

发布于 2024-12-10 15:44:12 字数 9244 浏览 7 评论 0原文

我有以下 javascript 代码，它的作用是加载具有不同区域的地图，当您将鼠标悬停或单击一个国家/地区时，它将在地图的右侧显示有关该国家/地区的其他信息。

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

现场示例：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>

原文

I have the folowing javascript code, what it does its loads a Map with different regions, when you hover or click over a country, it will display aditional information about that country in the right side of the map.

What i want to do is when the page loads, a random country is already showing information, without a hover or clic.

live example here: 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天荒地未老 2024-12-17 15:44:12

你做得很好，如果没有视觉东西我真的无法思考

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;

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

You're doing it fine, I can't really think without the visual stuff

keywords = ["crica","panama","guatemala","Honduras","elSalvador","nic"]

Then random function

var keyword = keywords[Math.floor(Math.random()*keywords.length)]

So you got a lot of stuff right here

    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');
    });

You'll need to change the click function for a new document ready and replace the AREA thing with the keyword. If a hash works better for you then: