hot spot, slice, ???

Report · Dec 15, 2008

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!

Report · Dec 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

Report · Dec 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?

Report · Dec 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.


<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>

</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="1007">

<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&pre... 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>

Report · Dec 15, 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

Report · Dec 15, 2008

What do you mean?

Report · Dec 15, 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

Report · Dec 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>

Report · Dec 16, 2008

I will need to see your live version of the changed page?

h

Report · Dec 16, 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