Mouseover to picture

[KandK]

I am using FP 2002 and I am designing a webpage for a campground. I have a
map of the campground which has about 80 sites and what I am trying to
achieve is that as you mouseover each site number it brings up a picture and
maybe a brief description of that particular site. I have sliced the image in
Photoshop but I am wondering if it is just better to go with hotspots on the
original image. I have looked at maybe using some sort of javascript but as I
have never used them before I am not really sure what to do. If anyone can
give me any help at all I would really appreciate it.
Many thanks, Keith.

 

[Andrew Murray]

If you've sliced the image in PS, then you could create a duplicate of that
original PSD image, and add the descriptions to each campsite on the map;
then slice it exactly the same way as the first one then reassemble the
original image in a table in FP and apply rollovers to each applicable
segment, so it swaps to the "over" state image that you made from the second
sliced version of that image

Or you could use the "title" or "alt" attributes of the img tag. There
might be a characters/word limit on those as they're intended to be a short
description.

If you just used hotspots on one image (no image swaps) it might be best to
just link to a second page with the info about each campsite.

 

[KandK]

Thanks for your reply Andrew. Please excuse my ignorance but how would I
implement images into this. This is more important than an actual
description. What I need is as you pass over each campsite number a picture
of that site to appear and then disappear as you move off. This picture just
needs to be big enough to get an idea, like a large thumbnail. Once again
thank you for your reply and the help you give to novices like myself.
Many thanks, Keith

 

[Andrew Murray]

Keith

You need your original image (eg "Image1.psd") and you need a duplicate
image of image1.psd (call it image2.psd), but added to that you need to put
the descriptions of each site (or whatever you want to be on the second
image to look like
call the second image for example, "image2.psd"

Slice up image1.psd in photoshop into segments (you've already done this),
export the slices to HTML table/jpeg or gif files (as per the PS procedures
if PS does this - if not see www.murraywebs.com/faq.asp?id=16 for an
alternative tool), and if prompted save each slice, for example, as
"campsite1.gif", "campsite2.gif" etc.

On image2.psd, save the changes and slice this image in exactly the same way
(if you can save and apply previous "slice" settings (??) use the same one
as for image1.psd. Export the slices (but not to a html table) save the
images as campsite1_over.gif, campsite2_over.gif etc

Once they are all done, go into Frontpage, open your web.

If you have saved the html file and all those images outside the web, import
them to respective folders such as /campsite/index.html for the page that
will display the image of the map and campsite/images/ for all the sliced
images.

Open the index.html in FP, you should see the table with the slices. If you
preview then you should see the image "whole".

Back to design view. Click on the first segment (eg campsite1.gif). Go to
the DHTML effects menu, choose "swap picture", go through each stage of the
wizard, selecting the "over" file - in this case campsite_over.gif - click
"OK" through the screens and save the change.

Preview, and see if the image swaps to campsite1_over.gif. If so, it is
successful (preview in browser(s) if you wish to check it works OK)

Then back to design view and repeat the process for the other segments you
need to have swapped, using the equivalent "over" image for each "off" image
that is campsite2.gif > campsite2_over.gif etc

If you wish, first test the one image in other browsers to make sure this
works. If not, you'd need to provide an alternative page that is supported
by the browsers that may not display the html correctly or do the image
swaps in the correct manner.


Repeat the above for image2.psd

If you're prompted to rename/save the images call them campsite1_over,
campsite2_over etc.

Then you can use the FP include file, attach a DWT or whatever so that it
integrates with the site design.

Then if you preview the page, you should be able to mouse over the image,
and the segements will swap in/out as you move the mouse over and off each
of them.

The important thing is the first and second version of each image must be
the same dimensions and sliced the same way, so it is seamless in its
swapping between one and the other.

Ensure you check each of the popular browsers (opera, firefox, IE, netscape
and maybe others) to ensure the functionality works in all. If they don't
work totally correctly, you should provide a "static" version of the page,
using the image map (hotspot) tools and "alt" or "title" tags on each
"slice" of the image (as originally suggested).

There might be other ways to do this (such as in Macrodobe Flash or similar
tool), but that would requires users to need Flash player which they may not
have and may or may not download.