Safari support for image maps [Archive]

View Full Version : Safari support for image maps

JohnK

08-21-2006, 04:08 PM

Hi. I've got the following image map code that works fine for Firefox and IE but not for Safari. Does Safari have no support for image mapping or is there some other way of doing it that I need to consider?

<img src="/68-MYP/oxf-theme/images/1designCycle-en.png" alt="design cycle" usemap="#Map">
<map name="Map">
<area shape="rect" coords="59,145,131,175" href="16">
<area shape="rect" coords="143,103,173,136" href="15">
<area shape="rect" coords="60,18,133,46" href="13">
<area shape="rect" coords="140,57,176,89" href="14">
<area shape="rect" coords="10,82,72,107" href="17">
</map>
</img>

Thanks in advance for any help.

John

DavidLeeRoth

12-09-2006, 07:45 PM

Hi, I have a same kind of problem :( . Only after a "refresh" the page, linked to via an image map, is displayed...

Did you find any solution yet?

Kind regards,
David

djr33

12-09-2006, 09:46 PM

If the code is correct, then the map will work just fine in safari. That's my main browser on my mac, and it works fine with image maps as far as I can tell, and at least with the several that I have on my site.

Please link to your pages so we can take a look at the code.

As for the code posted above, there is no close tag "</img>"... just remove that, and see if it works. The rest seems to be fine... but if that doesn't work, we can take a closer look.

DavidLeeRoth

12-10-2006, 12:05 PM

Maybe it has to do with php? In between a friend of mine tested it on an Apple and he sometimes also had a white screen after selection of one of the "top" buttons. After "refresh" it appeared.
Here is a testlink of the site: http://www.d-liteweb.nl/test/
On page "voorwaarden" is a button "volgende". Also on page "collectie" are buttons "volgende" and "vorige"... (next and previous)... They only seem to display the next page after refresh. So: select button = white screen, select refresh = page displayed...

Hope you can help me...

Kind regards,
David

PS: On FF and IE it works fine...

jscheuer1

12-13-2006, 07:13 AM

DavidLeeRoth

12-13-2006, 09:07 PM

Hi John,

Do you have also a good idea for me?

Thanks in advance,
David

jscheuer1

12-13-2006, 10:05 PM

I have no Mac to test on but, you really shouldn't need an image map for that layout. Your layout should be more text based, then simple linked text or linked images would suffice. In my browser the pages are blank to begin with, until the browser loads that big image - no refresh is needed (only patience). Once the image is cached, the page loads right away.

DavidLeeRoth

12-15-2006, 09:23 AM

Yes, you're right about the "big" image, however that's what my client really wanted. It's also the first time I did it like that since the other pages also contain a lot of photoos... And to be honest with adsl it still loads quite fast. But that doesn't solve the image-map/ php problem (also on the "collectie" pages).
Of course thanks for your help.

Maybe Mr. djr33 could have a look on it on his Mac?

djr33

12-15-2006, 09:38 AM

My mac is currently sitting upside-down in the corner.

I will check when I get it setup again.

(The quarter just ended, so I'm home... I'll be setting it up soon.)

DavidLeeRoth

12-23-2006, 11:41 PM

Ok thanks djr33, your my Christmas (ok... end-of-the-year :)) hope...

djr33

12-24-2006, 03:57 AM

Hmm.... I'm looking at your page. Here's all the source as I see it output.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=us-ascii">
<link rel="STYLESHEET" href="styles/thehappyfewstyles.css" type="text/css">

<title>The Happy Few</title>
</head>

<body bgcolor="#FFFFFF">
<center>

<table background="gfx/topbar.gif" border="0" cellpadding="0" cellspacing="0" border="0" height="57" width="1006"><tr>
<td align="center"><a href="index.php?menu_id=home" target="_self">home</a></td>
<td align="center"><a href="index.php?menu_id=collectie" target="_self">collectie</a></td>
<td align="center"><a href="index.php?menu_id=present" target="_self">present</a></td>
<td align="center"><a href="index.php?menu_id=voorwaarden" target="_self">voorwaarden</a></td>
<td align="center"><a href="index.php?menu_id=bestellen" target="_self">bestellen</a></td>
<td align="center"><a href="index.php?menu_id=contact" target="_self">contact / info</a></td>
</tr></table>
<table cellpadding="0" cellspacing="0" border="0" height="551" width="1006"><tr><td><img src=gfx/home.gif></td></tr></table> </center>

</body>
</html>

I'm not seeing any image map. Is that the right link?
( http://www.d-liteweb.nl/test/ )

Maybe as you said, it's related to the PHP. PHP has nothing to do with how html is handled, but it does dictate what html is output. If there is an error/overlooked thing in the PHP code so the image map isn't output, then that would cause problems. However, this would cause problems in most browsers, especially if the entire image map isn't output. It would be weird to find an error from PHP that would make just mac browsers have trouble.
If that isn't the full html you expected, then fix the PHP to output the right html, then I'll be happy to test again.

DavidLeeRoth

12-24-2006, 11:19 AM

I think you just checked the source code of the first page. There is indeed no image map. The image map is in the pages: Collectie (and Voorwaarden). There you will see 2 arrows with text: Vorige and Volgende. They are in an image map.
I hear that when you click on them on an Apple, you will get a white screen. After Refresh the Vorige or Volgende page is displayed (when it was displayed once (so in cache) it seems to be displayed immediately, so as it should be).
The source code of Collectie is (as you can check):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=us-ascii">
<link rel="STYLESHEET" href="styles/thehappyfewstyles.css" type="text/css">

<title>The Happy Few</title>
</head>

<body bgcolor="#FFFFFF">
<center>

<table background="gfx/topbar.gif" border="0" cellpadding="0" cellspacing="0" border="0" height="57" width="1006"><tr>
<td align="center"><a href="index.php?menu_id=home" target="_self">home</a></td>
<td align="center"><a href="index.php?menu_id=collectie" target="_self">collectie</a></td>
<td align="center"><a href="index.php?menu_id=present" target="_self">present</a></td>
<td align="center"><a href="index.php?menu_id=voorwaarden" target="_self">voorwaarden</a></td>
<td align="center"><a href="index.php?menu_id=bestellen" target="_self">bestellen</a></td>
<td align="center"><a href="index.php?menu_id=contact" target="_self">contact / info</a></td>
</tr></table>
<table cellpadding="0" cellspacing="0" border="0" height="551" width="1006">
<tr><td>
<map id="FPMap0" name="FPMap0">
<area href="index.php?collectie=collectie9" target="_self" shape="rect" coords="488, 390, 542, 416">
<area href="index.php?collectie=collectie2" target="_self" shape="rect" coords="488, 464, 556, 488">
</map>
<img border="0" src="gfx/collectie.gif" usemap="#FPMap0">
</td></tr>
</table>
</center>

</body>
</html>

djr33

12-26-2006, 08:38 AM

Working just fine for me.
There's a slight pause with white and the top menu only, but that is likely just due to loading time. Maybe they're on a slow connection.

DavidLeeRoth

12-26-2006, 12:56 PM

And you tested that on an Apple with Safari?
And you see no problems in the code?

djr33

12-26-2006, 01:42 PM

I didn't inspect the code too closely, but, yes, Apple with Safari.
It was just fine, except that there was a pause while the page loaded for the first time. (after loading the page via the image map, it was fast, just that first click on the image map was slow. this, however, has nothing to do with the image map, and everything to do with the next page, whether the loading time is based on the graphics, render time, or something else.)

DavidLeeRoth

12-26-2006, 08:57 PM

Ok, thanks very much, I can't make the pages faster to load because most of it is photos...
Thanks again for testing!
Kind regards!

djr33

12-26-2006, 09:31 PM

No problem. Good luck.