Using jquery for an image map to change css
Hi there,
I am new to jquery and hoping someone can help me out.
I am creating an image map and with the hovering I want to change a css class based on where the user hovers.
I have it working
-
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#northland").mouseover(function() {
$("#mapOverlay").addClass('northland');
});
$("#northland").mouseout(function() {
$("#mapOverlay").removeClass('northland');
});
});
<div class="map" id="map">
<div id="mapOverlay">
<img src="styles/images/Map/NZMAP_Blank.gif" alt="New Zealand" name="nzMap" width="319" height="449" border="0" usemap="#nzMap" id="nzMapImage"/>
</div>
<map name="nzMap" id="nzMap" >
<area shape="poly" coords="193,73,206,55,200,35,165,8,152,9,163,33" id="northland" href="#" alt="northland"/>
<area shape="poly" coords="193,73,208,116,223,102,206,57" href="#" alt="auckland" id="auckland"/>
<area shape="poly" coords="210,119,205,151,213,167,229,170,226,154,229,145,235,141,240,134,235,121,239,117,237,94,234,87" href="#" alt="waikato" id="waikato" />
<area shape="poly" coords="213,167,212,183,204,188,192,179,184,178,180,168,199,159,204,153" href="#" alt="taranaki" id="taranaki" />
<area shape="poly" coords="241,133,250,132,255,138,252,147,256,159,265,150,279,136,286,135,293,118,260,127,241,115,236,121" href="#" alt="bayofplenty" id="bayofplenty" />
<area shape="poly" coords="230,170,244,169,256,161,252,145,252,134,240,135,228,147,226,156" href="#" alt="lakes" id="lakes" />
<area shape="poly" coords="244,169,242,184,239,192,243,196,247,207,250,209,258,199,265,184,260,174,267,167,281,166,284,172,288,167,284,162,279,156,274,156,267,149" href="#" alt="hawkesbay" id="hawkesbay" />
<area shape="poly" coords="267,149,280,155,286,163,288,153,299,149,300,133,301,126,305,123,300,120,294,118" href="#" alt="tairawhiti" id="tairawhiti" />
<area shape="poly" coords="207,188,215,197,222,189,232,183,241,185,243,172,239,169,227,171,214,167" href="#" alt="wanganui" id="wanganui" />
<area shape="poly" coords="216,196,214,217,226,217,230,220,237,215,242,219,251,210,244,201,240,192,241,186,233,184,225,188" href="#" alt="manawatu" id="manawatu" />
<area shape="poly" coords="222,217,213,238,215,244,219,245,231,237,243,219,238,216" href="#" alt="wairarapa" id="wairarapa" />
<area shape="poly" coords="221,217,213,236,208,239,201,235,214,217" href="#" alt="wellington" id="wellington" />
<area shape="poly" coords="197,229,186,237,191,249,188,256,181,256,164,273,155,261,150,266,143,261,142,251,153,230,185,219,162,220,155,209,143,217,152,230" href="#" alt="nelson/mrlborough" id="nelson" />
<area shape="poly" coords="13,396,75,411,77,398,73,380,67,366,62,357,63,340,50,331,36,347,19,370" href="#" alt="southland" id="southland" />
<area shape="poly" coords="77,410,107,382,117,351,101,345,100,335,93,329,91,319,80,326,69,331,63,340,62,355" href="#" alt="otago" id="otago" />
<area shape="poly" coords="50,329,62,338,96,311,125,288,131,288,151,267,142,251,152,230,143,219" href="#" alt="westcoast" id="westcoast" />
<area shape="poly" coords="90,318,117,350,122,332,149,315,162,317,159,295,184,258,153,267" href="#" alt="canterbury" id="canterbury" />
</map>
</div>
.mapOverlay
{
background-image: url('../images/Map/NZMap_Blank.gif');
height:449px;
width:319px;
}
.northland
{ background-image: url('../images/Map/NZMap_Northland.gif');
height:449px;
width:319px;
}
.map
{ background-image: url('../images/Map/NZMap.gif');
height:449px;
width:319px;
z-index:1000;
}
As you can see I have only wired up id="northland" in my jquery. Is there a way where I dont have to repeat my jquery code for each of the different area shapes? I thought if I were to name each of the css classes the same as id that would help.
I really dont want to have to write the mouseover and mouse out functions for each of the regions.
Any help would be great.
Thank you