IRL map using large PNG

by chrisloughnane

HTML

<div class="countyhover">County Name Here</div>
<div class="countyNamehover">County Name Here</div>
<div id="map" class="container">
    <h2>Ireland's Accommodation by County</h2>   
    <div id="ireland-placeholder">
        <div id="irish-counties-placeholder" class="">
        </div>
        <img src="http://www.goireland.com/GI_Generic_Images/transparent.gif" width="250" height="315" usemap="#ireland-map" border="0" id="ireland-image">
        <map name="ireland-map" id="ireland-map">
            <area shape="poly" coords="186,76,181,82,179,83,172,80,167,82,162,87,155,80,151,76,146,77,143,74,147,70,141,65,136,62,132,62,134,57,148,55,151,47,155,41,165,48,172,49,173,55,180,60,190,64,190,70,185,78" href="/tyrone/" id="tyrone" alt="Tyrone" title="Tyrone">
            <area shape="poly" coords="132,54,144,52,151,40,150,32,161,22,168,17,171,15,169,12,165,12,160,7,157,6,152,6,158,10,159,13,152,13,149,16,149,23,149,28,146,37,143,41,140,39,140,36,142,28,143,22,139,15,133,18,133,21,129,25,126,18,120,24,115,24,111,27,113,32,107,33,107,38,105,43,113,46,106,54,91,57,95,64,118,60,120,65,115,74,133,68,129,60,131,54" href="/donegal/" id="donegal" alt="Donegal" title="Donegal">
            <area shape="poly" coords="155,33,160,28,168,32,173,24,174,21,182,22,187,18,187,29,191,44,195,52,191,58,190,62,179,56,176,55,174,49,168,46,156,37,155,32" href="/derry/" id="derry" alt="Derry" title="Derry">
            <area shape="poly" coords="206,70,208,56,201,55,197,53,191,34,195,14,213,20,220,40,229,49,229,55,219,64,211,73,204,70" href="/antrim/" id="antrim" alt="Antrim" title="Antrim">
            <area shape="poly" coords="160,87,154,81,150,79,143,81,142,72,145,69,139,65,134,70,127,72,121,79,121,82,131,92,142,100,151,104,157,101,163,89,160,86" href="/fermanagh/" id="fermanagh" alt="Fermanagh" title="Fermanagh">
            <area shape="poly" coords="181,86,191,74,200,74,204,72,200,80,201,87,201,98,205,104,194,110,190,110,189,99,186,97,182,94,181,85" href="/armagh/" id="armagh"...

CSS

body{
    font-family:  Arial, Helvetica, sans-serif;
    font-size:100%;
    border-top:5px solid #218e4c;
    padding-top:15px;
}

.verdana{
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

/* headings */

h1, h2, .faux-heading {
    font-family: "Cabin", Futura, "Trebuchet MS", Arial, Helvetica,  sans-serif;
}

h1 {
        font-size:1.5em;
}

h2{
    font-size: 1.375em;
}

h3{
    font-family: "Trebuchet MS", Arial, Helvetica,  sans-serif;
    font-size: 1.125em;
    line-height:1.8em;
}

/* homepage imagemap **************************  */


#map{
    width:100%;
}

#map h2{
    margin-bottom:15px;
}

#ireland-placeholder, #irish-counties-placeholder {
    top:0;
    width:250px;
    height:315px;
    background:url(http://www.goireland.com/affiliates/goireland/Images/GIImages/ireland.png);
}
#ireland-placeholder {
    position:relative;
    float:left;
}
#irish-counties-placeholder {
    position:absolute;
}
#ireland-map, #ireland-image {
    z-index:2;
    position:absolute;
    top:0;
}
    
#irish-counties-placeholder.highlight-antrim {background-position:1px -315px;}
#irish-counties-placeholder.highlight-armagh {background-position:1px -630px;}
#irish-counties-placeholder.highlight-carlow {background-position:1px -945px;}
#irish-counties-placeholder.highlight-cavan {background-position:1px -1260px;}
#irish-counties-placeholder.highlight-clare {background-position:1px -1575px;}
#irish-counties-placeholder.highlight-cork {background-position:1px -1890px;}
#irish-counties-placeholder.highlight-derry {background-position:1px -2204px;}
#irish-counties-placeholder.highlight-donegal {background-position:1px -2520px;}
#irish-counties-placeholder.highlight-down {background-position:1px -2835px;}
#irish-counties-placeholder.highlight-dublin {background-position:1px -3150px;}
#irish-counties-placeholder.highlight-fermanagh {background-position:1px -3465px;}
#irish-counties-placeholder.highlight-galway {background-position:1px...

JavaScript

$(function() { 


      $.fn.irelandImageMap = function(settings) {
          var defaults = {
                  image_map_selector: '#ireland-map area',
                  place_name_selector: '#ireland-place-names'
              },
              $this = this,
              options = $.extend({}, defaults, settings),
              className;
                          
          $(options.image_map_selector).hover(function(e) {
              className = 'highlight-'+this.id;
              $this.addClass(className);
              $('.'+className, options.place_name_selector).addClass('selected');
          }, function(e) {
              className = 'highlight-'+this.id;
              $this.removeClass(className);
              $('.'+className, options.place_name_selector).removeClass('selected');
          });
          
          $('li a', options.place_name_selector).hover(function(e) {
              $this.addClass($(this).parent().attr('class'));
          }, function(e) {
              $this.removeClass($(this).parent().attr('class'));
          });
      };
    
    $('#ireland-map area, ul#ireland-place-names').hover(function(e) {
        //alert('Selecting the ' + this.alt + '\n URL: ' + this.href);
        $('.countyhover').text(this.title);
        //var countyName = lastCountyName = $('ul#ireland-place-names li > ').text();
        var className = lastClassName = 'highlight-'+this.id;
         //$('.countyNamehover').text(countyName);           

        
        $('#irish-counties-placeholder').addClass(className);
        //$('#ireland-place-names li a').addClass('selected');
        //$('#ireland-place-names li .highlight-cavan li-col-1 a').addClass('selected');
        $('.'+className).addClass('selected1');
        
        //$('#listbox option[value="' + this.id + '"]').attr('selected', 'selected');

        //return false;
    },function(){
        $('#irish-counties-placeholder').removeClass(lastClassName);
       ...