Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

JavaScript and image map



9:26 am on Aug 14, 2009 (gmt 0)

10+ Year Member

I have a floor plan. I would like to pop up a layer (should I say a DIV element) when a user moves his mouse cursor over one room (ie: displaying a large picture of the room, room facilities, etc).

I would like to have the layer(DIV element) displayed right below cursor's current position.

How to do that? Shall I :

1) Create layes/DIVs for each room (all hidden by default)
2) Create a HTML image map with Dreamweaver (can I have other better alternative?)
3) For each image map area, set a JavaScript event to call respective layer/DIV
4) Get current mouse cursor coordinate and display the layer based on the coordinate

If I create HTML image map by using Dreamweaver's built-in function, will it ONLY work when the page is loaded in the screen resolution I am using AND when the user does not resize the window?



9:34 am on Aug 14, 2009 (gmt 0)

10+ Year Member

I just realized that each image map area's coordinate is based on the image's far top-left point, isn't it?

If yes, then resizing the window should have no impact on it.

Now the question is how to pass coordinates as parameters and display the hidden element right below the bottom line of the (mouse on) image map area.


11:50 am on Aug 14, 2009 (gmt 0)

10+ Year Member

Are you sure you want the layer displayed below the cursor? So it'll move when you move your mouse?

Wouldn't it be better if the layer is displayed directly below the clickable area?



4:05 pm on Aug 14, 2009 (gmt 0)

10+ Year Member

I would prefer the layer displayed below current image map area, not just below the cursor. It is because if the (image map) area is fairly large, then if I display the layer below cursor, some of the area will be obstructed. So I need to know the bottom line of the area and display the layer below the line.



Featured Threads

Hot Threads This Week

Hot Threads This Month