SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change image with select menu onmouseover (not onchange)

    I have a list of images in a select dropdown menu and I want an image to change when a user places the cursor on the image name in the dropdown - So he doens't have to select it first.

    I spent most of the afternoon yesterday searching these forums and the net in general for a script to do this, but with no luck. I couldn't even find anyone at all asking for such a script, which I find strange. Is it impossible to do?

    I have made my own attempt, but there are some problems. Here is the code:

    HTML Code:
     <form name="dropform">
     
     <select name="dropdown" onmouseover="document.images.test.src=document.dropform.dropdown.options[document.dropform.dropdown.selectedIndex].value">
     
     <option value="http://www.websmileys.com/sm/animal/529.gif">Turtle</option>
     <option value="http://www.websmileys.com/sm/animal/002.gif">Cat</option>
     <option value="http://www.websmileys.com/sm/animal/1132.gif">Monkey</option>
     <option value="http://www.websmileys.com/sm/animal/1115.gif">Smiley</option>
     <option value="http://www.websmileys.com/sm/animal/527.gif">Dog</option>
     
     </select>
     
     </form>
     
     <br />
     <br />
     <br />
     <br />
     <img id="test" src="http://www.websmileys.com/sm/animal/524.gif">
    First of all, it only works in Firefox, not in IE. In IE you still have to select the image for it to change.
    Secondly, it only works somewhat. It doesn't change to the correct image, it just seems to take one of the images at random. I can't even find a pattern.

    Anyone has any experience in this?

  2. #2
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as i know the option Tag is not having any events, so we can't write a code like

    <option value="http://www.websmileys.com/sm/animal/529.gif" onmouseover="alert('t');document.images.test.src='http://www.websmileys.com/sm/animal/529.gif'">Turtle</option>

    Basically we can't capture the event of mouse on that option.
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I already tried placing the event on the option tag, but that didn't work. I thought it was possible to get such a script working somehow since it almost works in Firefox


Bookmarks

Posting Permissions

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