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

You are viewing section 1 of 5 — Next Page »

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.

You are viewing section 1 of 5 — Next Page »