Making images load with OnClick

FlashDancer

01-20-2012, 02: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:
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:

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

SeattleMicah

01-20-2012, 04:19 AM

.....

jmrker

01-20-2012, 04:48 AM

I don't understand the last post, but see if this works for you...

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