Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Thanked 0 Times in 0 Posts

    How to make an image change when clicked

    I want the picture to change to a second image when someone clicks it. I'm using a code to choose the picture at random and i want each image to be linked to a seperate second image.... Please help

    here is my code(I have not added the real images yet because i want to get the code to work first):

    <SCRIPT LANGUAGE="JavaScript">

    <!-- Begin
    // Set up the image files to be used.
    var theImages = new Array() // do not change this
    // To add more image files, continue with the
    // pattern below, adding to the array.
    theImages[0] = 'http://freetopwallpaper.com/wp-content/gallery/puppy-pic/puppy-wallpaper-hd-19.jpg'
    theImages[1] = 'http://freetopwallpaper.com/wp-content/gallery/puppy-pic/puppy-wallpaper-hd-19.jpg'
    theImages[2] = 'http://freetopwallpaper.com/wp-content/gallery/puppy-pic/puppy-wallpaper-hd-19.jpg'
    theImages[3] = 'http://freetopwallpaper.com/wp-content/gallery/puppy-pic/puppy-wallpaper-hd-19.jpg'

    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()
    for (i = 0; i < p; i++){
    preBuffer[i] = new Image()
    preBuffer[i].src = theImages[i]
    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){
    document.write('<img src="'+theImages[whichImage]+'">');


    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    // End -->

  2. #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    London, England
    Thanked 2,699 Times in 2,675 Posts
    When posting here please help us to help you by making it easier to copy, test and debug your scripts by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar.

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9). The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

    One aspect of this is using Math.round() in your random number generator.
    var whichImage = Math.round(Math.random() * 3); // generates 0-3 but Math.round() does not give true random distribution as 1 and 2 are selected more frequently than 0 or 3.

    Another aspect is the use of the obsolete document.write().

    You will find many excellent examples of slideshows and swapping images code at http://www.vicsjavascripts.org.uk/

    "Think about how stupid the average person is, and then realize that half of them are more stupid than that!" - George Carlin
    Last edited by Philip M; 04-14-2013 at 01:26 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


Posting Permissions

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