Member Avatar for Venom Rush

Hi guys and gals

I have an image of a map. The map has different areas on it that when someone mouseover's an area a tooltip pops up giving a small description.

Now I've gone about doing this by creating an <a> tag and giving it the following css properties:

a.area1 {
	position:absolute;
	top:371px;
	height:55px;
	width:730px;
	background-color:none !important;
}

This works fine in Firefox but in IE it doesn't because there is no color specified. When I specify a color then it works but this isn't ideal because then it blocks the area of the map.

I think IE thinks that there is no element there because there is no color. I've also tried 'transparent' and that doesn't work either. Anyone have any suggestions?

P.S. The tooltip I'm using is Jquery Tooltip http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

  • 1 Contributor
  • 1 Reply
  • 102 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Venom Rush

Dani AI

Generated

Older IE often ignores an absolutely positioned element if it has no visible content or "layout." ’s quick fix (inserting an invisible pixel) is a known workaround, but there are cleaner alternatives that avoid extra markup and are easier to maintain and test.

The simplest CSS-first fix is to force layout for the anchor so IE treats it as a real box that can receive mouse events. Give the anchor block-level behavior and an IE layout trigger:

a.hotspot {
  display: block;
  position: absolute;
  top: 371px;   /* example */
  left: 10px;
  width: 730px;
  height: 55px;
  z-index: 10;
  cursor: pointer;
  zoom: 1;      /* triggers hasLayout in IE6/7 */
}

If you need the hotspot visually invisible, keep no background; for modern browsers opacity: 0 or background: rgba(0,0,0,0) works. For really old IE you can use filter: alpha(opacity=0), but test carefully because filters can affect stacking and event behavior.

If the anchor overlay approach still causes issues, consider using an HTML image map instead. Image maps are semantic for clickable regions and work across browsers without overlay elements:

<img src="map.png" usemap="#mymap" alt="Map">

<map name="mymap">
  <area shape="rect" coords="10,20,200,100" href="#" title="Short tooltip text">
</map>

Attach your tooltip library or a small jQuery handler to area elements (mouseenter/focus and mouseleave/blur) so keyboard users see the same cues.

Quick troubleshooting checklist: verify the hotspot sits above the image (z-index), ensure anchors are focusable (give an href or tabindex), temporarily apply a background color or outline to visualize the region while debugging, and test across the exact IE versions you must support. These steps will let you replace the invisible-pixel hack with a maintainable solution.

Member Avatar for Venom Rush

I managed to solve my problem by placing a 1x1 transparent give inside the <a> tag and setting its width and height to the size I needed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.