View Full Version : Making images load with OnClick

01-20-2012, 03:40 AM
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:

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:

<SCRIPT type="text/javascript">
function pic1() {
function pic2() {
function pic3() {

<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).

01-20-2012, 05:19 AM

01-20-2012, 05:48 AM
I don't understand the last post, but see if this works for you...

<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
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';

<style type="text/css">
#pic { display:none; }

<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="">

Substitute your own 'baseURL' and filenames in the 'imgList' array.