Du kan begynde med at lave dine billednavne om, så de indeholder ID'et på den pågældende region. Kortet uden highlights kan du så kalde noget med 0 - f.eks:
EnhederLl_0.jpg, EnhederLl_1.jpg, EnhederLl_2.jpg ... osv.
Herefter kan du lave din kode om til (som den vil se ud på Bornholm siden):
<script type="text/javascript">
var sDefImgName = "EnhederLl_2.jpg";
var sImgPath = "images/";
var aImgNames = [
"EnhederLl_1.jpg",
"EnhederLl_2.jpg",
"EnhederLl_4.jpg"
];
var aPreloads = [];
for (var i=0,j=aImgNames; i<j; i++) {
aPreloads[i] = new Image();
aPreloads[i].src = sImgPath+aImgNames[i];
}
function swap(sSrc) {
var oImg = document.getElementById("roll");
oImg.setAttribute("src", sImgPath+sSrc);
}
</script>
<map name="minMap" style="border: 0px">
<area href="
https://secure.mim.dk/sns/webshop/KatalogRegion.aspx?RegionID=1" shape="poly" coords="...." onmouseover="swap('EnhederLl_1.jpg')" onmouseout="swap(sDefImgName)" alt="Vendsyssel" onFocus=blur() />
<area href="
https://secure.mim.dk/sns/webshop/KatalogRegion.aspx?RegionID=2" shape="poly" coords="....." onmouseover="swap('EnhederLl_2.jpg')" onmouseout="swap(sDefImgName)" alt="Bornholm" onFocus=blur() />
<area href="
https://secure.mim.dk/sns/webshop/KatalogRegion.aspx?RegionID=4" shape="poly" coords="....." onmouseover="swap('EnhederLl_3.jpg')" onmouseout="swap(sDefImgName)" alt="Himmerland" onFocus=blur() />
....
</map>
<img border="0" src="images/EnhederLl_2.jpg" usemap="#minMap" id="roll" name="roll" />
Med serverkode skal du skrive regions ID'et (2) ind i filnavnet her:
var sDefImgName = "EnhederLl_2.jpg";
- og her:
<img border="0" src="images/EnhederLl_2.jpg" usemap="#minMap" id="roll" name="roll" />