changing pictures...trouble...

Discussion in 'Web Design & Coding' started by Biggie_mac, Jun 23, 2005.

  1. Biggie_mac

    Biggie_mac OSNN Junior Addict

    Messages:
    18
    I am having a problem with a "picture swap". I want to place a small picture which changes to another picture when you place the mouse over. i've tried the hover button from frontpage but it takes 5-6 sec until the buttons can be seen(there are 7 of'em). I've tried this:

    <img src="poze/produse.jpg" height="21" width="160" border="1" name="picture2"
    onmouseover ="document.picture2.src = 'poze/produse2.jpg' "
    onmouseout ="document.picture2.src = 'poze/produse.jpg' "</a></a><p style="margin-top: 0; margin-bottom: 0" align="center">

    but it either doesn't work or I have to hold the mouse over for 5-6 sec for the picture to change...who can give me some hints regarding this problem?
     
  2. LordOfLA

    LordOfLA Godlike!

    Messages:
    7,027
    Location:
    Maidenhead, Berkshire, UK
    heheh still the wrong forum :D you want coding and design but anyway :p

    IIRC you need to specify its javascript somehow... but dontquote me on that.
     
  3. Jewelzz

    Jewelzz OSNN Godlike Veteran

    Messages:
    10,977
    Location:
    California
    Moved and the other thread was deleted
     
  4. albybum

    albybum Penguin Rancher

    Messages:
    280
    Location:
    Elizabethton, TN
    Code:
    
    <img src="poze/produse.jpg" border="1" id="picture2" 
    onmouseover="document.getElementById('picture2').src='poze/produse2.jpg';" 
    onmouseout="document.getElementById('picture2').src='poze/produse.jpg';" />
    
    

    See it in action: http://www.albybum.net/temp/osnn/

    Any lag time in the image rollover working could be due to the size of the image.
     
  5. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    Why not onmouseover="this.src='/poze/produse2.jpg';"?
     
    Biggie_mac likes this.
  6. albybum

    albybum Penguin Rancher

    Messages:
    280
    Location:
    Elizabethton, TN
    Teaching someone to use the fully qualified method, ie getElementByID(), will give them the ability to change other images and more importantly other elements outside the scope of the current element.

    Using 'this' keyword is valid and very handy when you want to avoid ID attributes, but I like to make sure people get the detailed example. :)