Skip to main content
quality11
Known Participant
December 15, 2008
Question

hot spot, slice, ???

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 is closed to new replies. Start a new post to keep the conversation going.

    9 replies

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

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

    Translate
    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?
    Translate
    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>
    Translate
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices