SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot dkilburn's Avatar
    Join Date
    Jul 2000
    Location
    Inyokern, CA
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Debby Kilburn
    "With computers, everything is possible, but nothing is easy"
    AIM: fourhweb

  2. #2
    SitePoint Wizard TWTCommish's Avatar
    Join Date
    Aug 1999
    Location
    Pittsburgh, PA, USA
    Posts
    3,910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!



  3. #3
    SitePoint Zealot dkilburn's Avatar
    Join Date
    Jul 2000
    Location
    Inyokern, CA
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Debby Kilburn
    "With computers, everything is possible, but nothing is easy"
    AIM: fourhweb

  4. #4
    SitePoint Zealot dkilburn's Avatar
    Join Date
    Jul 2000
    Location
    Inyokern, CA
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!
    Debby Kilburn
    "With computers, everything is possible, but nothing is easy"
    AIM: fourhweb

  5. #5
    I'm baaaaaaaaaaaaack! Fluffykins's Avatar
    Join Date
    Aug 2000
    Location
    Manchester, UK
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    v-technologies - Freelance Goodness.

  6. #6
    SitePoint Zealot dkilburn's Avatar
    Join Date
    Jul 2000
    Location
    Inyokern, CA
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-)

    Debby Kilburn
    "With computers, everything is possible, but nothing is easy"
    AIM: fourhweb

  7. #7
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    Kat's Meow Senior ******* WebKat's Avatar
    Join Date
    Jul 1999
    Location
    California USA
    Posts
    1,071
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Dlynn :: SitePoint Senior Advisor ::
    PawPrint Designs by WebKat
    "Dogs come when they're called; Cats take a message and get back to you later." ~ Mary Bly

  9. #9
    SitePoint Zealot dkilburn's Avatar
    Join Date
    Jul 2000
    Location
    Inyokern, CA
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Debby Kilburn
    "With computers, everything is possible, but nothing is easy"
    AIM: fourhweb

  10. #10
    I'm baaaaaaaaaaaaack! Fluffykins's Avatar
    Join Date
    Aug 2000
    Location
    Manchester, UK
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    v-technologies - Freelance Goodness.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •