Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inconsistent behavior in hotspots on a blank image inside a DIV

    Hello,

    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
    http://webrachna.com/ratingStarTest.html

    Thanks,
    Nishi

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Change your div from

    <div style="width:80.00%">

    to

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

    see if that helps
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Mr J, for your response.

    Changing

    <div style="width:80.00%">
    to
    <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" />

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Give this a try

    Code:
    <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)" />
    </map>
    
    </div>
    Last edited by Mr J; 05-14-2007 at 11:32 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •