10 Replies Latest reply on Aug 9, 2007 11:07 AM by destind4film

    HOTSPOTS

    hafling Level 1
      question: How do you map hotspots on an image that you're calling from a CSS?

      My background is being called within my CSS. I have 2 areas that I need to make "hotspots" on this background. I know my "mapping coords" will go into my code, but where do I put the "image-code" that calls the mapping coords?

      Would this image-code also go into my CSS?

      my CSS:
      .home {
      background-image: url(images/bbd_homepage_2.png);
      background-repeat: no-repeat;
      background-position: top center
      }
        • 1. Re: HOTSPOTS
          Level 7
          On Tue, 7 Aug 2007 15:18:21 +0000 (UTC), "hafling"
          <webforumsuser@macromedia.com> wrote:

          > My background is being called within my CSS. I have 2 areas that I need to
          >make "hotspots" on this background. I know my "mapping coords" will go into my
          >code, but where do I put the "image-code" that calls the mapping coords?

          You cannot put hotspots on background images.
          • 2. Re: HOTSPOTS
            hafling Level 1
            OK.. then what is the best way to have 2 hotspots on a background that you're calling from CSS?

            create a <div> layer that is transparent and put on top of the image, or is there something better to do?

            Thanks again for your help! :)
            • 3. Re: HOTSPOTS
              Level 7
              On Wed, 8 Aug 2007 17:58:09 +0000 (UTC), "hafling"
              <webforumsuser@macromedia.com> wrote:

              >OK.. then what is the best way to have 2 hotspots on a background that you're
              >calling from CSS?

              Like I said, you CANNOT put hotspots on a background. You could try
              positioning a transparent gif over the spot you want and put a link on
              that gif, but it's going to be unreliable.

              General rule of thumb: never put anything important in a background
              image.
              • 4. Re: HOTSPOTS
                AMarComm
                Gary's right, the way your thinking about putting hotspots on a CSS background image is not possible. However, the effect can be recreated. Is this what you are looking for?

                http://www.alistapart.com/articles/sprites/
                • 5. Re: HOTSPOTS
                  Level 7
                  Has nothing to do with the OP's question, as I read it....

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.dreamweavermx-templates.com - Template Triage!
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                  ==================


                  "AMarComm" <webforumsuser@macromedia.com> wrote in message
                  news:f9d3ql$cnr$1@forums.macromedia.com...
                  > Gary's right, the way your thinking about putting hotspots on a CSS
                  > background
                  > image is not possible. However, the effect can be recreated. Is this
                  > what you
                  > are looking for?
                  >
                  > http://www.alistapart.com/articles/sprites/
                  >


                  • 6. HOTSPOTS
                    AMarComm Level 1
                    He's trying to recreate image mapping with CSS so I thought that article would help. :)
                    • 7. Re: HOTSPOTS
                      Level 7
                      It actually has nothing to do with his question though. Using CSS 'sprites'
                      is a nice way to do 'rollover' effects without javascript - I use it all the
                      time. But it doesn't help you put hotspots onto a background image, which
                      was the original question.

                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.dreamweavermx-templates.com - Template Triage!
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                      ==================


                      "AMarComm" <webforumsuser@macromedia.com> wrote in message
                      news:f9f9l0$18t$1@forums.macromedia.com...
                      > Um..ok. That's helpful.
                      >
                      > He's trying to recreate image mapping with CSS so I thought that article
                      > would help. I didn't say it was the end all be all to his question. :)


                      • 8. Re: HOTSPOTS
                        hafling Level 1
                        I think I have everybody confussed. I know that I cannot put hotspots on my image I have in CSS. I was wondering if there is a way to put a transparent gif, or "dreamweaver" layer overtop my background..
                        • 9. Re: HOTSPOTS
                          Level 7
                          Yes, you can do that. Put the hotspot on the transparent GIF image.

                          --
                          Murray --- ICQ 71997575
                          Adobe Community Expert
                          (If you *MUST* email me, don't LAUGH when you do so!)
                          ==================
                          http://www.dreamweavermx-templates.com - Template Triage!
                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                          ==================


                          "hafling" <webforumsuser@macromedia.com> wrote in message
                          news:f9fisp$c1o$1@forums.macromedia.com...
                          >I think I have everybody confussed. I know that I cannot put hotspots on
                          >my
                          > image I have in CSS. I was wondering if there is a way to put a
                          > transparent
                          > gif, or "dreamweaver" layer overtop my background..
                          >


                          • 10. Re: HOTSPOTS
                            destind4film Level 1
                            I got confused just reading this topic

                            >> hafling wrote: question: How do you map hotspots on an image that you're calling from a CSS?
                            >> My background is being called within my CSS. I have 2 areas that I need to make "hotspots" on this background. I know
                            >> my "mapping coords" will go into my code, but where do I put the "image-code" that calls the mapping coords?
                            >> Would this image-code also go into my CSS?

                            What is it that you are really trying to do?

                            A hotspot on an image (which uses specific coordinates for its dimension) is to make a specific spot on the image or any shape on the image be the only selectable link. This is instead of just making some big square image be the link.

                            As others mentioned, you can't do this with a CSS background.

                            As for your other question:

                            >> I was wondering if there is a way to put a transparent gif, or "dreamweaver" layer overtop my background..

                            I think you can just insert image - if the .gif was created with a transparent background, such as save for web option in Photoshop, it will be transparent. Then just apply CSS to define it's padding and margins.


                            Here is a nice hotspot Example: http://www.ign.com

                            If you look at the IGN logo and move your mouse you will see that only the exact pixels of the logo are selectable and not an entire rectangle image. If you view the source you will see the attached code for this image: