• Custom world map using image area and jquery.

    Step 1

    Create three image 1). Main map image 2).Map hover image and 3).Empty Image

    Step 2

    Create image map area.

     

    1
    2
    
    <!-- saved from url=(0014)about:internet -->
    			<link href="css/map.css" rel="stylesheet" media="all" type="text/css" />

    Step 3

    Map.css

    Css :
     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    
    #rechterkolom  {
              margin-top:-8px;
              border:none !important;
    }
    #rechterkolom ul  {
              list-style:none;
              margin:0;
              padding:0;
              border:none !important;
    }
     
    #rechterkolom div#MyKaart1 {
              position:relative;
              z-index: 5;
              border:none !important;
    }
    #rechterkolom div#MyKaart1 ul {
              list-style: none;
              margin:0;
              padding:0;
              border:none !important;
    }
    #rechterkolom div#MyKaart1 li {
              background:url(../images/maphover.png) no-repeat;
              display: none;
              height:232px;
              position: absolute;
              text-indent: -1000em;
              top:0px;
              width:532px;
              z-index: 6;
              border:none !important;
    }
     
    #rechterkolom div#MyKaart1 li#A1 {
               background-position: -1046px 0px;
    }
    #rechterkolom div#MyKaart1 li#A2 {
              background-position: 0px 0px;      
    }
    #rechterkolom div#MyKaart1 li#A3 {
              background-position: 0px 0px;      
    }
    #rechterkolom div#MyKaart1 li#A4 {
               background-position: -1046px -232px;
    }
     
    #rechterkolom div#MyKaart1 li#A5 {
               background-position: -1046px -232px;
    }
    #rechterkolom div#MyKaart1 li#A6 {
              background-position: -523px 0px;
    }
    #rechterkolom div#MyKaart1 li#A7 {
              background-position: -523px 0px;
    }
     
    #rechterkolom div#MyKaart1 li#A8 {
    background-position: 0px 0px;      
    }
    #rechterkolom div#MyKaart1 li#A9 {
              background-position: 0px 0px;      
    }
    #rechterkolom div#MyKaart1 li#A10 {
              background-position: 0px 0px;      
    }
    #transparent_map {
     
              height:232px;
              position: absolute;
              top:0px;
              width:532px;
              z-index: 8;
              border:none !important;
              border:0 !important;
    }
    /* tooltip */
     
    p#vtip {
              border-radius:5px;
              border-radius:5\ie9 px;
              -moz-border-radius:5px !important;
              -webkit-border-radius: 5px !important;
              display: none;
              position: absolute;
              padding: 5px 10px;
     
              background-color: #608CC3;
              color:#fff;
              z-index: 9999;
    }
    p#vtip #vtipArrow {
              position: absolute;
              top: 0px;
              left: 5px
    }
     
    area:hover
    {
              cursor:pointer;
    }

    Step 4

    Map.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    $(document).ready(function()
    {
              if($('#kaart'))
              {
                       var selected = '';
                       $('#kaart area').each(function()
                       {
                                 $(this).mouseover(function(e)
                                 {
                                                    var provincie_id = this.id.replace('area_', '');
                                                    if(provincie_id == "A1" || provincie_id == "A2")
                                                    {                          
                                                              $('#A1').show();
                                                              $('#A2').show();
                                                              this.t = 'North &amp; Central American and the Caribbean';
                                                              this.top = (e.pageY + 15); this.left = (e.pageX -5);
     
                                                              $('body').append( '

    North & Central American and the Caribbean

    ‘ ); $(‘p#vtip’).css(“top”, this.top+”px”).css(“left”, this.left+”px”).fadeIn(“medium”); } else if(provincie_id == “A3″ || provincie_id == “A4″) { $(‘#A3′).show(); $(‘#A4′).show(); this.t = ‘South America’; this.top = (e.pageY + 15); this.left = (e.pageX -5); $(‘body’).append( ‘

    South America

    ‘ ); $(‘p#vtip’).css(“top”, this.top+”px”).css(“left”, this.left+”px”).fadeIn(“medium”); } else { if(!(provincie_id == “A1″ || provincie_id == “A2″ || provincie_id == “A3″ || provincie_id == “A4″)) { $(‘#’+provincie_id).show(); if(provincie_id == ‘A5′) { this.t = ‘South Europe, France, Turkey and Israel’; } else if(provincie_id == ‘A6′) { this.t = ‘East Asia’; } else { this.t = provincie_id; } this.title = ”; this.top = (e.pageY + 15); this.left = (e.pageX -5); $(‘body’).append( ‘

    ‘ + this.t + ‘

    ‘ ); $(‘p#vtip’).css(“top”, this.top+”px”).css(“left”, this.left+”px”).fadeIn(“medium”); } } }); $(this).mouseout(function(e) { var provincie_id = this.id.replace(‘area_’, ”); if(provincie_id == “A1″ || provincie_id == “A2″) { if(selected.search(provincie_id) != -1 && selected != ”) { $(‘#A1′).show(); $(‘#A2′).show(); } else { $(‘#A1′).hide(); $(‘#A2′).hide(); } //this.title = this.t; $(“p#vtip”).fadeOut(“slow”).remove(); } else if(provincie_id == “A3″ || provincie_id == “A4″) { if(selected.search(provincie_id) != -1 && selected != ”) { $(‘#A3′).show(); $(‘#A4′).show(); } else { $(‘#A3′).hide(); $(‘#A4′).hide(); } //this.title = this.t; $(“p#vtip”).fadeOut(“slow”).remove(); } else { if(selected != provincie_id) { var provincie_id = $(this).attr(‘id’).replace(‘area_’, ”); $(‘#’+provincie_id).hide(); } //this.title = this.t; $(“p#vtip”).fadeOut(“slow”).remove(); } }); $(this).mousemove(function(e) { this.top = (e.pageY + 30); this.left = (e.pageX +2); }); $(this).click(function(e) { var provincie_id = $(this).attr(‘id’).replace(‘area_’, ”); if(provincie_id == “A1″ || provincie_id == “A2″) { if(selected.search(provincie_id) == -1 && selected != ”) { var line = selected.split(“,”); for(i=0;i<line.length;i++) { $(‘#’+line[i]).hide(); } } $(‘#’+selected).hide(); $(‘#A1′).show(); $(‘#A2′).show(); selected = “A1,A2″; // Call here all click event function } else if(provincie_id == “A3″ || provincie_id == “A4″) { if(selected.search(provincie_id) == -1 && selected != ”) { var line = selected.split(“,”); for(i=0;i<line.length;i++) { $(‘#’+line[i]).hide(); } } $(‘#’+selected).hide(); $(‘#A3′).show(); $(‘#AA’).show(); selected = “A3,A4″; // Call here all click event function } else { $(‘#’+provincie_id).show(); if(selected.search(provincie_id) == -1 && selected != ”) { var line = selected.split(“,”); for(i=0;i<line.length;i++) { $(‘#’+line[i]).hide(); } } $(‘#’+selected).hide(); selected = provincie_id; // Call here all click event function } }); }); } });

Comments on this post

Leave a Reply

  • Security Code :


    7 − two =