Images and image maps do not respond to events on Safari

Question

Level 1

0 points

Images and image maps do not respond to events on Safari

Hello everyone,

We have been experiencing issues with events not responding to images associated with image maps, on Safari browser. After the DOM is loaded with new image and corresponding image maps, events such as mouseover and click observing this divs do not respond or get triggered. DOM seems to be updated correctly but behaves differently (and it works correctly in all other browsers except Safari).

This behaviour is only noticed in Safari browser running both on Windows and Mac. (Tested on Safari Version 3.1.1 on running on Windows and Mac)

For you all to have a closer look at this issue, I have created a sample that has this problem, similar to one we experienced during one of our recent projects. Please click on the link below to get to the sample (I recommend you to try this either in Firefox or IE before you do on Safari)

http://www.hivegroup.com/safari/test.html

(In the above sample,
- the javascript code initializes the DOM with image and image map
- assigns two event listeners to the div containing this image and image map
- when mouse pointer brought over the image, it shows the area id in the 'mobox' div
- when clicked, DOM is updated with a new image and new corresponding image map, assigns new event listeners and should continue with the same kinda behaviour it did for the first image (but doesn't in Safari browser))

All inputs on this issue are welcome and greatly appreciated.

Thanking you in advance.

Regards,
Shashi.

Dell Precision, Windows XP Pro

Posted on Jun 18, 2008 10:31 AM

Reply

Answer 1

andyBall_uk

Level 7

20,516 points

Jun 18, 2008 2:17 PM in response to Shashi D

jeez, on safari 2.0.4 all you get is the red box bottom left, nothing else at all... same on realplayer browser btw.

Reply

Answer 2

Shashi D Author

Level 1

0 points

Jun 18, 2008 2:24 PM in response to andyBall_uk

And did you try it on any other browsers ?

I tried it on Firefox and IE6, works as expected. On Safari 3.1.1 running on Mac and Windows, behaves wrong.

I am not able to understand what wrong. If you check the DOM, it is updated with the new image and map but somehow Safari does not read the image map. Its either the image map or events where the Safari engine is going wrong.

Let me know if you have any ideas about this issue. Thanks.

Regards,
Shashi

Reply

Answer 3

andyBall_uk

Level 7

20,516 points

Jun 18, 2008 2:47 PM in response to Shashi D

firefox 3 and camino 1.6.1 and Opera seem fine, the latest webkit build does show the image area, but after the first click, it all goes pink, and further clicking makes no change at all, also the position update at lower left doesn't change- once the mouseover is moved into the title bar, it sticks on "imgdiv".

safari 2 error console gives a

TypeError - Null value line 35

also line 193,230,186 - varies after each refresh - huh?

Reply

Answer 4

Shashi D Author

Level 1

0 points

Jun 18, 2008 3:16 PM in response to andyBall_uk

Thanks for sharing information.

It is stuck on the "imgDiv" either because the events are not being triggered once the mouse moves over the map region or the event is not able to read the target from the map. This is what I think is happening but not able to figure out why.

the blue strip above the boxes, where it says "ALL" is also the part of the image which includes the boxes. But if you mouse over that or click on that. Events do fire up. Only the regions covered by map are causing problems.

Thanks again.

Regards,
Shashi

Regards,
Shashi

Reply

Answer 5

andyBall_uk

Level 7

20,516 points

Jun 18, 2008 3:55 PM in response to Shashi D

ok, to be exact... webkit shows the target name at bottom left, and it changes accordingly . & back again, depending on position..... until you actually click on the image area, after which the area goes pink & further clicks or mouseovers have no effect at all....

----

clicking within the blue space does indeed work to alter the image split & color below it, but the 'ImgDev" never alters after this

--- safari 2 just rebders the red area ,no text within it, nothing else at all, no imagemap or blue space above the invisible image area.

Reply

Answer 6

Shashi D Author

Level 1

0 points

Jun 18, 2008 5:51 PM in response to andyBall_uk

Thanks for your response.

Let me explain what the pink area is. Like the first image that contains two white boxes, the pink area (as you call it) is a new image (containing four pink areas or boxes having an area id denoted to each) that imgDiv occupies after the 'click' event occurs.

The point that I'm trying to make here is, there shouldn't be any difference in behaviour when imgDiv holds first image (two white boxes) or the second image (four pink boxes) that you get after we click on image or the third image (containing 6 boxes, multiple colors) which you won't be able to reach in safari browser.

Clicking the blue space alters the image which means it updates the dom after a 'click' event takes place and that is what the javascript is designed to do.

And after we mouse over the blue space saying 'ALL', there's no reason for the 'imgDiv' to alter in the red box placed below the image because blue space does not have any area tag associated with it and therefore the target for that blue space is 'imgDiv' that is displayed and correct. We'll notice change in the red box displaying target id only when we mouse over a new area that is not currently being displayed in the red box.

I completely understand what you see in safari 2. But are you saying there's some error in my script ? If so could you please point out and justify.

Thanks.

Regards,
Shashi

Reply

Answer 7

andyBall_uk

Level 7

20,516 points

Jun 19, 2008 12:14 AM in response to Shashi D

Let me explain what the pink area is. Like the first image that contains two white boxes, the pink area (as you call it) is a new image (containing four pink areas or boxes having an area id denoted to each) that imgDiv occupies after the 'click' event occurs.

Yep, i gathered that from seeing it work on firefox...

The point that I'm trying to make here is, there shouldn't be any difference in behaviour when imgDiv holds first image (two white boxes) or the second image (four pink boxes) that you get after we click on image or the third image (containing 6 boxes, multiple colors) which you won't be able to reach in safari browser.

well... I can reach them, but only via the blue space.

. We'll notice change in the red box displaying target id only when we mouse over a new area that is not currently being displayed in the red box.

except in webkit for safari 2, where thered bpx content sticks at whatever it was when the first image was clicked, unless mouse is moved to the 'all area', and then it sticks on imgdiv.

I completely understand what you see in safari 2. But are you saying there's some error in my script ? If so could you please point out and justify.

I dunno Shashi, just pointing out the errors that Safari 2 reports when I view your test page, in the hope it might help. I know little of javascript

Reply

Answer 8

Shashi D Author

Level 1

0 points

Jun 19, 2008 7:30 AM in response to andyBall_uk

Thanks Andy. I appreciate all the info you provided.

Regards,
Shashi

Reply