/    Sign up×
Community /Pin to ProfileBookmark

Image map w/ multiple mouseover events

Copy linkTweet thisAlerts:
Apr 25.2004

Hello Everyone,

I have a question that I have been working on for a little while now and I am unable to figure out. I am a college student, working on a web page as a final project.

Background info:

I am creating my page using absolute placement of images and tables for layout purposes.

See site: [url]http://ist.pct.edu/~carjam10/project/index.html[/url]

The overall image in the background is absolutely placed with no margin and a Z-index of 1. I then applied an image map over this to allow the “buttons” to link to other pages. All that works fine, what if want to do is to add a mouseover event that will bring a picture from a Z-index of 0 (behind the background image) to a Z-index of 2 (in front of the background image). I do NOT want to replace the whole picture b/c the file size would be huge. I want to use small images (the size of the buttons) to place in front of the background (overtop of the buttons) to give the appearance of a “hover” attribute that a normal link would have. (for example: the new image that would appear over the “things to do” button would be the same text but it would be red). Thank you for your help.

Viral

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisApr 25.2004 — You should reconsider the image map idea. It will quickly get complex trying to deal with the events. For instance, if you bring an object over the image map by changing the z-index, you will essentially cause a mouseout on the image map. Also, you will not be able to click the image map because the new object is in the way, and it will get the click rather than the image map.

One way to do what you want would be to slice up the image that you are using and just do a standard image swap on mouse over/out. That way the click is not affected.

Another (way more complicated) way would be to use a transparent image as the highest z-index and assign the map to that image. Any image you want to use for an effect would be just under the transparent image with its visibility set to "hidden". Then the original image would be under this layer. The user would see this image because the map is transparent and the other images are hidden. Then in the map over event you make the visibility of the appropriate over image visible. You don't need to fool with the z-index at all in this scenario, just set it and forget it.
×

Success!

Help @Viral spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...