I've got a map with area tags set up, for which I'd like to have a onmouseover event, changing the cursor's appearance to tell the user its clickable. But, there is a problem using safari:
Using onmouseover="style.cursor = 'pointer';" doesen't seem to work in the area tag. Not generally, as it totally triggers other things when hovering. Also safari lets me change its appearance using other ways, but with this combination it just doesen't...
<div class="desktop"> <img src="docs/docs_overview_desktop.jpg" usemap="#desktop"> <map name="desktop"> <area shape="rect" coords="2057.143,0,2742.857,960" onmouseover="style.cursor = 'pointer';" onclick="document.getElementById('lightboxSrc').src='docs/docs_000.jpg'; lightboxOpen();"> </map> </div>
Safari isn't always supporting the "general" functions that other browsers do these days. But still, I can hardly believe that they wouldn't support an onmouseover event, so it's probably the rest of the code that's causing the problem for it not to work.
If really want to use javascript to apply the styling for a pointer then try to make it more specific like this:
onmouseover="this.style.cursor='pointer';"
But why use JavaScript when you want to add a styling? CSS alone would be enough just place this in your stylesheet and you can remove the whole inline onmouseover:
.desktop area:hover{
cursor: pointer;
}
Or use an empty href="#"so the browsers sees it's a link and it shows the pointer by default.
Here's an example. Make sure your coordinates are in the image aswell of course!
img {
width: 100px;
height: 100px;
border: solid 1px black;
}<div class="desktop">
<img src="docs/docs_overview_desktop.jpg" usemap="#desktop">
<map name="desktop">
<!-- Coords are from left uper corner (10px on the x and y axis) to the right bottom corner (90px on the x and y axis) -->
<area shape="rect" coords="10,10,90,90" onclick="document.getElementById('lightboxSrc').src='docs/docs_000.jpg'; lightboxOpen();" href="#">
</map>
</div>