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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Generic swap image

    Hello all,

    i am trying to do a script that let me change the src of an image when someone click on it. When the second image (a bigger image) appear and the user hit the image with a second click, appears the first image. And so on.

    This is what i've done:

    Code:
    var newImage;
    
    function swapImage(nomeid, newImage) { 
    if(document.getElementById('nomeid').src == newImage) { 
    document.getElementById('nomeid').src = "images/"+nomeid+"_big.jpg"; 
    }else{ 
    document.getElementById('nomeid').src = newImage; 
    } 
    }
    and

    <IMG id="image1" SRC="images/image1.jpg" onClick="swapImage(image1,'images/image1.jpg')" />
    But it dosn't work.
    I need a generic script to be used easily in a page with a large number of images... and as u can see I don't know JS so much

    Thanks for any hint...
    Last edited by happyandrea; 02-05-2009 at 12:33 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Search Google for javascript rollover which will bring up lots of scripts.


    Quizmaster: What "R" was Hilary Clinton's maiden name?
    Contestant: Er, um . .. is it Rottweiler?

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Already tried, but i cannot find what i'm looking for

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Here you go:
    Code:
    function swapImage(nomeid, newImage) { 
    if(document.getElementById(nomeid).getAttribute('src') == newImage) { 
    document.getElementById(nomeid).src = "images/"+nomeid+"_big.jpg"; 
    }else{ 
    document.getElementById(nomeid).src = newImage; 
    } 
    }
    And your IMG tag:
    Code:
    <img id="image1" src="images/image1.jpg" onClick="swapImage('image1','images/image1.jpg')" />

  • Users who have thanked freedom_razor for this post:

    happyandrea (02-05-2009)

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It's perfect... thanks a lot man!

    So was the "getAttribute('src')" missing... I'll go study some JS

  • #6
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Well, there were few errors there, you can compare codes and see them [too many '' ]. And this document.getElementById('nomeid').src == newImage wasn't working, because left side returns full path to image, and you were comparing it to relative path, so it was never the same.


  •  

    Tags for this Thread

    Posting Permissions

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