Mysql
 sql >> Cơ Sở Dữ Liệu >  >> RDS >> Mysql

hiển thị dữ liệu từ sql khi nhấp vào bản đồ svg

Ok, có thứ gì đó đang hoạt động ... giao tiếp giữa svg nhúng và php chính không dễ dàng vì vậy tôi đặt toàn bộ svg vào php. Như thế này:

        <!doctype html>
    <html lang=''>
    <head>
       <meta charset='utf-8'>
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" type="text/css" href="../CSS/Pages.css"/>   

       <title>Map</title>
    </head>
    <body>
    <div id="Holder">
        <div id="DataPage">     
            <div id="DataPage_Left">
                <h3>Country: <span class="label" id="country_name"></span></h3>
                <h4>Regional Representative:</h4><!--get Rep name from database based on country from svg to display-->


            </div>
            <div id="DataPage_Right">
    <svg id="map" version="1.1"
         xmlns:cc="http://web.resource.org/cc/"
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:svg="http://www.w3.org/2000/svg"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"  
         x="0px" y="0px" width="730px" height="570px" 
         viewBox="0 0 730 570" 
         xml:space="preserve">
    <defs>
            <radialGradient id="RadialGradient"
               fx="50%" fy="50%" r="50%"
               spreadMethod="pad">
              <stop offset="0%"   stop-color="#246875" stop-opacity="1"/>
              <stop offset="100%" stop-color="#2A4B59" stop-opacity="1" />
            </radialGradient>
        </defs>

        <style type="text/css">

            .land
            {
                fill: url(#RadialGradient);
                stroke: white;
                stroke-width: 0.5;
                stroke-miterlimit: 2;
            }

            .coast
            {
                stroke-width: 0.5;
            }

            .label
            {
                font: 150%/1.9 arial, helvetica, sans-serif;
                fill:#2A4B59;
            }

            .lland
            {
                font: 55%/0.2 arial, helvetica, sans-serif;
                fill:#CCE7D4;
            }

            .lsea
            {
                font: 55%/0.2 arial, helvetica, sans-serif;
                fill:#2A4B59;           
            }

            .circle
            {
                opacity: 0;
                fill-opacity: 1;
                stroke: black;
                stroke-width: 0.5;
                stroke-opacity: 1;
            }

            path:hover
            {
                fill: #13bdca;
            }
        </style> 


     <g id="map-matrix" transform="matrix(1 0 0 1 0 0)" >
        <g id="Plan" onclick="fill_contact(evt)">

            <path id="SZ" onmouseover="displayName('Swaziland')" onmouseout="displayName('')" class="land sz"
            d="M466.64,482.677c0.552,0.721,1.012,1.263,1.012,2.165c0,0.429,0,0.721-0.185,1.081c-0.068,0.158-0.298,0.113-0.367,0.271
            c-0.184,0.383-0.023,0.676-0.091,1.082c-0.139,0.834-0.415,1.309-0.554,2.165c-0.573,0.856-1.171,1.668-1.933,2.345
            c-0.365,0.316-0.597,0.722-1.103,0.722c-1.219,0-1.907-0.27-3.126-0.27c-0.367,0-0.597,0.157-0.92,0.27l-2.298-5.412
            c0.23-0.563,0.573-0.878,0.826-1.442c0.232-0.52,0.253-0.902,0.46-1.443c0.229-0.654,0.598-0.946,1.104-1.442
            c0.598-0.587,0.874-1.038,1.197-1.805c0.115-0.271,0.091-0.497,0.275-0.721c0.298-0.361,0.689-0.43,1.103-0.632
            c0.275-0.135,0.414-0.36,0.736-0.36c0.368,0,0.506,0.36,0.736,0.631c0.343,0.405,0.621,0.608,1.009,0.992
            c0.255,0.247,0.277,0.519,0.555,0.721C465.628,482.022,466.134,482.181,466.64,482.677z"/>

            <path id="ZA" onmouseover="displayName('South Africa')" onmouseout="displayName('')" class="land sa"
            d="M441.167,501.166c-0.942,1.173-2.115,1.195-3.589,1.625c-0.804,0.224-1.355,0.315-2.021,0.81c-0.414,0.318-0.507,0.678-0.828,1.082
            c-0.207,0.271-0.482,0.294-0.735,0.541c-0.988,0.97-1.473,1.625-2.115,2.797c-0.254,0.475-0.346,0.813-0.643,1.264
            c-0.461,0.698-1.059,0.924-1.841,1.263c-0.735,0.314-1.08,0.653-1.838,0.901c0.389,0.384,0.758,0.406,1.195,0.722
            c0.85,0.608,1.057,1.285,1.656,2.164c0.298,0.43,0.618,0.608,1.01,0.992c0.782,0.768,1.288,1.15,2.206,1.713
            c0.393,0.227,0.714,0.36,1.104,0.634c0.229,0.156,0.345,0.449,0.645,0.449c0.367,0,0.391-0.405,0.551-0.723
            c0.254-0.471,0.529-0.697,0.92-1.082c0.506-0.494,0.92-0.765,1.563-1.082c1.265-0.607,2.07-0.878,3.312-1.532
            c1.127-0.587,1.61-1.263,2.391-2.255c0.23-0.315,0.528-0.36,0.828-0.631c0.367-0.316,0.552-0.632,0.92-0.993
            c0.551-0.54,1.104-0.924,1.104-1.714c0-0.337-0.367-0.451-0.644-0.63c-0.528-0.361-0.942-0.497-1.472-0.812
            c-0.714-0.429-1.334-0.678-1.655-1.445c-0.276-0.676-0.161-1.193-0.369-1.893C442.568,502.407,441.604,502.024,441.167,501.166
            L441.167,501.166z M381.115,472.575L381.115,472.575c0.276,0.384,0.459,0.563,0.827,0.902c0.115,0.088,0.275,0.067,0.368,0.18
            c0.414,0.476,0.575,0.902,0.919,1.443c0.254,0.429,0.575,0.63,0.828,1.083c0.712,1.263,0.828,2.163,1.012,3.607
            c0.161,1.419,0.552,2.188,0.552,3.606c0,0.315-0.275,0.43-0.366,0.722c-0.116,0.339-0.093,0.542-0.093,0.903
            c0,0.834,0.574,1.239,0.919,1.983c0.229,0.496,0.344,1.173,0.92,1.173c0.782,0,1.24-0.271,2.022-0.271
            c0.873,0,1.356,0.36,2.231,0.36h1.816c0.274-0.541,0.343-0.925,0.643-1.443c0.276-0.45,0.781-0.473,1.104-0.902
            c0.366-0.495,0.274-1.06,0.643-1.533c0.483-0.608,1.149-0.541,1.84-0.901c0.62-0.316,0.874-0.676,1.379-1.173
            c0.529-0.519,0.942-0.766,1.38-1.353c0.62-0.813,0.965-1.397,1.747-2.074c0.206-0.182,0.345-0.451,0.645-0.451
            c0.159,0,0.229,0.157,0.366,0.18h2.276c1.356,0,2.069,0.384,3.427,0.541c1.47,0.182,2.298-0.135,3.77-0.088
            c1.725,0.044,2.69,0.359,4.414,0.359c0.553,0,0.851-0.225,1.381-0.359c0.457-0.114,0.759-0.203,1.194-0.363
            c1.31-0.517,2.184-1.082,2.76-2.343c0.321-0.7,0.458-1.084,0.734-1.805c0.091-0.271,0.091-0.519,0.277-0.722
            c0.183-0.203,0.46-0.181,0.734-0.272c0.759-0.27,1.15-0.675,1.84-1.08c0.873-0.519,1.172-1.129,1.839-1.895
            c1.188-1.331,2.432-1.761,3.142-3.227c-0.011-0.131-0.017-0.254-0.017-0.382c0-1.487,0.179-2.734,1.381-3.607
            c0.478-0.347,0.965-0.298,1.563-0.45c1.081-0.275,1.47-0.972,2.299-1.715c1.057-0.946,2.074-1.101,2.85-2.253
            c0.604-0.899,0.896-1.674,1.932-2.076c1.172-0.454,2.049-0.199,3.128-0.811c1.105-0.628,1.929-0.636,3.126-1.082
            c0.818-0.306,1.13-0.995,1.888-1.142c0.095-0.019,0.212-0.032,0.319-0.032c0.347,0,0.484,0.326,0.828,0.361
            c1.61,0.166,2.528,0.184,4.139,0.36c0.644,0.071,0.942,0.517,1.563,0.632c3.338,0.619,5.435,0.537,8.484,0.98l-0.007-0.001
            c0.62,1.512,0.812,2.943,1.271,4.521c0.276,0.946,0.069,1.535,0.185,2.525c0.092,0.858,0.254,1.331,0.458,2.166
            c0.163,0.698,0.323,1.105,0.461,1.804c0.139,0.676,0.229,1.104,0.276,1.804c0.045,0.563-0.138,0.879-0.092,1.441
            c0.092,1.264,0.322,1.965,0.322,3.226v3.99l-0.322,5.052c-0.506-0.496-1.012-0.654-1.563-1.083c-0.277-0.202-0.3-0.474-0.555-0.721
            c-0.388-0.384-0.666-0.587-1.009-0.992c-0.23-0.271-0.368-0.631-0.736-0.631c-0.322,0-0.461,0.226-0.736,0.36
            c-0.413,0.202-0.805,0.271-1.103,0.632c-0.185,0.224-0.16,0.45-0.275,0.721c-0.323,0.767-0.6,1.218-1.197,1.805
            c-0.506,0.496-0.874,0.788-1.104,1.442c-0.207,0.541-0.228,0.924-0.46,1.443c-0.253,0.564-0.596,0.88-0.826,1.442l2.298,5.412
            c0.323-0.112,0.553-0.27,0.92-0.27c1.219,0,1.907,0.27,3.126,0.27c0.506,0,0.737-0.405,1.103-0.722
            c0.762-0.677,1.359-1.488,1.933-2.345c1.933,0.632,3.325,0.711,5.349,1.027c-0.021,0.156-0.046,0.319-0.106,0.505
            c-0.471,1.466-0.541,2.437-1.471,3.653c-0.818,1.07-0.876,1.929-1.149,3.248c-0.334,1.601-0.932,2.391-1.703,3.834
            c-0.264,0.505-0.344,0.855-0.689,1.306c-0.838,1.105-1.77,1.319-3.034,1.939c-0.413,0.204-0.518,0.507-0.92,0.722
            c-1.034,0.564-1.585,0.97-2.621,1.533c-0.562,0.305-1.021,0.282-1.471,0.722c-0.298,0.294-0.276,0.633-0.552,0.947
            c-0.402,0.463-0.874,0.574-1.148,1.127c-0.404,0.801-0.335,1.376-0.645,2.209c-0.518,1.377-0.897,2.11-1.563,3.429
            c-0.84,1.646-1.484,2.3-2.347,3.833c-0.642,1.138-0.999,1.827-1.839,2.842c-0.379,0.461-0.494,0.845-1.011,1.172
            c-1.794,1.127-2.887,1.601-4.69,2.705c-1.668,1.016-2.196,2.074-3.725,3.292c-0.771,0.609-1.184,0.992-1.931,1.624
            c-2.321,1.984-3.576,3.123-6.115,4.824c-1.071,0.71-1.736,0.971-2.852,1.625c-0.587,0.338-0.851,0.631-1.471,0.901
            c-0.541,0.226-0.691,0.609-1.149,0.947c-1.023,0.744-1.634,1.488-2.921,1.488c-0.678,0-1.069-0.136-1.748-0.136
            c-0.85,0-1.299,0.361-2.149,0.361h-1.217c-0.633,0-0.988-0.226-1.621-0.226c-0.759,0-0.622,1.353-1.38,1.353
            c-1.104,0-1.713-0.102-2.805-0.271c-0.322-0.044-0.448-0.359-0.782-0.359c-0.54,0-0.931,0.213-1.241,0.63
            c-0.035,0.136,0,0.271,0,0.417c0,0.34,0.08,0.518,0,0.857c-1.091,0-1.702-0.013-2.792-0.013c-1.762,0-2.574-1.216-4.336-1.216
            c-0.699,0-0.977,0.461-1.655,0.676c-0.93,0.305-1.494,0.315-2.459,0.315c-0.967,0-1.54,0.012-2.461-0.27
            c-0.31-0.092-0.448-0.361-0.781-0.361c-0.77,0-1.196,0.315-1.885,0.631c-0.494,0.225-0.759,0.463-1.288,0.586
            c-0.458,0.114-0.771,0.034-1.194,0.227c-0.333,0.146-0.368,0.461-0.69,0.63c-1.172,0.643-1.988,0.902-3.334,0.902
            c-0.621,0-0.977,0.022-1.586-0.09c-0.345-0.056-0.518-0.271-0.875-0.271c-0.47,0-0.665,0.328-1.056,0.589
            c-0.334,0.213-0.563,0.28-0.921,0.45c-0.159,0.078-0.194,0.271-0.378,0.271h-1.265c-0.265,0-0.393-0.182-0.656-0.182
            c-1.275,0-1.575,1.579-2.851,1.579c-0.528,0-0.815-0.237-1.333-0.315c-0.76-0.125-1.333-0.146-1.839-0.723
            c-0.563-0.641-0.978-0.912-1.516-1.577c-0.336-0.418-0.646-0.768-1.198-0.768c-0.264,0-0.426,0.091-0.688,0.091
            c-0.323,0-0.69,0.102-0.829-0.18c-0.216-0.44,0.012-0.802-0.184-1.264c-0.092-0.214-0.368-0.169-0.599-0.225
            c-0.274-0.068-0.4-0.227-0.688-0.227c-0.494,0-0.794,0.361-0.965,0.813c-0.495-0.485-0.347-1.025-0.461-1.714
            c-0.127-0.744-0.759-0.98-0.873-1.714c-0.092-0.563,0.092-0.936-0.048-1.488c-0.172-0.698-0.47-1.048-0.919-1.623
            c-0.332-0.43-0.77-0.508-1.01-0.993c-0.357-0.709-0.128-1.24-0.185-2.028h-0.828v-0.543c0-0.078,0.093-0.111,0.093-0.191
            c0-0.248,0.046-0.383,0.046-0.631c0-0.528-0.209-0.98,0.184-1.341c0.459-0.429,1.035-0.463,1.287-1.038
            c0.528-1.194,0.734-1.973,0.734-3.27c0-1.531-0.389-2.423-1.148-3.765c-0.815-1.443-1.138-2.345-2.022-3.742
            c-0.403-0.644-0.805-0.881-1.195-1.534c-0.633-1.07-0.839-1.747-1.288-2.887c-0.942-2.379-1.253-3.799-2.298-6.132
            c-0.449-1.005-0.322-1.715-0.829-2.707c-0.254-0.495-0.494-0.732-0.735-1.218c-0.104-0.202-0.057-0.416-0.231-0.586
            c-0.425-0.416-0.964-0.598-0.964-1.185c0-0.325,0.045-0.518,0.045-0.844c0-0.181-0.033-0.271-0.045-0.451v-1.14
            c0-0.168,0.173-0.225,0.321-0.304c0.782-1.873,0.921-4.06,2.989-4.06c1.012,0,1.809,0.612,2.115,1.534
            c0.405,1.22-0.117,2.392,0.92,3.156c0.917,0.678,1.795,0.354,2.942,0.543c1.197,0.195,1.726,1.082,2.942,1.082
            c1.196,0,1.84-0.633,3.035-0.633c0.804,0,1.219,0.541,2.022,0.541c0.807,0,0.828-0.99,1.38-1.533
            c0.988-0.97,1.955-1.353,3.356-1.353c0.689,0,1.251,0.053,1.787,0.174L381.115,472.575z"/>

            <path id="LS" onmouseover="displayName('Lesotho')" onmouseout="displayName('')" class="land ls"
            d="M441.167,501.166c-0.942,1.173-2.115,1.195-3.589,1.625c-0.804,0.224-1.355,0.315-2.021,0.81c-0.414,0.318-0.507,0.678-0.828,1.082
            c-0.207,0.271-0.482,0.294-0.735,0.541c-0.988,0.97-1.473,1.625-2.115,2.797c-0.254,0.475-0.346,0.813-0.643,1.264
            c-0.461,0.698-1.059,0.924-1.841,1.263c-0.735,0.314-1.08,0.653-1.838,0.901c0.389,0.384,0.758,0.406,1.195,0.722
            c0.85,0.608,1.057,1.285,1.656,2.164c0.298,0.43,0.618,0.608,1.01,0.992c0.782,0.768,1.288,1.15,2.206,1.713
            c0.393,0.227,0.714,0.36,1.104,0.634c0.229,0.156,0.345,0.449,0.645,0.449c0.367,0,0.391-0.405,0.551-0.723
            c0.254-0.471,0.529-0.697,0.92-1.082c0.506-0.494,0.92-0.765,1.563-1.082c1.265-0.607,2.07-0.878,3.312-1.532
            c1.127-0.587,1.61-1.263,2.391-2.255c0.23-0.315,0.528-0.36,0.828-0.631c0.367-0.316,0.552-0.632,0.92-0.993
            c0.551-0.54,1.104-0.924,1.104-1.714c0-0.337-0.367-0.451-0.644-0.63c-0.528-0.361-0.942-0.497-1.472-0.812
            c-0.714-0.429-1.334-0.678-1.655-1.445c-0.276-0.676-0.161-1.193-0.369-1.893C442.568,502.407,441.604,502.024,441.167,501.166z"/>

            <path id="MG" onmouseover="displayName('Madagascar')" onmouseout="displayName('')" class="land coast mg"
            d="M582.236,467.705c-0.495,0.98-0.645,1.578-1.012,2.615c-0.345,0.971-0.862,1.375-1.334,2.3c-0.804,1.578-1.115,2.47-2.07,3.969
            c-1.091,1.713-1.712,2.627-3.034,4.148c-0.666,0.766-1.115,1.139-1.838,1.848c-0.807,0.791-1.356,1.489-2.495,1.489h-0.989
            c-0.24,0-0.378-0.09-0.621-0.09c-0.632,0-1-0.045-1.632-0.045c-1.552,0-2.402,0.496-3.735,1.308
            c-0.689,0.417-0.92,1.128-1.725,1.128c-0.334,0-0.517-0.09-0.85-0.09c-0.656,0-1.022,0.225-1.681,0.225
            c-0.527,0-0.735-0.451-0.986-0.902c-0.266-0.474-0.655-0.585-1.014-0.992c-0.574-0.652-0.884-1.138-1.699-1.487
            c-0.311-0.136-0.735-0.147-0.735-0.485v-1.183c-0.794-0.778-1.668-0.789-2.255-1.715c-0.344-0.54-0.321-0.969-0.321-1.611v-0.97
            c0-0.396,0.253-0.834-0.091-1.026c-0.265-0.146-0.507-0.213-0.599-0.496c-0.139-0.428-0.139-0.711-0.139-1.172
            c0-0.599,0.114-0.937,0.185-1.533l1.012-5.119c0-1.432-0.598-2.164-1.149-3.495c-0.448-1.07-0.379-1.781-0.598-2.931
            c-0.184-0.992-0.506-1.511-0.506-2.515v-1.195c0-0.462,0.184-0.699,0.229-1.162c0.069-0.642-0.24-1.194,0.23-1.622
            c0.473-0.429,0.816-0.621,1.196-1.128c0.437-0.597,0.84-0.856,1.241-1.488c0.367-0.586,0.518-1.06,1.104-1.442
            c0.506-0.339,0.977-0.339,1.288-0.857c0.425-0.7,0.38-1.229,0.78-1.938c0.311-0.554,0.782-0.677,1.104-1.219
            c0.196-0.326,0.208-0.552,0.369-0.901c0.481-1.037,0.827-1.623,1.516-2.525c0.473-0.62,1.059-0.924,1.059-1.703v-0.957
            c0.218-1.296,0.598-1.95,0.598-3.248c0-1.035-0.275-1.61-0.275-2.648v-0.925c0-2.141-0.826-3.28-0.826-5.422
            c0-0.881,0.55-1.31,0.55-2.188c0-0.439-0.506-0.599-0.506-1.038c0-0.845,0.115-1.318,0.184-2.164v-1.545
            c0-1.771,0.714-2.718,1.472-4.317c0.321-0.698,0.702-1.017,1.059-1.715c0.437-0.855,0.918-1.342,0.918-2.3
            c0-0.417-0.228-0.62-0.228-1.036c0-0.406,0.32-0.768,0.733-0.768c0.161,0,0.231,0.157,0.368,0.226
            c0.461,0.226,0.781,0.315,1.299,0.315h1.172c0.506,0,0.497-0.631,0.842-0.992c0.286-0.303,0.538-0.439,0.78-0.767
            c0.103-0.136,0.242-0.225,0.414-0.225c0.518,0,0.586,0.722,1.104,0.722c0.505,0,0.727-0.316,1.196-0.497
            c0.563-0.213,1.092,0.013,1.517-0.405c0.195-0.191,0.047-0.441,0.047-0.723c0.654-0.09,1.011-0.27,1.665-0.27h1.311
            c0.161,0,0.265-0.09,0.426-0.09c0.437,0,0.322,0.607,0.367,1.036c0.058,0.52,0.357,0.745,0.646,1.174
            c0.457-0.563,0.273-1.082,0.364-1.804c0.082-0.677,0.427-0.971,0.737-1.58c0.437-0.867,1.172-1.002,2.021-1.488
            c0.347-0.189,0.588-0.28,0.922-0.494c0.286-0.192,0.438-0.452,0.793-0.452h0.402c0.093,0.767,0.413,1.579,1.194,1.579
            c0.587,0,0.782-0.687,0.782-1.264c0-0.361-0.23-0.54-0.23-0.901c0-0.867,0.577-1.251,0.967-2.029
            c0.403-0.79,0.621-1.489,1.471-1.759c0.115,0.158,0.14,0.294,0.14,0.496c0,0.698-0.323,1.06-0.323,1.759
            c0.447-0.045,0.863,0.113,1.15-0.225c0.185-0.227,0.147-0.475,0.229-0.766c0.127-0.465,0.22-0.858,0.644-1.084
            c0.253-0.136,0.643-0.08,0.643-0.361c0-0.553-0.55-0.754-0.55-1.308c0-0.315,0.228-0.473,0.413-0.723
            c0.62-0.821,1.494-0.866,2.551-0.946v-1.07c0-1.07-0.435-1.646-0.435-2.718c0-0.519,0.413-0.745,0.413-1.263
            c0-0.315-0.14-0.496-0.14-0.811c0-0.553,0.633-0.813,1.197-0.813c0.609,0,0.965,0.395,1.286,0.901
            c0.138,0.226,0.048,0.633,0.322,0.633c0.311,0,0.46-0.181,0.735-0.316c0.311-0.147,0.599-0.214,0.782-0.496
            c0.185-0.281,0.185-0.552,0.459-0.768c0.103,0.136,0.14,0.36,0.323,0.36c0.598,0,1.207-0.111,1.38-0.675
            c0.161-0.552,0.079-0.914,0.091-1.489c0.012-0.372,0.265-0.54,0.461-0.855c0.391-0.643,0.344-1.174,0.344-1.929v-3.395
            c0.345,0.228,0.482,0.587,0.896,0.587c1.355,0,1.541-1.803,2.897-1.803c0.253,0.507,0.091,0.856,0.322,1.352
            c0.206,0.451,0.771,0.315,1.104,0.677c0.425,0.451,0.597,0.868,0.688,1.488c0.058,0.395-0.023,0.779,0.321,0.992
            c0.346,0.216,0.737,0.204,0.876,0.587c0.137,0.394,0.137,0.665,0.229,1.082c0.184,0.778,0.139,1.273,0.368,2.028
            c0.311,0.981,1.057,1.264,1.563,2.165c0.461,0.813,0.229,1.478,0.229,2.414c0,1.216-0.276,1.893-0.276,3.109
            c0,0.813,1.037,1.005,1.037,1.816v3.855c0,1.443-0.303,2.244-0.303,3.687c0,0.338,0.14,0.519,0.14,0.857
            c0,0.958-0.528,1.398-0.874,2.299c-0.206,0.541-0.527,0.79-0.688,1.354c-0.082,0.293-0.104,0.677-0.416,0.677
            c-0.274,0-0.321-0.304-0.506-0.495c-0.458-0.485-0.93-0.654-1.239-1.264c-0.301-0.587-0.393-1.308-1.059-1.308
            c-0.425,0-0.633,0.271-1.059,0.271v0.688c0,0.597,0.461,0.878,0.461,1.477c0,0.619-0.506,0.9-0.506,1.521
            c0,0.147-0.047,0.271-0.047,0.417c-0.139,1.625-0.264,2.515-0.643,4.104c-0.312,1.297-0.921,1.884-1.655,2.977
            c-0.264,0.395-0.827,0.429-0.827,0.901c0,0.192,0.194,0.271,0.229,0.451c0.08,0.439,0.045,0.698,0.045,1.15
            c0,1.668-0.414,2.672-1.333,4.081c-0.265,0.417-0.321,0.755-0.645,1.128c-0.655,0.755-0.862,1.318-1.195,2.255
            c-0.276,0.756-0.285,1.252-0.643,1.985c-0.276,0.563-0.577,0.788-0.921,1.307c-0.322,0.474-0.298,0.893-0.551,1.397
            c-0.563,1.116-0.851,1.815-1.103,3.067c-0.243,1.453-0.773,2.13-1.104,3.563c-0.46,1.951-0.852,2.999-1.519,4.871
            c-0.239,0.676-0.506,1.015-0.734,1.713c-0.243,0.732-0.425,1.139-0.782,1.804c-0.517,0.958-0.645,1.589-1.104,2.571
            c-0.826,1.746-1.252,2.762-1.977,4.555c-0.218,0.552-0.574,0.812-0.69,1.396c-0.148,0.723-0.091,1.172-0.367,1.85
            c-0.873,2.086-1.609,3.168-2.483,5.231c-0.321,0.777-0.711,1.184-0.781,2.028L582.236,467.705z"/>


        </g>
        <g id="Label_land" class="lland" >
            <text transform="matrix(1 0 0 1 380.0918 520.9473)">South Africa</text> 
            <text transform="matrix(1 0 0 1 561.8945 442.4131)">Madagascar</text>           

        </g>
        <g id="Label_sea" class="lsea">
            <text transform="matrix(1 0 0 1 459.1904 520.9473)">Lesotho</text>
            <text transform="matrix(1 0 0 1 476.6943 496.3545)">Swaziland</text>

        </g>
    </g>
        <text class="label" id="country_id" x="10" y="500"> </text> 
    </svg>
            </div>
        </div>    <!-- end DataPage -->

     </div><!-- end Holder -->
    <script>//<![CDATA[
            var transMatrix = [1,0,0,1,0,0];
             function init(evt)
             {
                if ( window.svgDocument == null )
                {
                svgDocument = evt.target.ownerDocument;
                }
                mapMatrix = svgDoc.getElementById("map-matrix");
                width  = evt.target.getAttributeNS(null, "width");
                height = evt.target.getAttributeNS(null, "height");         
            }

            function displayName(country_name) //display mouse_over event
            {
                document.getElementById('country_id').firstChild.data = country_name;
            }

            function fill_contact(evt) //display click event
            {
                var country_id = evt.target.id
                document.getElementById('country_name').firstChild.data = country_id
            }

    //]]>
            </script>
    </body>
    <html>

Bây giờ chỉ để viết một hàm để gọi dữ liệu bằng XMLHttpRequest. Một phương pháp khác được sử dụng ở đây

Cảm ơn




  1. Database
  2.   
  3. Mysql
  4.   
  5. Oracle
  6.   
  7. Sqlserver
  8.   
  9. PostgreSQL
  10.   
  11. Access
  12.   
  13. SQLite
  14.   
  15. MariaDB
  1. Chỉ mục giải quyết cho người dùng bảng bị hỏng; cố gắng sửa chữa nó

  2. MySQL:Mã lỗi:1242 Truy vấn con trả về nhiều hơn 1 hàng

  3. JPA chèn kết quả cha / con trong MySQLIntegrityConstraintViolationException

  4. Xếp hạng người dùng trong mysql theo điểm của họ

  5. Làm cách nào để bảo vệ tên người dùng và mật khẩu MySQL khỏi bị dịch ngược?