Hotspot Troubles

**ivankoumaev** · 05-29-2009 06:49 PM

I'm trying to create hotspots on an image for my website in order to make a navigation. But I can't seem to pull up a menu when I hover over the area where I triggered the menu to appear. Does anyone know what I'm doing wrong?

Here's my code:

Code:

<html>
<style type="text/css">
<!--
 BODY
.style13 {font-size: 14px}
.style15 {
 font-size: 12px;
 font-weight: bold;
 color:black;
}
.style3 { font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.style5 { font-size: 14px;
 font-weight: bold;
}
a:link {
 color:black;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color:black;
}
a:hover {
 text-decoration: none;
 color:lavender;
}
a:active {
 text-decoration: none;
 color:black;
}
.style16 {color:black}
.style17 {
 color:black;
 font-weight: bold;
}
#image {
position:absolute;
top:0px;
left:0px;
width:191px;
height:110px;
}
#navigation {
background-color: transparent;
position: absolute;
top:81px;
left:57px;
width:96px;
height:20px;
}
#home {
background-color: transparent;
position: absolute;
top:0px;
left:0px;
width:37px;
height:8px;
}
#gallery {
background-color: transparent;
position: absolute;
top:0px;
left:44px;
width:52px;
height:8px;
}
#contact {
background-color: transparent;
position: absolute;
top:13px;
left:22px;
width:53px;
height:7px;
-->
</style>
<img src="images/test.png">
<div id="image">
<div id="navigation">
<a href="home"><div id="home"></div></a>
<div id="gallery"></div><div id="contact"></div>
    </div>
</div>
<body style="background-color: transparent">
<font face=verdana><font size=2>
 
TEXT
 
</font></body>

**misson** · 05-30-2009 12:36 AM

The most important problem is that your design may not appear to be navigation to a user. You may say "of course a user will know what to do," but remember that you're the designer, which makes it hard to think like a user. You've gotten rid of underlines, so the user doesn't have that visual cue. The mouseover regions need to advertise that a menu will pop up when the mouse is hovered over them. Menu items are clickable, so the user already knows how to interact with them. Have some people who've never seen the design before try to use it and see what mistakes they make and what's unclear. Redesign so users won't make those mistakes because the the erroneous actions don't even occur to them.

Run your source through a validator and you'll see a number of errors, including:

<style> needs to be a child of <head> and the other tags need to be descendants of <body>
<div> can't be a descendant of <a>
you only close one <font> tag

Once you fix the validation errors, here's some other stuff to clean up:

Don't use <font> tags.
Use meaningful class names. "style15" is not meaningful. Ideally, the class names will describe function, not styling.

The reason you don't see a menu pop up is your source doesn't have any code that will make any elements pop up. Read over examples like Son of Suckerfish or Stu Nichol's flyout menu. CSSPlay has many more examples, but some may be of better quality than others.

There should be 1 root element holding all the navigation elements. You've got 2 separate elements, an <img> and a <div>.

Rather than positioning the navigation over an <img>, consider making the image the background of the navigation.

Thread: Hotspot Troubles

LinkBack

Thread Tools

Display

Hotspot Troubles

Re: Hotspot Troubles

Similar Threads

FTP troubles

iframe Troubles

Troubles with PHP-GD

cPanel Troubles

Server Troubles

Posting Permissions