10 Replies Latest reply on Jun 20, 2008 8:51 PM by pixlor

    Basic Hotspot guidance requested

    phraserat
      Hello everyone,
      My first post, and I am new to Fireworks/conversion to webpage. So I am sorry that it may seem so basic.
      Situation:
      I have a car graphic with headlights.
      I have created a hotspot for each headlight.
      I want a graphic that represents a beam of light coming from the headlight to show when the mouse hovers over the corresponding headlight. I have created the headlight beam graphics.
      I do not want a circular frame animation or graphics to remain on page once the user moves off the hotspot.
      I would be very pleased if somebody could assist.
      thank you for looking.
      best regards

        • 1. Re: Basic Hotspot guidance requested
          pixlor Level 4
          Depending on what your image looks like, you need rollover images or possibly a disjoint rollover. To make this work, you need to slice your graphic into multiple images (which are re-assembled like a puzzle). When you move your mouse over one headlight, then one of the puzzle pieces is exchanged for a version with a headlight beam on it.

          The tricky thing is that all your puzzle pieces have to be rectangles and none of them can overlap.

          Look at your image and see if you can divide it so that the area where each headlight beam would be on into its own rectangular area. If you can, if the two headlight beams can be put into their own rectangle with no overlapping, then slice your image and make two rollovers, one for each beam. This is the easiest way.

          If the two beams would be too close together to separate, then you can do a disjoint rollover. You need to slice your design so that, for the area where the beams are, you have one image for one headlight, another image for the other headlight, and a third (the default) image for when no beams are shining. The headlights themselves can not be part of this image.

          Read the help section on Slices, Rollovers, and Hotspots. If you could also post your image somewhere, someone can have a look and give you advice on slicing your image.

          :)
          • 2. Re: Basic Hotspot guidance requested
            phraserat Level 1
            Dear Pixlor
            Thank you very much for your speedy and helpful reply.
            I am a little unsure about the overlap situation. Is that Hot Spot or Slice? Each headlight beam would overlap a previous one unfortunately.
            The graphic is a cluster of headlights on the Client's vehicle.
            I have run the "tape" to see the changes and order of events but when I look at an "internet" view the behaviour is not the same.
            I do appreciate your advice as this action is central to the build of this webpage/site.
            Thank you
            • 3. Re: Basic Hotspot guidance requested
              kiss4me08
              Could you give some more info please?
              • 4. Re: Basic Hotspot guidance requested
                thanks a lot for the information on headlight beam graphics.the Slices, Rollovers, and Hotspots have given anice idea.
                • 5. Re: Basic Hotspot guidance requested
                  phraserat Level 1
                  Hello evrybody, thanks for your replies.
                  I don't know how to show access to the graphic file. Can I send it via an e-mail?
                  It would save a lot of energy trying to descibe it.
                  thank you
                  • 6. Re: Basic Hotspot guidance requested
                    pixlor Level 4
                    quote:

                    Originally posted by: phraserat
                    Hello evrybody, thanks for your replies.
                    I don't know how to show access to the graphic file. Can I send it via an e-mail?
                    It would save a lot of energy trying to descibe it.
                    thank you



                    Hi phraserat! Can you make a free account at Photobucket and post it there? At least temporarily? The site is www.photobucket.com. I don't need to have the full resolution png, a jpg export will be fine. Just turn on both headlights so I can see what you're doing and maybe make some suggestions.


                    (Gah! These SEO trolls are irritating! Bumping every thread on two pages, just to keep their signatures with all their links in front of the spiders...)
                    • 7. Re: Basic Hotspot guidance requested
                      phraserat Level 1
                      Thanks Pixlor,
                      I did what you suggested and here is the URL
                      http://i290.photobucket.com/albums/ll246/phraserat/PB1.jpg

                      I think having followed your good advice that I have got it working properly now in FW. I had to alter some overlapping hotspots. As an IT regular but new to FW and DW I found the slices, layers and frames not so intuitive coming from programming in "Access".
                      However I appear to be making some progress. My next step is hopefully to transfer the FW files into DW.
                      Thank you for your support.
                      • 8. Re: Basic Hotspot guidance requested
                        pixlor Level 4
                        Access?

                        Okay...your hotspots have to be independent...something like 3rd normal form, then. :P (Actually...just guessing on the normalization form, but I use Access and know enough SQL to write select statements in SQL Server Management Studio).

                        *checks image*

                        Wow. Okay! your mouseovers are going to be pretty darn tricky. I'm actually not sure it's going to work. I cant' see why not, but I don't recall seeing anything like it in HTML.

                        The two common rolllovers are where you mouse over image A and image A changes or you mouse over image A and image B changes (or images B and C). I can't recall seeing a case where image B was also an image that had mouse control from someplace else.

                        Before you do all three headlights, try doing the right-most two and see if you can make that work. You have two separate tricky ideas to incorporate. First, multiple triggers will change the beam on the far right. Second, changing the image of a trigger itself. Interesting!

                        Good luck!



                        • 9. Re: Basic Hotspot guidance requested
                          phraserat Level 1
                          Thanks for your reply pixlor.
                          I have got it working in FW and so will continue with the build.
                          I appreciate you staying with me and the help and encouragement given.
                          I have had less sleep than normal these last few days.
                          I hope kiss4me08 will find sufficient information from your posts and the visual shown in my link.
                          thank you.
                          • 10. Re: Basic Hotspot guidance requested
                            pixlor Level 4
                            You're welcome! I hope I helped, anyway! You've taken on a project that isn't exactly "basic," though. I find protein helps when I'm low on sleep.

                            (As for kiss4me08...I don't think help is required. Looks like another one of the accounts that's been spamming the boards with SEO links attached to otherwise useless posts. No worries there, I don't think!)

                            cheers!