[jerusa]

Hello, and thanks for considering this. I know how to link an image on a document to open up another document on my site. Example:

<td><a href="full_page3_bkg3.html"><img src="fp2_bkg.jpg" width="950" height="625"></a></td>

However, I have created a page using a tiled background .jpg. The code for that is:

<style type="text/css">
<!--
body {
background-image: url(fp3_bkg.jpg);
}

This is a different situation. I've sourced my Dreamweaver manual and must be missing it. Other than a "HOME" link there is nothing else visible on this page. Visitors will need to click generally anywhere on it to get to the next page of the site. The question is how do I code the link with the background .jpg? Or, perhaps there's a way to link .html to .html?

Appreciate the help,
JR

[Andrea]

You cannot add a link to a background image. A background image really isn't intended as a link, it's just decoration. What exactly are you trying to do?

Also, by the code you posted for the image link - it contains table code - I wonder if you're not incorrectly using tables for layout?

[jerusa]

Andrea, on 26 March 2012 - 07:48 PM, said:

You cannot add a link to a background image. A background image really isn't intended as a link, it's just decoration. What exactly are you trying to do?

Also, by the code you posted for the image link - it contains table code - I wonder if you're not incorrectly using tables for layout?

Thank you for your response. The 1st example does contain a table with a .jpg in it - the format seems ok and linking from that page is easy. There's no table on the page with the repeated background .jpg.

I used the tiled .jpg approch to make that page because the decorative effect it produces shows a certain possibility in backgrounding - it's a sample background I want viewers to see when they go to that page.

If I can't add a link to the background image, that only leaves adding a link somehow to the document as a whole, or "floating" some text (as with the "HOME" link). I'd rather not do that as it begins to complicate the look of the page/sample. So, I'm rooting for the .hml to .html link solution. Any way to go with that?

[Andrea]

I'm still not sure what you are trying to accomplish. Right now, it sounds like you have one page with a repeating background and one single word "home' that is meant a a link? do you have a link to what you're working on or can you better explain the concept of the entire page?

[jerusa]

Thanks for going this extra mile, Andrea. I can't demonstrate with a hosted site right now, but think of it this way:

Page 1 = Home.html - links to Page 2 via <img src="x.jpg"> imbedded in a table
Page 2 = Bkg.html ---- links to Page 1 via a "floating" text word "home" (page is composed from a background .jpg) & needs to link to Page 3 without using a "floating" text word, if possible
Page 3 = Stuff.html --- links to Page 1 via a "floating" text word & to Page 4 via <img src="y.jpg">imbedded in a table
Page 4
Page 5
Etc.

If there's no other way to link to Page 3 from Page 2, I can use an extra "floating" text word to link them. It would just be adding clutter to the page, so I'd really prefer not to.

[Andrea]

I'm still not clear.

For one, usually site navigation consists of the entire navigation on each page - so that you can go from page 3 to home or page 7. but since I do not know what your project really is, it may make sense to use your -one-page-after-the-next- approach.

You're still using the word 'table' - if you are just learning to do webdesign, you might as well learn it the right way and NOT use tables for layout.

I am not sure what you mean by 'floating' - 'float' is used in CSS for layout, but I don't think you mean that.

Maybe you can post the entire bit of code you're working with for one of your pages.

You can make a word a link, too - If you want the word 'Home' to be a link to your Page 1 / Home, you'd write it like this:

<a href="home.html">Home</a>

[pushbike]

Jerusa use the this link is .html

[jerusa]

Andrea, on 27 March 2012 - 05:45 AM, said:

I'm still not clear.

For one, usually site navigation consists of the entire navigation on each page - so that you can go from page 3 to home or page 7. but since I do not know what your project really is, it may make sense to use your -one-page-after-the-next- approach.

You're still using the word 'table' - if you are just learning to do webdesign, you might as well learn it the right way and NOT use tables for layout.

I am not sure what you mean by 'floating' - 'float' is used in CSS for layout, but I don't think you mean that.

Maybe you can post the entire bit of code you're working with for one of your pages.

You can make a word a link, too - If you want the word 'Home' to be a link to your Page 1 / Home, you'd write it like this:

<a href="home.html">Home</a>

This code produced the attached screen shot from Dreamweaver's Preview in Browser:

<html>
<head>
<title>full_page2_bkg2.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#0000CC" marginwidth="0" marginheight'"0" leftmargin="0" topmargin="0" bottommargin="0" link="#CCCCCC" vlink="#CCCCCC" alink="#CCCCCC">
<div id="Layer1" style="position:absolute; width:100px; height:40px; z-index:1; left: 782px; top: 452px">
<div id="Layer2" style="position:absolute; width:9px; height:13px; z-index:10; left: -573px; top: 16px"><img src="copyr_db2.gif" width="20" height="20"></div>
<p>&nbsp;</p>
<p align="center"><font color="#CCCCCC"><b><font face="Verdana"><u><font size="2"><a href="wwhome.html" target="_parent">Home</a></font></u></font></b></font></p>
</div>
<p>&nbsp;</p>
<table width="50" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><a href="full_page3_bkg3.html"><img src="fp2_bkg.jpg" width="950" height="625" border="0" usemap="#Map"></a></td>
</tr>
</table>

<map name="Map">
<area shape="rect" coords="1,1,951,627" href="full_page3_bkg3.html" target="_parent">
</map>
</body>
</html>

Site visitors are instructed prior to viewing a series of pages - showing samples of (lets call them) backgrounds for images - to click on these pages to move forward, or on the (layer) word "home" to go to their starting point. I know it's off course to do it this way and I will eventually improve the formating, but for now I get (for me) an acceptable result. The pages are meant to be seen like clean (and uncluttered as possible) canvases. The attached page works because I can map the .jpg to link to the next page. The sample page created with a tiled background .jpg doesn't for the reason you point out. It would have been nice because the sample would have covered the entire page. Guess I'll do something else. Thanks much for your advice and consideration - truly appreciated. JR

Attached thumbnail(s)

• 

[jerusa]

pushbike, on 27 March 2012 - 08:39 AM, said:

Jerusa use the this link is .html

pushbike - interesting, could you be more specific as to the what, how and where to try this... thanks!

[Andrea]

The code you have there is quite a jumble, but I think I understand a bit better what you are trying to do.

First, the term 'background' image refers to an image in the background. Your image fp2_bkg.jpg may be meant to be used as a background, but by you inserting it into the page content, you're not using it as a background. This is perfectly fine, but using the term in this context led to some confusion on my end.


So if I got it right this time, you want the entire image to be clickable and take your visitor to the next page. For that, you do not need an image map. Image maps are used, if you want certain areas of an image clickable. so get rid of what I crossed out:


<td><a href="full_page3_bkg3.html"><img src="fp2_bkg.jpg" width="950" height="625" border="0" usemap="#Map"></a></td><br style="color: rgb(28, 40, 55); font-size: 13px; line-height: 19px; background-color: rgb(250, 251, 252); "></tr><br style="color: rgb(28, 40, 55); font-size: 13px; line-height: 19px; background-color: rgb(250, 251, 252); "></table><br style="color: rgb(28, 40, 55); font-size: 13px; line-height: 19px; background-color: rgb(250, 251, 252); "><br style="color: rgb(28, 40, 55); font-size: 13px; line-height: 19px; background-color: rgb(250, 251, 252); "><map name="Map"><br style="color: rgb(28, 40, 55); font-size: 13px; line-height: 19px; background-color: rgb(250, 251, 252); "><area shape="rect" coords="1,1,951,627" href="full_page3_bkg3.html" target="_parent"><br style="color: rgb(28, 40, 55); font-size: 13px; line-height: 19px; background-color: rgb(250, 251, 252); "></map>


Now the entire image is a link and clicking it will take you to page 3.


If you want to use your image as a true background image, it's not clickable, as it really is no content. You could, however, create a transparent image, placed that on top of your background image, and make the transparent image the clickable link.