SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    Hi there! Owen's Avatar
    Join Date
    Jan 2000
    0 Post(s)
    0 Thread(s)

    Generic Imagemap

    I've been pulling my hair out over this problem:

    I have a webpage where the user can rate things by clicking on stars below the item. So if they wanted to give it a 3, they'd click on the 3rd star. I have it setup so that it does a regular javascript rollover to replace the image with the number of stars they selected highlighted. My problem is that I use an image map (instead of 10 seperate single images). Here's some code:

    PHP Code:

    <IMG SRC="../web/images/rank0.gif" BORDER=0 NAME="v0" ISMAP
    ="#ClickMap"> <SPAN ID='v0t'>Vote now!</SPAN><BR>
    IMG SRC="../web/images/rank0.gif" BORDER=0 NAME="v1" ISMAP
    ="#ClickMap"> <SPAN ID='v1t'>Vote now!</SPAN><BR>
    IMG SRC="../web/images/rank0.gif" BORDER=0 NAME="v2" ISMAP
    ="#ClickMap"> <SPAN ID='v2t'>Vote now!</SPAN><BR>

    MAP NAME="ClickMap">
    AREA SHAPE=RECT COORDS="0,0,15,15" HREF="#" ALT="1"
    onMouseOver="imgOn(,1);" onMouseOut="imgOff(,0)"
    AREA SHAPE=RECT COORDS="15,0,29,15" HREF="#" ALT="2"
    onMouseOver="imgOn(,2)" onMouseOut="imgOff(,0)"
    AREA SHAPE=RECT COORDS="29,0,43,15" HREF="#" ALT="3"
    onMouseOver="imgOn(,3)" onMouseOut="imgOff(,0)"

    First of all isn't valid, but you can see that if I hardcoded the object name to replace, I would need a lot of image maps--one for every item I wanted the user to be able to vote on. What I want to do is something conceptually like "" instead of Then one function could be used throught for ranking.

    Any suggestions?


  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Bournemouth, South UK
    1 Post(s)
    0 Thread(s)

    use the mouse position.....

    I had a similar problem on my drum price list page...
    DrumPrices (true sounds yet to be linked but it works)

    I wanted a hand to stay in a picture of a drum, under the mouse position. When the mouse was clicked the hand would hit the drum, and play a sound depending on how close to the center of the circle it was.(bass to play at center and treble to play at rim)
    I worked out the center of the drum, and made it mouse position 0,0. I found the radius and divided into three.
    So then calculate the new mouse position from 0,0 (or the start of your stars pic), and if your mouse moves away from this point it works out its new position relative to the start.

    So if your pic has 5 stars, each 10 pixels,
    Get your mouse position,
    take pic position from mouse position, this makes your mouse position 0,0 when at the top left of your pic
    your 'radius' is 50 pixels
    On your picture have a mousedown event containing an equation...
    x=new position of mouse from (0,0) top of pic
    number required = pixels from 0,0 divided by 10.

    so if your mouse is above the 3rd star, its x position is 30-39, so divide this by 10, then get the Math.floor(number)
    (this makes it a whole number,3) and thats your number.

    hope this helps
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


Posting Permissions

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