Client-side image map not working in Safari and Chrome. Works fine in Firefox
I have a client-side image map that works fine in Firefox but does not seem to work in Safari and Chrome (on Mac OS). I am at a loss for why this开发者_JAVA技巧 is happening as I am pretty sure I have the syntax right and client-side image maps are supported by almost all browsers. Could it be that I am using a PNG? Here is the code ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>My Image Map Page</title>
<style type="text/css">
body
{
background-image:url('images/stripe-background.jpg');
background-position:center;
background-attachment:fixed;
}
</style>
</head>
<body>
<center><img src="images/homepage-image-transparent.png" usemap="#homepagemap" ismap /></center>
<map id="homepagemap" name="homepagemap">
<area shape="rect" coords="633,531,917,736" href="page1.html" alt="Page 1" />
<area shape="rect" coords="321,531,606,736" href="page2.html" alt="Page 2" />
<area shape="rect" coords="10,531,296,736" href="page3.html" alt="Page 3" />
<area shape="rect" coords="732,478,849,505" href="page4.html" alt="Page 4" />
</map>
</body>
</html>
I figure I must be missing something. Thank you for any assistance.
try a CSS like this:
background-image:url(images/stripe-background.jpg);
I got it to work, but I am baffled as to why. I commented out the CSS style rules dealing with the background image.
//background-image:url('images/stripe-background.jpg');
//background-position:center;
//background-attachment:fixed;
Since this was the first time I had used a background image for a website. I figured perhaps something in the CSS rules was causing a problem. Once I commented out the CSS rules everything worked fine in Safari and Chrome. The really confusing thing is I UN-commented the CSS rules one by one trying to figure out which one was causing the issue and everything still worked. Even with all of them UN-commented. So now I am am back to the original code and the image map are working. I hate solutions like these where something works and you have no idea why it didn't before.
In any case .. thanks for the help.
加载中,请稍侯......
精彩评论