Simple HTML help

**nvening** · 29-09-2006, 08:49 PM

How to i make the image map go at the very top of the page so it is inline with the background.

Im guessing what i have done is the simplest way to do what i am trying to do?

Heres the code:

Code:

<html>

<head>
<style>
  body
  {
    background-image: url("images/back_02.gif");
    background-repeat: repeat-x
  }
</style>
</head>

<body>
<!-- Top image map -->
<img src="images/top.gif" align="top" width="800" height="133" border="0" alt="" usemap="#top_Map">
<map name="top_Map">
<area shape="rect" alt="" coords="253,110,316,131" href="index.htm">
<area shape="rect" alt="" coords="179,109,250,129" href="index.htm">
<area shape="rect" alt="" coords="103,109,178,132" href="services.htm">
<area shape="rect" alt="" coords="48,109,103,130" href="systems.htm">
<area shape="rect" alt="" coords="12,9,357,99" href="contact.htm">
</map>
<!-- Top image map end -->
</html>

**ajbrun** · 29-09-2006, 10:01 PM

Positioned it absolutley:

Code:

<html>

<head>

<style>
  body
  {
    background-image: url("images/back_02.gif");
    background-repeat: repeat-x
  }
</style>
</head>

<body>
<!-- Top image map -->
<img style="position: absolute; left: 0px; top: 0px; src="images/top.gif" align="top" width="800" height="133" border="0" alt="" usemap="#top_Map">
<map name="top_Map">
<area shape="rect" alt="" coords="253,110,316,131" href="index.htm">
<area shape="rect" alt="" coords="179,109,250,129" href="index.htm">
<area shape="rect" alt="" coords="103,109,178,132" href="services.htm">
<area shape="rect" alt="" coords="48,109,103,130" href="systems.htm">
<area shape="rect" alt="" coords="12,9,357,99" href="contact.htm">
</map>
<!-- Top image map end -->
</html>

**nvening** · 29-09-2006, 10:17 PM

Ah brilliant, Thanks! (authough i had to move the img src infront of the style to get it to display for some reason)

**mike_w** · 30-09-2006, 12:02 AM

Just a couple of criticisms on that particular snippet of code:

1) Image maps are bad. They are inaccessible and inflexible. There are ways to do the same thing with ordinary images, or even just some styled text (my preferred method since it is more accessible e.g. allowing people to resize the page - unlike some images, it is pretty important that people can increase the size of the navigation, otherwise they won't be able to access anything!)

2) If you've just added the blank alt text to make it validate, then it defeats the entire purpose of the alt text. The whole point of making you enter alt text is so that those that cannot or will not be viewing the images are at less of a disadvantage. Having a blank alt might be acceptable when you're using images as spacers (although I wouldn't recommend that either), but certainly not when you have images been using as navigation.

I would recommend you try and get anything you write to validate, which means adding a doctype, changing the <html> tag appropriately, adding a closing body tag, and some other things I've probably forgotten but the validator will pick up for you.

**nvening** · 30-09-2006, 11:25 AM

Yep the code for that is not finished, i need to add the alt value and that meta bussiness etc

However what are my alternatives to an image map?

**mike_w** · 30-09-2006, 05:23 PM

Originally Posted by nvening

Yep the code for that is not finished, i need to add the alt value and that meta bussiness etc

However what are my alternatives to an image map?

Just separate images. If you really want to have them next to each other, you can just set the padding and margins to zero.

**TamDigital** · 30-09-2006, 10:39 PM

Just to expand on the previous post, you can float images/divs next to each other using CSS (i.e. float right), butting them right up to each other with 0 margins and padding.

Whatever you do, please ensure that you utilise some sort of cross browser test to ensure that all users of popular browsers will see the same results (I use browsershots.org coz they are free or very cheap).

Imagemaps aren;t all that bad, but they are best backed up with plain text links on the same page and which correspond to exactly what the links that the image maps are pointing to. They aren't all that SE friendly you see. See http://www.w3.org/TR/WAI-WEBCONTENT-...t-server-links

.

**mike_w** · 30-09-2006, 11:32 PM

Originally Posted by TamDigital

Whatever you do, please ensure that you utilise some sort of cross browser test to ensure that all users of popular browsers will see the same results (I use browsershots.org coz they are free or very cheap).

Good advice, but what's wrong with just using the different browsers? Internet Explorer, something with Gecko (e.g. Firefox) and Opera are the main browsers you need to try. Heck, you don't really even need to do that - if it works in Gecko, it'll probably work as you expect in other standards compliant browsers. It's just Internet Explorer that you also need to check.

**nvening** · 01-10-2006, 12:10 AM

On previous sites i have made i have used individual images for the top navs but i thought i would go with an image map this time as it seemed the better way to go about it?

I dont see whats wrong with them?

**TamDigital** · 01-10-2006, 10:00 AM

Originally Posted by mike_w

... if it works in Gecko, it'll probably work as you expect in other standards compliant browsers...

I appreciate your remarks and especially the use of the word probably.

Production testing is a sound practice for any astute webmaster.

**directhex** · 01-10-2006, 10:31 AM

Originally Posted by TamDigital

I appreciate your remarks and especially the use of the word probably.

Production testing is a sound practice for any astute webmaster.

especially as firefox isn't as compliant as all that. light years ahead of MSIE, sure, but still behind Opera or Safari/Konqeror

**directhex** · 01-10-2006, 10:36 AM

Originally Posted by nvening

On previous sites i have made i have used individual images for the top navs but i thought i would go with an image map this time as it seemed the better way to go about it?

I dont see whats wrong with them?

set your browser font to something huge (hold ctrl, and scroll down a few times). how does your site behave?

http://fredlwm.googlepages.com/lynx.zip - how does your site behave now?

http://colorfilter.wickline.org/ - still fine?

not everybody is guaranteed to view the website in exactly the way you see it on your screen. you need to do everything in your power to ensure a minimum of pain for those with issues (simple things like always setting valid Alt text, never using colors to signify things, etc)

Thread: Simple HTML help

LinkBack

Thread Tools

Simple HTML help

Thread Information

Users Browsing this Thread

Similar Threads

good html and php books????

The HTML bit of PHP - simple!

simple html question

Sending HTML document in Email, NOT as attachment?

remove HTML tags in javascript using regexp and replace

Posting Permissions