Skip to main content
Known Participant
December 15, 2008
Question

hot spot, slice, ???

  • December 15, 2008
  • 5 replies
  • 30772 views
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!
    This topic has been closed for replies.

    5 replies

    Inspiring
    December 17, 2008
    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
    heathrowe
    Inspiring
    December 16, 2008
    I will need to see your live version of the changed page?

    h
    heathrowe
    Inspiring
    December 16, 2008
    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
    quality11Author
    Known Participant
    December 16, 2008
    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>
    heathrowe
    Inspiring
    December 16, 2008
    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
    quality11Author
    Known Participant
    December 16, 2008
    What do you mean?
    heathrowe
    Inspiring
    December 15, 2008
    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

    quality11Author
    Known Participant
    December 15, 2008
    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?
    quality11Author
    Known Participant
    December 15, 2008
    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=2165&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>