rollovers on a large image map

[dkilburn]

I have an image map (it will be anyhow) that I want to use rollover images on. I know there's got to be an easier way to do this than I am picturing. The image is at http://www.kilburnfamily.com/tree.htm. I want each apple to rollover when the mouse goes over it. I've got the second images already created (http://www.kilburnfamily.com/), I just need to figure out how to put it all together.

I've got DW, Photoshop, and Fireworks, although I have never used Fireworks.

Thanks for the help!

[TWTCommish]

I'm fairly sure that Fireworks comes with a built in image-splicing type of feature for just this kind of occasion - it might be linked in with Dreamweaver.

This may help (not sure):
http://www.webmasterbase.com/tutorials/Dreamweaver/

Second link from the bottom: How to Insert and Make Rollover Images in Dreamweaver

Good luck!

[dkilburn]

I know how to make the rollovers in DW. I love how easy it is. My picture is a big tree with several apples on it. I want each apple to individually change as the mouse rolls over it. Each apple will link to another part of the website.

If I have 4 apples, then I think I will need 5 versions of the tree (one with no apples highlighted, 4 with each different apple highlighted) for a total of 5 trees. That's the part I'm not sure how to set up. I can do a mouseover with 2 images, but what do i do with 5?

[dkilburn]

I just uploaded most of the images I want to use in this project, so it might be easier to visualize what I would like to do here. The rollover apples are at the bottom of the index page for now (will be removed in the end).

Thanks for any help!!

[Fluffykins]

Fireworks does have a feature just for this.

Here's a very, very quick tutorial on how to do it, you should look the help file for more detailed information. You can also do it with a sliced image in Dreamweaver, but in my opinion Fireworks makes it easier.

1. Create your image, duplicate the first frame to frames two - six.
2. Change (in frame 2-6) the bits you want to rollover - you know what I mean, change the apples' colour etc so that the first is different in frame two, second in frame 3 etc.
3. Insert slices over all the bits that are going to change.
4. Add a Swap Image behaviour to each of your slices, telling it to swap with Frame 2, 3, 4, 5, or 6 as appropriate when the mouse is hovered over it. These are the default settings anyway.
5. Export your image map into it's own directory and insert it into Dreamweaver using Insert > Media > Fireworks HTML.

When you export it make sure you set the HTML Style to Dreamweaver 2 or 3, depending on which one you're using, or the importing bit won't work properly.

Hope that sets you off in the right direction!

Ady

Edited by Fluffykins on 11-23-2000 at 06:17 AM

[dkilburn]

Thank you, thank you, thank you!! This is so cool! And exactly what I was looking for!

So far I've got the homepage image done at http://www.kilburnfamily.com if you want to see how it looks.

Happy Turkey Day everyone :-)

[Nicky]

Hey your tree looks good. It does take an awfully long time to download though, but maybe it is my slow connection

Did you draw the tree yourself?

[WebKat]

Great graphic design and use of colors!

When the mouse goes over the apples in the tree you actually think that they are going to fall...

I know that you are still working on it, but it is slow to load. But then again I have only 26.4k! ~ And what do you plan to add to the white space below the tree and your bottom navigation?


Edited by WebKat on 11-24-2000 at 06:15 PM

[dkilburn]

Originally posted by WebKat
Great graphic design and use of colors!

When the mouse goes over the apples in the tree you actually think that they are going to fall...

Thanks :-) I don't consider myself remotely a graphic artist, so I'm glad you like it. The tree and apples are clipart from one of my 10 million images somewhere!

When I did the first tree, I realized that I must not have lined up the rollover images quite right. I liked the effect of the apples moving a little though, so I decided to keep it. So far I have Karen and Kristi's trees done also.

The extra white space will be gone. I had some stuff there and deleted it, but DW kept the table cell height I guess.

The download time bothers me. It seems like the tree loads pretty fast, but the rollover images take a long time. Since this morning is the first time I ever used Fireworks (thanks to fluffykins), I'm open to ideas on how to increase the download speed.

Once the graphics are done, I can start on the content. Each person is getting a page and domain for Christmas. I was going to design something first, but then I realized that most people wil want something personalized. What I am going to do is to create a "Future Home of ..." for each and then give them a form to fill out asking for details. I think I'll make up some backgrounds and graphics and let them choose from there. I also want to include a short html tutorial (probably Joe's) and directions on how to edit and upload to their new domain. Most will probably leave the page as I made it, but there are a couple who will enjoy tinkering with it!

[Fluffykins]

Originally posted by dkilburn
Thank you, thank you, thank you!! This is so cool! And exactly what I was looking for!

If that was aimed at me, you're very welcome. Play with Fireworks, it does some VERY clever things.

Ady