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 3 of 3
  1. #1
    Banned
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Making images load with OnClick

    I have an image gallery with about 10 images. Its a very simple image gallery, basically you have "A" "B" "C" "D" etc, and for each letter you click on, JavaScript changes the relative image from hidden to block.

    The problem I have is that all of the 10 images load in the background, despite the user not clicking on the corresponding letter, which wastes a ton of bandwidth.

    I have isolated and placed the image gallery code into a HTML file and included 3 pics so you can see it working:
    http://www.maxsurl.com/link.php?ref=rk925Lzd48

    I don't know much about JavaScript, but I hope this code I just made up gives you can idea of what I am trying to achieve:

    Code:
    <SCRIPT type="text/javascript">
    	function pic1() {
    		load.pic('src="pic1.png"')
    	}
    	function pic2() {
    		load.pic('src="pic2.png"')
    	}
    	function pic3() {
    		load.pic('src="pic3.png"')
    	}
    </SCRIPT>
    
    <SPAN onclick="return pic1()">PIC 1</SPAN>
    <SPAN onclick="return pic2()">PIC 2</SPAN>
    <SPAN onclick="return pic2()">PIC 3</SPAN>
    
    <IMG id="pic">
    Does anyone have a suggestion on how I could achieve what I would like to do? If so, could you please show me a basic example of code so I can make sense of it (I am a visual learner).

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    .....
    Last edited by SeattleMicah; 01-20-2012 at 05:27 AM.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb

    I don't understand the last post, but see if this works for you...
    Code:
    <html>
    <head>
    <title> Untitled </title>
    
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=249305
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [ '', // zero element is not used
        '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',
        '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
    ];
    function controlImg(info) {
      if (info == 0) { document.getElementById('pic').style.display = 'none'; }
                else { document.getElementById('pic').src = baseURL+imgList[info];
                       document.getElementById('pic').style.display = 'block'; 
                     }
    }
    </script>
    
    <style type="text/css">
    #pic { display:none; }
    </style>
    
    </head>
    <body>
     <label><input type="radio" name="imgControl" onclick="controlImg('0')"> None <label><br>
     <label><input type="radio" name="imgControl" onclick="controlImg('1')"> A<label>
     <label><input type="radio" name="imgControl" onclick="controlImg('2')"> B<label>
     <label><input type="radio" name="imgControl" onclick="controlImg('3')"> C<label>
     <label><input type="radio" name="imgControl" onclick="controlImg('4')"> D<label>
     <label><input type="radio" name="imgControl" onclick="controlImg('5')"> E <label><br>
     <label><input type="radio" name="imgControl" onclick="controlImg('6')"> F<label>
     <label><input type="radio" name="imgControl" onclick="controlImg('7')"> G<label>
     <label><input type="radio" name="imgControl" onclick="controlImg('8')"> H<label>
     <label><input type="radio" name="imgControl" onclick="controlImg('9')"> I<label>
     <label><input type="radio" name="imgControl" onclick="controlImg('10')"> J <label><p>
     <img id="pic" src="">
    </body>
    </html>
    Substitute your own 'baseURL' and filenames in the 'imgList' array.


  •  

    Posting Permissions

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