9 Replies Latest reply on Dec 16, 2008 7:29 PM by Newsgroup_User

    hot spot, slice, ???

    quality11 Level 1
      I'm very new to FW and design. What do I do to make the starburst a link in the header of this page: http://mnprom.com/promstore/?

      I tried adding a slice, but it didn't work....not sure if I did it right.

      Thanks so much for your help in advance!
        • 1. Re: hot spot, slice, ???
          heathrowe Most Valuable Participant
          The Slice should work.. (Add Slice, Add Link information in the PI, Export as Html/Images)

          You have to copy over the necessary javascript (slice) information (from the exported html/Images) file to your final design file.

          Or

          If you use Dreamweaver
          Select the image, then in the Property Inspector (lower left) use the HotSpot/Image Map Tool options (Rectangle, Circle Polygon) and then set the Link, Target, Alt options for the Hotspot and your good to go.

          h

          • 2. Re: hot spot, slice, ???
            quality11 Level 1
            The only thing is that the header image (webtop)is set in the css:

            #header {
            width: 1007px;
            height: 384px;
            float: left;
            background-image: url(images/webtop-3.jpg);
            background-position: left topl;
            background-repeat: no-repeat;
            clear:both;
            }

            Can I make the whole # top div a link in DW?
            • 3. hot spot, slice, ???
              quality11 Level 1
              I just followed your FW directions. I had done all that following the Help but it left off the exporting and copying.

              But now there are slices in my images file and an htm image. Where do I copy js? I opened the htm image and copied the code below. But no js and I wouldn't know where to put this anyway since the image is in css. I'm so confused.

              <!-- saved from url=(0014)about:internet -->
              <html xmlns=" http://www.w3.org/1999/xhtml">
              <head>
              <title>webtop-3.jpg</title>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <style type="text/css">td img {display: block;}</style>
              <!--Fireworks 8 Dreamweaver 8 target. Created Mon Dec 15 15:09:09 GMT-0500 (Eastern Standard Time) 2008-->
              </head>
              <body bgcolor="#ffffff">
              <table border="0" cellpadding="0" cellspacing="0" width="1007">
              <!-- fwtable fwsrc="Untitled" fwbase="webtop-3.jpg" fwstyle="Dreamweaver" fwdocid = "1857211728" fwnested="0" -->
              <tr>
              <td><img src="spacer.gif" width="686" height="1" border="0" alt="" /></td>

              <td><img src="spacer.gif" width="256" height="1" border="0" alt="" /></td>
              <td><img src="spacer.gif" width="65" height="1" border="0" alt="" /></td>
              <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
              </tr>

              <tr>
              <td colspan="3"><img name="webtop3_r1_c1" src="webtop-3_r1_c1.jpg" width="1007" height="146" border="0" id="webtop3_r1_c1" alt="" /></td>
              <td><img src="spacer.gif" width="1" height="146" border="0" alt="" /></td>
              </tr>

              <tr>
              <td rowspan="2"><img name="webtop3_r2_c1" src="webtop-3_r2_c1.jpg" width="686" height="236" border="0" id="webtop3_r2_c1" alt="" /></td>
              <td><a href=" http://clicks.skem1.com/survey/?c=2165&id=1&preview=1http://clicks.skem1.com/survey/?c=216 5&id=1&preview=1"><img name="webtop3_r2_c2" src="webtop-3_r2_c2.jpg" width="256" height="216" border="0" id="webtop3_r2_c2" alt="Win a $100 Gift Certificate from Top 10 Prom, The Best of The Best!" /></a></td>
              <td rowspan="2"><img name="webtop3_r2_c3" src="webtop-3_r2_c3.jpg" width="65" height="236" border="0" id="webtop3_r2_c3" alt="" /></td>
              <td><img src="spacer.gif" width="1" height="216" border="0" alt="" /></td>
              </tr>
              <tr>
              <td><img name="webtop3_r3_c2" src="webtop-3_r3_c2.jpg" width="256" height="20" border="0" id="webtop3_r3_c2" alt="" /></td>
              <td><img src="spacer.gif" width="1" height="20" border="0" alt="" /></td>

              </tr>
              </table>
              </body>
              </html>
              • 4. Re: hot spot, slice, ???
                heathrowe Most Valuable Participant
                Sorry my mistake, referring to js code. Please ignore that.

                You may need to redefine your original div/css so that the right side contains your linked image.

                h
                • 5. Re: hot spot, slice, ???
                  quality11 Level 1
                  What do you mean?
                  • 6. Re: hot spot, slice, ???
                    heathrowe Most Valuable Participant
                    Comment out
                    background-image: url(images/webtop-3.jpg);
                    background-position: left topl;
                    background-repeat: no-repeat;

                    in #header (style.css) then Save.

                    Open you html page in Dw
                    and add your <img > </img> source reference between the <div id="header"> </div> section.

                    h
                    • 7. Re: hot spot, slice, ???
                      quality11 Level 1
                      I already have that in my css:
                      #header {
                      width: 960px;
                      height: 384px;
                      float: left;
                      background-image: url(images/webtop-3.jpg);
                      background-position: left topl;
                      background-repeat: no-repeat;
                      clear:both;
                      }
                      Here's my html -- that's not working. I add an image tag to the html?

                      <div id="header"><a href=" http://clicks.skem1.com/survey/?c=2165&id=1&preview=1"></a><span class="hidden">Top 10 Prom 2009, The Best Of The Best!</span></div>
                      • 8. Re: hot spot, slice, ???
                        heathrowe Most Valuable Participant
                        I will need to see your live version of the changed page?

                        h
                        • 9. Re: hot spot, slice, ???
                          Level 7
                          heathrowe wrote:
                          > I will need to see your live version of the changed page?
                          >
                          > h
                          Going back to the original post, you can't make a link with a background
                          image. It's not in the flow of the document. The image must be inline.
                          Just another spin on what Heathrow is getting at.

                          HTH

                          --
                          Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                          http://www.communityMX.com/
                          CommunityMX - Free Resources:
                          http://www.communitymx.com/free.cfm
                          ---
                          .:Adobe Community Expert for Fireworks:.
                          Adobe Community Expert
                          http://tinyurl.com/2a7dyp
                          ---
                          .:Author:.
                          Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
                          Peachpit Press -
                          http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
                          Layers Magazine - http://www.layersmagazine.com/author/jim-babbage