SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Image Swap

    Hi,
    I'm new to Javascript and just trying to create a simple in-line image swap. Here is my code:
    Code:
    <SCRIPT LANGUAGE=JavaScript>
    function swapImage() {
    var image = document.getElementById("wordsearch")
    image.src = "images/fall2011-wordsearchans.gif"
    }
    </SCRIPT>
    
    <img id="wordsearch" src="images/fall2011-wordsearch.gif" onclick="swapImage();" border="0" />
    You can view the implementation here:
    http://www.klingstedtbrothers.com/word-search

    The page displays but the image does not swap. Any ideas? I'm sure it's something simple.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I got it working using totally different code. This code also allows the image to switch back to the original with a second click.
    Code:
    <script language="JavaScript" type="text/JavaScript">
    var q=0;
    function swapImage(){
    if(q==0){
    document.getElementById("wordsearch").setAttribute('src','images/fall2011-wordsearchans.gif');
    q++;
    }
    else{
    document.getElementById("wordsearch").setAttribute('src','images/fall2011-wordsearch.gif');
    q--;
    }
    }
    </script>
    
    <img id="wordsearch" src="images/fall2011-wordsearch.gif" onclick="swapImage();" border="0" />

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello KlingstedtBros - just wanted to thank you for posting the thread above - REALLY nice and simple (like the title says) function. Thank you for sharing your knowledge.


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
  •