AvengeX Webmaster Development - Free PHP, MySQL, CSS, XHTML, Photoshop Tutorials

This tutorial is going to show you how to do hotspots the XHTML and SEO way. Remember back in the days of HTML 4 when we used to place a giant image onto a page, then draw hotspots or image maps over them with a link to another page, because we simply couldn't be bothered to slice it? Those days are gone! And, with the rise of semantic coding with lists and CSS, as well as the storm of hype about site usability, this technique has been phased out and has become fully deprecated in XHTML(which means if you do it in an XHTML document, it won't be valid!)The image map or hotspot was particularly useful when it came to complicated images or layouts where you wanted links. You could use circles, squares, polygons, rectangles and so on. And, although the technology is here in the form of XHTML, most browsers, including Firefox and Internet Explorer, don't support the A tag's shape or coords attributes yet.

So, where does this leave us? We need to be able to have movable links on a page that fit the area we want to link, more or less.

Here's what we're going to do:
First off, we're going to make a list of all the links we want to use on the page, in order from left to right. For instance, if the first link on the image we're going to hotspot reading it from left to right is "About Us", then we'd put "About Us" at the top of the list. Then, we'll get the image from Photoshop or an equally good graphics program and then set it as the background. Then, we will start to use position: relative; to put them over each link, then adjust the font-size so they cover it correctly. Then, we'll need to hide each link somehow and make sure they're not visible unless the user has CSS turned off.

Does this sound daunting to you? Trust me, it's really not.

For this tutorial, we'll be using the navigation/header area of my brand new web development firm, Alcatomic to work with.



As you can see, the navigation link on it are embedded in the image. This is a result of a common hitch in web design - not everyone has every font installed. However, the main thing we're looking at is the fact that the links are bendy and not all on the same level.

We're all ready to dive into the code now.

<div id="navigation">
  <ul id="linkmenu">
    <li class="n-company"><a href="#"><span>Company</span></a></li>
    <li class="n-services"><a href="#"><span>Services</span></a></li>
    <li class="n-portfolio"><a href="#"><span>Portfolio</span></a></li>
    <li class="n-contact"><a href="#"><span>Contact</span></a></li>
    <li class="n-ethos"><a href="#"><span>Ethos</span></a></li>
    <li class="n-clients"><a href="#"><span>Clients</span></a></li>
  </ul>
</div>


Let's break it down for you:
<div id="navigation">...</div>
This is the tag where you will assign the background to as an image. We'll go onto the CSS a bit later though.

<ul id="linkmenu">...</ul>
This is the list identifier we'll apply a style to.

Now onto the actual list items. Each one has a class to give an individual style to. I'll explain why later. Then we have link, and inside that we have a span. This is because when we have the span to play around with, we can hide the element while retaining the link there too.

Introducing.. position: relative;

Positioning something with relative is very similar to positioning it absolutely. The difference is that it is relative to where the element has been placed in the mix. One thing you should be warned about is the fact that even if it's positioned, some browsers still fill the space where the element would go if it hadn't been. We can fix this by applying a float to it, eliminating this problem completely.

A little housekeeping...

To start off, we're going to have to specify the properties for #navigation. This will act as a container to hold the background image we're going to be working over.#navigation {
  height: 72px; /* height */
  background: url('nav.jpg') no-repeat; /* set the background image, no repeating */
}


Now we've got that done, it's time to set up the list styles.ul#linkmenu, #linkmenu li {
  padding: 0; margin: 0;
  list-style: none;
}
ul#linkmenu {
  float: left;
  height: 0; /* these two lines fix that extra whitespace problem on the layout */
}
#linkmenu li {
  font-family: Times New Roman, Times, Georgia, sans-serif !important; /* NOTICE THIS! */
  position: relative;
  width: 10px;
}


If you look at how I've explicitly defined the font-family property, you might be wondering why. This is because fonts look different at different sizes, and further on in the tutorial we're going to be utilizing that to get the right coverage of the wannabe-hotspot. I've also given each a width of 10 pixels. If we leave it as variable, that means the positioning will become unpredictable - and this isn't too good.

Classes, classes, classes!

The heading says it all. Each class will contain the relative position coordinates and an individual font size. Figuring these out in the first place is all about trial and error, and may take a while. The good news is, once it's done, it will work in Firefox, IE and Opera!

Let's break down the first class for you:.n-company {
  top: 29px; /* 29 pixels from the top */
  left: 66px; /* 66 pixels left from where it was inserted */
  font-size: 16pt; /* the font size needs to be this size to cover the area correctly. */
}
Here are the rest for you:.n-services {
  top: 14px;
  left: 180px;
  font-size: 15pt;
}
.n-portfolio {
  top: -19px;
  left: 285px;
  font-size: 19pt;
}
.n-contact {
  top: -65px;
  left: 410px;
  font-size: 19pt;
}
.n-ethos {
  top: -105px;
  left: 530px;
  font-size: 17pt;
}
.n-clients {
  top: -120px;
  left: 823px;
  font-size: 17pt;
}


Negative numbers, ???, confusion!

You'll notice how the top properties of each class, progressing from left to right, are getting smaller and going into the negative regions. This is because the list items are not set to display: inline. This doesn't pose a problem at all, because we've got the container (<ul>) floating.



We've got that sorted. Now we have the problem of hiding the text. A lot of people would use display: none, but then they would only find that all the links would disappear. The fix? visibility: none;#linkmenu li a {
  text-decoration: none;
  background: none;
}
#linkmenu li a span {
  visibility: hidden;
}


The first style is to make sure nothing gets underlined, and that it won't get any backgrounds on hover, since some people like to add background attributes to their links these days.That's about it now. Check it in your browser and be amazed - invisible, semantic links!

---