Can't Link Image to URL

[Delphi123]

Dear friends:

I've encountered a problem with linking an image to a URL. Please note my jewelry site at:

http://www.immortalgems.com

On the home page you'll see seven celebrities who make up the Mondera gallery of stars. Each has a link to its corresponding URL. Everything fine so far. Now please look to the left right next to the curve. You'll see a big red button with a tiny black arrow inside. I would very much like to link this button to a URL online, but I have been unable to do so. The button is actually part of the larger image that contains the celebrities and the entire space they occupy. Would appreciate it if someone please suggest the code for this linkage.

Thank you so much.

Benjamin

[degsy]

You need an Image Map.

Dreamweaver can easily create them.

[Delphi123]

Dear degsy and friends:

http://www.immortalgems.com

(Home Page).

The image in question is:

<td width="618" background="images/1b2.jpg">

I would appreciate your help with the imagemap you suggested. I've been trying to create it in Dreamweaver. The problem is that the image in question is a background image and it simply won't bring up the ImageMap options in the Dreamweaver Property Inspector. May I ask if you could take a look at the page and suggest how I could create the imagemap?

Please see difference in two screenshots:

http://www.websher.net/temp/Image1.jpg
http://www.websher.net/temp/Image2.jpg

The first shows the page with the mouse clicked on the area around the red button, i.e. to the left of the celebrity thumbnails gallery. The second image shows the page with the mouse clicked on the first thumbnail. You can see the difference in the Property Inspector at the bottom of the page.

Thank you so much.

Benjamin

[rockboy]

It's a workaround but maybe you could add a transparent gif to overlay that area of the background and apply an image map to that. You could then link the transparent gif. Or you could remove that part of the image from the background and add it to the foreground.

[Delphi123]

Dear rockboy and degsy:

Unfortunately, creating a transparent gif and using it to create an imagemap is beyond my present capabilities. So, I've been experimenting to see what I could come up. I decided to treat the main image (1b2.jpg) as an ordinary image and I have been trying different ways to link it to a URL. I've almost succeeded. Here is the result:

http://www.immortalgems.com/index-button.html

Please compare with index.html

As you can see, the image itself is repeated, but the second, repeated part works perfectly and is aligned perfectly. And the hyperlink works in the red button in the top image but not in the bottom image. Now the question is: Is there a way to merge the two images so that there is only one image and one gallery and one button? Is there a way to manipulate the code in order to make this happen?

I seem to be almost there but I really don't know. Would appreciate your comments.

Thank you all so much.

Benjamin

[degsy]

from the looks of it you still want to use an Imagemap.
It should be possible now that it is a normal image instead of a background.

[Delphi123]

Dear friends:

It's clear that the index-button.html approach to creating a hyperlink for the big red button is a deadend.

I have also tried to remove the red button or isolate it, but I obviously lack the skills to do that in Photoshop (such as using the Lasso slice tool) without messing up everything else. My original PSD for that page does NOT have a separate layer for the big red button. It does have layers for each of the SMALL individual buttons on the oval shapped Jewelry menu to the left. But the big red button is seamlessly integrated into the big image which is used as the background, i.e., 12b.jpg.

So, I have decided to take up your suggestion that I create a transparent GIF. I've looked in my texts (such as my Dreamweaver Bible) for help and have read at least a half dozen explanations, but I still have no idea what creating a transparent Gif for my specific problem is all about. Hopefully, once I get to that stage, I can create the Image Map. Here is the Dreamweaver Layout Table:

<!--DWLayoutTable-->
<tr>
<td width="117" height="41">&nbsp;</td>
<td colspan="2" valign="bottom"><div align="center"><strong><font size="-2" face="Verdana, Arial, Helvetica, sans-serif">SEE MONDERA'S
STARS SHINE!</font></strong></div></td>
<td width="25"></td>
</tr>

Does it have to do with a specific cell in the table such as the one below?

<td width="117" height="41">&nbsp;</td>

One site I looked at calls this use of a transparent GIF a "spacer GIF". Is this what I need? If so, how would I create a spacer GIF in the cell above and how would I use it as a basis for an Imagemap?

I would really appreciate your guidance in this. What precisely am I trying to do? Can you suggest a SPECIFIC online tutorial that might help me understand what is needed and how to do it?

Thank you so much.

Benjamin

[Delphi123]

Dear friends:

May I ask if you could take a look at my spacer.gif at:

http://www.websher.net/temp/spacer.jpg

I added the code for it as follows:

<tr>
<td width="117" height="41" img src="image/spacer.gif"></td>
<td colspan="2" valign="bottom"><div align="center"><strong><font size="-2" face="Verdana, Arial, Helvetica, sans-serif">SEE MONDERA'S
STARS SHINE!</font></strong></div></td>
<td width="25"></td>
</tr>

Specifically, I added the following line:

<td width="117" height="41" img src="image/spacer.gif"></td>


Is this correct? I linked the img src to the spacer.gif file in my template image directory. If this is correct, how do I create an imagemap from it. When I click on the area in question (i.e. line above) in Dreamweaver, it still does not bring up the Imagemap options. Can this be done manually?

Thank you again.

Benjamin

[rockboy]

The way the html is written there is no image in the td cell. Change your code from this:
<td width="117" height="41" img src="image/spacer.gif"></td>

To this:
<td><img src="image/spacer.gif" width="117" height="41"></td>

Try it again and see if you get the image map option.

Also, the way the td cell and image are laid out the image map will only cover the upper portion of the button. This may be a little confusing for those who try to hover on the button image near the bottom where there is no link. You may want to extend the image into the next row so that it can cover the entire red button.

I'm not sure how Dreamweaver accomplishes this but it would involve changing that td cell to add rowspan="2" and removing the td cell directly beneath as it's replaced by extending that td cell down into the next row since the cell below it's empty anyway. Probably pretty easy to do in Dreamweaver. ;)

[Delphi123]

Dear rockboy:

We are making a lot of progress!!

Take a look at the home page:

http://www.immortalgems.com

And now take a look at a screenshot from within Dreamweaver.

http://www.websher.net/temp/spacer2.jpg

You can see the Imagemap options in Dreamweaver. Just great!

Could you suggest the code for the bottom half of the button, please?

P.S. Please note that the image directory is "images", not "image".
Thanks so much.

Benjamin

[Delphi123]

Dear rockboy:

Now take a look at what I did with the lower half by adding a separate code for that area:

http://www.websher.net/temp/spacer3.jpg

and see the home page.

So can I create two imagemaps that will do the trick?

Thanks again.

Benjamin

[Delphi123]

Dear rockboy and friends:

SUCCESS!!!

Take a look! I created two imagemaps based on two spacer.gif images using the rectangular imagemap tool. A piece of cake! Well, after getting all this wonderful help from the folks at CyberTechHelp.

My thanks to everybody!

Benjamin

[rockboy]

I just took a look and this should do it...

add rowspan="2" to the td cell you just changed:
<td rowspan="2"><img src="...

go down to the next table row and delete this:
<td height="71"> </td>

(that's because you just filled that space from above with the rowspan="2")

Change your spacer img height from height="41" to:
height="112"

(that fills the expanded td cell with your spacer image)

You should be able to apply an image map to the circle area now.

EDIT: You beat me.:D
If it works then you don't need to do the above but my method allows you to use a single round image map instead of two rectangular ones.