How do I put multiple rollover image flips on an image map?
On my site, www.dudworks.com, in the top right corner is a graphical menu. I had to put each link picture as hotlinks on an image map because they weren't positioned in a way that I could break them up into separate pictures.
I want to have each circle change into a picture when it's rolled over, but can't figure out how to do that without having the whole image change.
Help?
-Ben Dudden
Thanks.
Last edited by Ben The Cartoon; 04-24-2003 at 09:05 PM.
Your page could not be found!! So I do not know if this will work for you.
I want to have each circle change into a picture when it's rolled over, but can't figure out how to do that without having the whole image change
I suggest you break up your image into squares and use an image map on each square to give you the circle 'live' area. Now you can do a rollover to change the square image where only the area inside the circle changes.
Okay, the link got screwed up because of the comma. www.dudworks.com is the correct address.
Sorry if I had come off as sarcastic or impatient. (It actually had been two days between posts, not an hour.) I was just trying to be concise, lol.
Anyway, the image is set up so that separating squares of the image would be kind of difficult because they would overlap.
Now, I had originally wanted each circle to chance into a circle picture of the same size using image flip technology, and was wondering if it was possible to just change the circle section hotlinked in the image map instead of having a whole new picture load.
I am thinking instead, to have all of the other circles change as well to pictures of the highlighted circle. I think I know how to do this. But only if the other way isn't possible.
Okay, the link got screwed up because of the comma. www.dudworks.com is the correct address.
Sorry if I had come off as sarcastic or impatient. (It actually had been two days between posts, not an hour.) I was just trying to be concise, lol.
Anyway, the image is set up so that separating squares of the image would be kind of difficult because they would overlap.
Now, I had originally wanted each circle to chance into a circle picture of the same size using image flip technology, and was wondering if it was possible to just change the circle section hotlinked in the image map instead of having a whole new picture load.
I am thinking instead, to have all of the other circles change as well to pictures of the highlighted circle. I think I know how to do this. But only if the other way isn't possible.
-Suggestions?
(Check the site to see what I'm talking about.)
-Ben
P.S. Now for some reason, my image swap isn't working in Netscape. No idea why. It works in Internet Explorer though.
That's never happened before.
Gah.
Last edited by Ben The Cartoon; 04-30-2003 at 08:47 PM.
Now that I can see your page, I understand the problem. If you still want to mess with this to get the effect you originally wanted, here's how I would go about it...
First divide your image into vertical slices such that each new image would contain bits of the image on each side. Now create a image map for each slice that is 'hot' for the major part of the picture (you will loose the hot area to the left and right). Now on mouseover, you change 3 images at once, giving you the picture you want.
A lot of messing around, but it might work for you.
Some time ago I posted a technique for creating 'hot spots' on a background image, but never actually tried it. Your problem presented a similar solution. So with a little time to spare I came up with this. It creates 'hot spots' only on your images and allows you to add the links. If you are up to it, you could create seperate images for the rollovers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0024)http://www.dudworks.com/ -->
<html><head><title>DudWorks.com</title>
<style type="text/css">
body { background:#fff; }
</style>
</head>
Some time ago I posted a technique for creating 'hot spots' on a background image, but never actually tried it. Your problem presented a similar solution. So with a little time to spare I came up with this. It creates 'hot spots' only on your images and allows you to add the links. If you are up to it, you could create seperate images for the rollovers.
Nedals - great post I have searched all day for a way to do this and finally came upon this post. Thanks for the code, I know it is only *cough* 5 years old, wow where did all that time go?
Anyway the code works perfectly for me with the exception of one odd glitch - when you click on the link nothing loads. If you SHIFT/Click then it opens just fine in the new window. Wondering if you have any insight into this?
Is there any reason that you can't use two of these on the one page? Different map name, different images names etc. The initial images load but no images change when you mousover either map. Links all work, pages open as they should, no broken image tags so everything does as it should with the exception of the image change. If I remove one map at a time, the other works correctly.
How do I put multiple rollover image flips on an image map?
Reply With Quote
Is this not possible?
Originally Posted by Nedals
Bookmarks