View Full Version : Inconsistent behavior in hotspots on a blank image inside a DIV

05-14-2007, 03:01 PM

I have searched the archives, and have been able to find some related
posts, but am wondering if someone can offer a more direct suggestion.

I am trying to create hotspots using an imagemap inside a DIV, inside a DIV
i.e. there are two DIVs (nested) and then follows the image with imagemap.
This is actually the star rating mechanism explained at
http://www.thebroth.com/blog/119/css-rating-stars. The outer DIV has a
background of grey star repeated to (always) 55px, and the inner DIV has a
background of orange star repeated to a width based on the rating. So, if an
item has a 4 star rating (80%), then grey star would be 55px, and the orange
star would be 44px. The image used for imagemap is a blank image
(transparent, non-interlaced gif 1x1), that is extended to 55px width, with a
hotspot every 11px (to accommodate 5 stars).

It works fine with NS. With IE, the blank image is causing the inner DIV to be
as wide as the outer DIV. You can see this at


Mr J
05-14-2007, 05:58 PM
Change your div from

<div style="width:80.00%">


<div style="width:80%;overflow:hidden">

see if that helps

05-14-2007, 07:50 PM
Thanks Mr J, for your response.


<div style="width:80.00%">
<div style="width:80%;overflow:hidden">

does prevent this container DIV to not run through the end. However, it also forces the blank image inside it to be as wide as itself. So, the 5th star is not orange any more (which is perfect, 80%), but then it is not a hotspot either (which is not so good). The blank img inside this DIV is

<img src="blank.gif" width="55" height="12" usemap="#ratingMap" />

Mr J
05-14-2007, 10:27 PM
Give this a try

<div class="rating_bar">

<div style="width:80%;overflow:hidden"></div>

<img src="blank.gif" usemap="#ratingMap" style="position:relative;top:-14px;border:0px;width:55px;height:12px"/>
<map name="ratingMap">
<area shape="rect" coords="0, 0,11,12" href="javascript:alert(1)" />
<area shape="rect" coords="12,0,22,12" href="javascript:alert(2)" />
<area shape="rect" coords="23,0,33,12" href="javascript:alert(3)" />
<area shape="rect" coords="34,0,44,12" href="javascript:alert(4)" />
<area shape="rect" coords="45,0,55,12" href="javascript:alert(5)" />