...

View Full Version : BgImage as ImageMap?



JWGlenn
11-14-2002, 06:08 AM
I am trying to design a Web site, and I made an image, to which I would like to use it as the background of the site. However, I also would like to have it be used as an imagemap.

Is there a way to do this? Or will image mapping only work with an image inside a page?

Here's the link: http://cwcafe.com/josh

I need the gold bar on top to have links, and the copyright info on the bottom would have 2 links. I would greatly appreciate the help.

:)

beetle
11-14-2002, 07:42 AM
Your best bet here would be to absolutely position your links
<style>
div#navLinks{
position: absolute;
left: 0px;
top: 0px;
}
div#navLinksa {
position: absolute;
display: block;
top: 41px;
height: 11px;
}
</style>

<div id="navLinks">
<a href="index.html" style="left: 154px; width: 34px;"></a>
<a href="aboutme.html" style="left: 195px; width: 68px;"></a>
<a href="gallery.html" style="left: 270px; width: 73px;"></a>
<a href="sports.html" style="left: 350px; width: 64px;"></a>
<a href="http://cwcafe.com/cgi-bin/dcforum/dcboard.cgi" style="left: 422px; width: 47px;"></a>
</div>And the process can be repeated for the bottom links.

Now that I've answered you question directly, here's an indirect one: Why on EARTH would you want do make the background of your site one big image??

P.S. I spent the first 16 years of my life in Park Forest :D

JWGlenn
11-14-2002, 12:26 PM
Thanks, I'll give it a try.

I am just trying this technique out ... but if it becomes more trouble than it's worth, I may scrap it.

Re: Park Forest... that's cool. My cousins lived there for a brief time. :)

ronaldb66
11-14-2002, 01:03 PM
JWGlenn,

beetle hinted (siq) at it: using a single large image to make up your entire site is highly impractical for a number of reasons:
[list=1]
Since it is so large, it takes forever to load;
The majority of the image consists out of monocolor dark blue, which can be achieved by a colored background much easier, not to mention a zillion times faster;
The layout, like the distance between header and footer, is fixed; in practice this will mean the content will either be to little or to much to ever fit the available space.
[/list=1]
I suggest slicing the large image up into a page header, a menu bar (which supports an image map), and a footer. Incorporate these elements in the page, together with the content, and set them against a solid blue background in the desired color.

JWGlenn
11-14-2002, 02:29 PM
Ronald,

Thanks for your input.

1. The image is fairly small and only takes 3s to load on a 28.8k modem.

2. As stated above, the GIF doesn't take long to load at all.

3. The reason I had made this image the size it is (fixed height and width, is because I wanted to make sure it fit on one page (w/o scrolling) on an 800x600 display.

I will probably end up just using regular images though, if I cannot find a way to make the background image an imagemap.

Josh

beetle
11-14-2002, 03:17 PM
Originally posted by JWGlenn
3. The reason I had made this image the size it is (fixed height and width, is because I wanted to make sure it fit on one page (w/o scrolling) on an 800x600 display.There are better ways to accomplish this.

JWGlenn
11-14-2002, 03:24 PM
Yeah, I'm slowly figuring that out. :cool:
Thanks again for the tips. :)

ronaldb66
11-14-2002, 03:42 PM
Okay, i did a little experimenting and the size argument doesn't hold up. I'm big enough to admit that.
Still, i think your life will be a lot easier (concering web design, anyway), if you consider page elements as page elements and a background as background. That'll save the hassle with image maps at the same time, and your design will be more flexible.

Then again, it's your life, your site, your choice.

cg9com
11-14-2002, 04:00 PM
Originally posted by JWGlenn

3. The reason I had made this image the size it is (fixed height and width, is because I wanted to make sure it fit on one page (w/o scrolling) on an 800x600 display.


your site says:
src="images/index.gif" width="1024" height="768"

but the image will fit in 800x600
however, the bottom may need to be a little higher up

JWGlenn
11-14-2002, 04:24 PM
Originally posted by cg9com



your site says:
src="images/index.gif" width="1024" height="768"

but the image will fit in 800x600
however, the bottom may need to be a little higher up

Yes, but in order for the image not to tile in a larger resolution, you have to make the image as big as the biggest resolution. That's why it's at 1024x768.

cg9com
11-15-2002, 04:38 AM
couldnt you use css to configure that

beetle
11-15-2002, 04:46 AM
Originally posted by JWGlenn
Yes, but in order for the image not to tile in a larger resolution, you have to make the image as big as the biggest resolution. That's why it's at 1024x768.JW, what you describe here is what I like to call a 'hack'. Besides, 1024x768 is not the largest resolution by any means. Here's the correct way to do it...


<html>
<head>
<title>My Page</title>
<style type="text/css">
body {
margin: 0px;
background-image: url(images/big_ol_gif.gif);
background-repeat: no-repeat;
background-color: #00F; /* Or the correct hexcode-blue */
}
</style>
</head>
<body>
</body>
</html>Of course, this is assuming you still want to use that image for the background of your site, which again, I strongly advise against.

cg9com
11-15-2002, 05:33 AM
yes beetle stated what i had in mind

JWGlenn
11-15-2002, 01:36 PM
Originally posted by beetle
[B]JW, what you describe here is what I like to call a 'hack'. Besides, 1024x768 is not the largest resolution by any means.

Yes, I am aware that is not the largest resolution. For what it's worth, I removed the gold link bar and the copyright line from the original background image; and made the link bar a seperate image from which I could imagemap. Now I have the desired look I was trying to achieve.

Thanks to cg9com and beetle.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum