I'm using area tags on one of my pages along with the jquery.maphighlight in order to be able to select parts of the picture, light them up or light them off when the user clicks on them. I have a lot of areas that I'm using this on, about 20 and I'm using the href attribute to figure out which one was clicked and whether I should highlight it on or off. The area looks something like this:
<area data-maphilight='{"fillColor":"00cc00","shadow":false, "strokeColor":"000000", "alwaysOn":false}' shape="poly" href="20" coords="554,266,548,268,485,268,475,266,471,266,471,283,484,295,548,295,551,293,555,295,561,296,568,296,573,293,576,288,577,282,576,275,573,270,569,267,563,265" />
The javascript looks at the href attribute value and figures out what to do. Everything works fine except in IE8. The issue is that since the href attribute is there, IE8 considers this to be a link and redirects me again to the same page just adding the href value after it while the other browsers just run the js functions and do nothing else. So my question is how can I stop the IE8 redirecting me to another page and just stay on the current one as I can see that the JavaScript is working fine in the second before the page disappears and I'm redirected to the next one?
Just don't use the href attribute. Use data-reference="20" or something.