Website Design Forum

**Brautigam** · 07:28 PM

I am creating a site by using CSS. I have 3 Main pages, we will call them HOME, PAGE 1, and PAGE 2. I have an image that I created with those 3 names on it. I want to add 3 hotspots (image maps) or links to this picture that when you click on the word...you will go to that page (Either Home, Page 1, or Page 2).

If the image is in the CSS file that looks something like this...

PHP Code:


			
#navigation {
width:987px;
background-image:url('Navigation Banner.png');
height:196px;
}

...and many pages use this same CSS file and they all have the same Navigation Banner, how would I get all of the words on the image to link to the correct pages?

**johnncyber** · 07-09-2007, 07:56 PM

Image based links are bad for a lot of reasons (and image maps are even worse). I would recommend placing text links over an image background (using absolute positioning) or if they have to be image links, sliced up images.

Let me know if you need some examples.

**Brautigam** · 07-09-2007, 08:48 PM

Quote:

Originally Posted by johnncyber

Image based links are bad for a lot of reasons (and image maps are even worse). I would recommend placing text links over an image background (using absolute positioning) or if they have to be image links, sliced up images.

Let me know if you need some examples.

I know what you are saying about sliced up images, and make each part of the image a different link. I would rather just make a top logo and then under that put some kind of CSS navigational bar, like one of those simple ones that changes colors and moves a little when you put your mouse over it.

BTW I looked into making image maps in CSS and it was just way too confusing. I think I will just do what I stated above. Thanks for the response.

**johnncyber** · 07-09-2007, 09:40 PM

So you have decided to not go with links on top of the image?

**Brautigam** · 07-09-2007, 09:43 PM

Quote:

Originally Posted by johnncyber

So you have decided to not go with links on top of the image?

Yeah I'm just going to put an image on the CSS file which I already have up, then I will just put a navigation bar under that or on the left side of the page.

**johnncyber** · 07-10-2007, 01:49 AM

Cool, just wanted to clarfiy. Well have fun and happy coding.

**Brautigam** · 07-10-2007, 01:57 AM

Quote:

Originally Posted by johnncyber

Cool, just wanted to clarfiy. Well have fun and happy coding.

Yeah I actually decided to go along with the image map but only in HTML...not in CSS that would just be too tough. It is simple to do in HTML since it is just likes making a box for where you want the link to be by using Frontpage. No coordinates or anything bad, so it's cool.