Easiest way to HTML a hover over image

Discussion in 'GBAtemp Art Studio' started by WeaponXxX, May 23, 2007.

May 23, 2007
  1. WeaponXxX
    OP

    Member WeaponXxX Too F'in Blonde

    Joined:
    Nov 4, 2004
    Messages:
    2,868
    Location:
    Currently in Chicagoooooooo
    Country:
    United States
    Hey everybody...just curious if I can get some pointers....I want to have Image A on my website but when the cursor goes over image A I want it to switch to image B. Can anybody help?
     
  2. Costello

    Administrator Costello Headmaster

    Joined:
    Oct 24, 2002
    Messages:
    12,031
    CODE




    Move the mouse over the image:




    click here to test the code:
    http://gbatemp.net/up/test.html

    how does it work?
    - two images ("reg.jpg" and "test.png") are loaded but hidden/invisible, with height=0 and width=0
    - by default, test.png is displayed
    - when the mouse moves over the image, test.png is replaced by reg.jpg
    - when the mouse moves out of the image, test.png comes back
     
  3. Cyan

    Global Moderator Cyan GBATemp's lurking knight

    Joined:
    Oct 27, 2002
    Messages:
    16,407
    Location:
    Engine room, learning
    Country:
    France
    I was waiting for your post Costello [​IMG]


    It's better than what I would have give him (something with function swap{})
    It even manage the preload image with width/height=0.

    I feel like an apprentice [​IMG]
     
  4. WeaponXxX
    OP

    Member WeaponXxX Too F'in Blonde

    Joined:
    Nov 4, 2004
    Messages:
    2,868
    Location:
    Currently in Chicagoooooooo
    Country:
    United States
    Thanks a lot Costello! You rock with the quick reply! Im gonna eat and then test out the code on my page. Thanks again man!
     

Share This Page