Header Hotspots

[Aaron]

How do I make a hotspot on the header that links to somewhere. Specifically, I have the VATSIM logo on my header, and want to make a clickspot so it links to www.vatsim.org when clicked. I know how to do it in dreamweaver, but I'm not able to use dreamweaver. I have no clue what code to put in where, plz help.

[tutmeister]

You need to use the HTML tag <map>.

You can find more information here:

http://www.w3schools...ags/tag_map.asp

For you, it'll look something like this:

<img src="http://www.canforce.org/lib/skins/crystal/images/topbanner.jpg" width="969" height="144" alt="CanForce" usemap="#canforce-header" />

<map name="canforce-header">
     <area shape="rect" coords="0,0,162,72" href="http://www.vatsim.net/" alt="VATSIM" />
</map>

[Tom]

Ew no don't do that. It's so outdated. Use a separate image and float it over the header, wrapping it in an anchor as you would a normal link.

[tutmeister]

Tom, <map> element is not outdated, in fact it has made it's way to HTML 5.

What is outdated, is the usage of image maps for navigation, for which Target.com was sued in 2008 by the National Federation of the Blind, whose members complained that they couldn't browse correctly using their screen reader. This meant that Target.com was foul of US Section 508 and they were fined 6 million dollars. However, since then (and before) there has been this rumor that the <map> element is bad. But it's not on its own, as long as you use it correctly and determine your audience and design appropriately. In fact, even Section 508 explains how you should use it correctly.

So in this case, in the case of a Virtual Airline, I don't expect blind virtual pilots to be logging on, so can easily avoid the hassle that CSS floats and the like can bring to a new developer by using an image map for a trivial navigation link to an external source. As you can see, ALT tags were used above as recommended by the Web Standards Group, W3C and Section 508.

[Tom]

Right.

I prefer to teach the idea of how to do it right rather than "how it's possible to do it but you probably shouldn't do it that way in some cases so you'll have to learn another method too" - it just gets people into bad habits, like using image maps at all.

[Aaron]

Where do I put this code? Now I get how to make a clickspot, but where do I put the code? I looked in the layout.tpl and style.css which one should it go in and where should it go?

[Jeff]

Depending on the template you are using, it can be in one of two places. Check your layout.tpl and also your .css file