Re: Image-Map-Mouseover

by Honeywebster(at)aol.com

 Date:  Wed, 20 Dec 2000 13:38:02 EST
 To:  hwg-graphics(at)mail.hwg.org
  todo: View Thread, Original
Jacqueline-
I was happily surprised you used a site I designed as a reference for Carol's 
question. However, Carol's question is mousing over from an "image map". My 
understanding is you cannot mouseover from an image map. NWHP is a mouseover 
from a sliced image (done in ImageReady).

Carol-
Even though you could have buttons as one image, make it into an image map 
and each button of those group of buttons could take you to a different page, 
you can't do a mouseover and change only one button. There are image maps 
used as side subnavigation on the inside of the NWHP site.

So, you would have to slice the buttons up if you made it one image. A better 
way is to have your buttons on separate layers. (I am giving 
Photoshop/ImageReady directions. I don't know how well this will translate to 
whatever other program you are using.)

Then have each button mouseover to change within that button space or any 
other defined space on the page. ImageReady handles this really well. 
ImageReady will create the JavaScript and HTML. This swapping images in 
different places is called remote rollover.

I originally hard coded this NWHP page myself but got into so much trouble 
that I ended up doing it in ImageReady moments before I lost my mind.

While I was writing this you put up your mouseover trial page 
(http://www.jtc-companies.com/mouseover/) and mentioned it throwing the 
images out of position. This is another thing ImageReady handles well. I hear 
Fireworks also works well for this.

Janet
Web Site Designer
Electronic Portfolio:
http://members.aol.com/honeywebster

In a message dated 12/20/2000 6:40:44 AM, jsylvia90(at)hotmail.com writes:

<< Hi,

One way to achieve this is to "slice up" the image and then use JavaScript 
mouseover effects for each slice.  I found a really nice example recently.  
It is for the National Women's History Project.  I lik the concept enough to 
bookmark it for future reffernce, but it is NOT my work:

http://members.aol.com/demoplace/

My web site is still in progress, but another example of this effect is on 
my samples page; check out the "current project" sample, the menu bar uses 
this technique. The menu bar on my web site uses this technique as well (but 
I'm still working on the concept... not quite there yet!)  
http://www.jswebsolutions.com

Hope that helps.  I also hope that I can get some more ideas on this topic,

Regards and Happy Holidays all,
Jacqueline Sylvia
jsylvia90(at)hotmail.com

>From: "Carol Parent" <cbwd(at)means.net>
>To: <hwg-graphics(at)mail.hwg.org>
>Subject: Image-Map-Mouseover
>Date: Wed, 20 Dec 2000 06:21:10 -0600
>
>Morning,
>Does anyone have an example of an Image map that will allow you to mouse
>over one of the buttons which then will change another section of the image
>map?
>
>I know I sound totally convoluted.  The image I am working with is at
>http://www.jtc-companies.com .  I want to be able to mouse over each button
>and have the main graphic change accordingly.
>
>I would like to see this in action if possible.  And maybe "borrow" the 
>code
>:) .
>
>I do understand that I will need to slice the image up differently than 
>what
>it is now.
>
>Best Regards,
>
>Carol Parent
>admin(at)cbwdesign.com
>http://www.cbwdesign.com
>
>"The only way to amuse some people is to slip and fall on an icy pavement. 
>" >>

HWG: hwg-graphics mailing list archives, maintained by Webmasters @ IWA