...

View Full Version : switching image with by clicking radio buttons



lionpix90
07-01-2011, 01:32 AM
Hi,

I looked around to see javascript codes on websites but had no luck in finding what I wanted... or I just don't know how to work with it :confused:

I want to switch/replace image with other images by clicking on radio buttons. i have the html, but how can I make this work???

can anyone help me out?


<body>
<p><img name="main" src="black.jpg" width="100" height="100" alt=""></p>
<p>
<input type="radio" name="red" id="radio" value="radio" onClick="display red in main image">
</p>
<p>
<input type="radio" name="blue" id="radio2" value="radio" onClick="display blue in main image">
</p>
<p>
<input type="radio" name="green" id="radio3" value="radio" onClick="display green in main image">
</p>
<p>
<input type="radio" name="yellow" id="radio4" value="radio" onClick="display yellow in main image">
</p>
<p>
<input type="radio" name="black" id="radio5" value="radio" onClick="this would this play the main image 'black'.jpg">
</p>
</body>

thanks for any help in advance! :)

jmrker
07-01-2011, 02:54 AM
Modified from an earlier post: http://www.codingforums.com/showthread.php?t=230829


<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>

<script type="text/javascript">

var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
var picFiles = [
'11.jpg','12.jpg','13.jpg','14.jpg','15.jpg']; // can be expanded with more images

var imgPtr = 0;

// Create function to load image
function loadImg(ptr){
document.getElementById('imgSrc').src = baseURL+picFiles[ptr];
}

// Create link function to switch image backward
function prev() {
if (imgPtr < 1) { imgPtr = 0; } else { imgPtr--; }
loadImg(imgPtr);
}

// Create link function to switch image forward
function next(){
if (imgPtr >= (picFiles.length-1)) { imgPtr = picFiles.length-1; } else { imgPtr++; }
loadImg(imgPtr);
}

// Load function after page loads
onload = function() { loadImg(0); }

</script>
</head>
<body>

<input type="radio" onclick="loadImg(0)"> 1
<input type="radio" onclick="loadImg(1)"> 2
<input type="radio" onclick="loadImg(2)"> 3
<input type="radio" onclick="loadImg(3)"> 4
<input type="radio" onclick="loadImg(4)"> 5
<p>

<img name="imgSrc" id="imgSrc">

<p>
<a href="javascript:void(0)" onClick="prev();">older</a>
&nbsp;
<a href="javascript:void(0)" onClick="next();">newer</a>

</body>
</html>

Maybe not what you want, but it might be a start to keepin' on keepin' on.

bullant
07-01-2011, 04:05 AM
maybe use this demo as a guide


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
var picpaths = ['num1.jpg','num2.jpg','num3.jpg','num4.jpg','num5.jpg'];
//preload the images
var picO = new Array();
for(i=0; i < picpaths.length; i++){
picO[i] = new Image();
picO[i].src = picpaths[i];
}
function swapImage(picNum){
imgMainO.src = picO[picNum].src
}
window.onload=function(){
imgMainO = document.getElementById('imgMain');
swapImage(0);
var btnRadsO = document.getElementsByName('myRad');
for(i=0; i < btnRadsO.length; i++){
btnRadsO[i].num = i;
btnRadsO[i].onclick = function(){swapImage(this.num);}
}
}
</script>
</head>
<body>
<p><img id="imgMain" src="" width="100" height="100" alt=""/></p>
<p>
<input type="radio" name="myRad" value="" />
</p>
<p>
<input type="radio" name="myRad" value="" />
</p>
<p>
<input type="radio" name="myRad" value="" />
</p>
<p>
<input type="radio" name="myRad" value="" />
</p>
<p>
<input type="radio" name="myRad" value="" />
</p>
</body>
</html>

lionpix90
07-01-2011, 08:13 PM
thank you so much!!

I think they are working great!

just have to fit it in my html page now :thumbsup::thumbsup::thumbsup:

lionpix90
07-02-2011, 12:15 AM
What if I want to add another of the same thing on the same page...?

so, TWO base images and TWO groups of images

Sorry about changing my mind...:p

but can a bit of more code be added to the original one so I would have ?
(I used the code by JMRKER)




I tried doubling this code:


<script type="text/javascript">

var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
var picFiles = [
'11.jpg','12.jpg','13.jpg','14.jpg','15.jpg']; // can be expanded with more images

var imgPtr = 0;

// Create function to load image
function loadImg(ptr){
document.getElementById('imgSrc').src = baseURL+picFiles[ptr];
}

// Create link function to switch image backward
function prev() {
if (imgPtr < 1) { imgPtr = 0; } else { imgPtr--; }
loadImg(imgPtr);
}

// Create link function to switch image forward
function next(){
if (imgPtr >= (picFiles.length-1)) { imgPtr = picFiles.length-1; } else { imgPtr++; }
loadImg(imgPtr);
}

// Load function after page loads
onload = function() { loadImg(0); }

</script>

but i guess thats not the way it works...

asking for help again... thanks for any help!

jmrker
07-02-2011, 01:54 AM
One method, but 'bullant's might be better to modify for this type of duplication. I just have not tried to modify his version yet. :o


<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<style type="text/css">
.imgBlock { border:1px solid red; width:160px; float:left; text-align:center;}
</style>

<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?p=1107835#post1107835

var picFile0 = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg']; // each can be expanded with more images
var picFile1 = ['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'];
var picFile2 = ['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'];

var imgPtr = [
// [current_image,baseURL,filenames,display_image]
[0,"http://www.nova.edu/hpd/otm/pics/4fun/",'imgSrc0'],
[0,"http://www.nova.edu/hpd/otm/pics/4fun/",'imgSrc1'],
[0,"http://www.nova.edu/hpd/otm/pics/4fun/",'imgSrc2'] // No comma after last entry
];

// Create function to load image
function loadImg(imgGroup) {
var picFile = [];
var imgID = imgPtr[imgGroup][2];
switch (imgGroup) {
case '0' : picFile=[].concat(picFile0); break;
case '1' : picFile=[].concat(picFile1); break;
case '2' : picFile=[].concat(picFile2); break;
default : alert('Invalid assignment\n'+imgGroup); break;
}
var ptr = imgPtr[imgGroup][0];
if (ptr < 0) { ptr = 0; }
if (ptr > picFile.length-1) { ptr = picFile.length-1; }
document.getElementById(imgID).src = imgPtr[imgGroup][1]+picFile[ptr];
imgPtr[imgGroup][0] = ptr;
var rbtn = 'rg'+imgGroup+ptr; // alert(rbtn);
document.getElementById(rbtn).checked = true;
}

// Create link function to switch image backward
function prev(imgGroup) {
imgPtr[imgGroup][0]--;
loadImg(imgGroup);
}

// Create link function to switch image forward
function next(imgGroup){
imgPtr[imgGroup][0]++;
loadImg(imgGroup);
}

// Load function after page loads
onload = function() {
loadImg('0');
loadImg('1');
loadImg('2');
}

</script>
</head>
<body>

<div class="imgBlock">
<input type="radio" name="rg0" id="rg00" onclick="imgPtr[0][0]=0;loadImg('0')" checked>
<input type="radio" name="rg0" id="rg01" onclick="imgPtr[0][0]=1;loadImg('0')">
<input type="radio" name="rg0" id="rg02" onclick="imgPtr[0][0]=2;loadImg('0')">
<input type="radio" name="rg0" id="rg03" onclick="imgPtr[0][0]=3;loadImg('0')">
<input type="radio" name="rg0" id="rg04" onclick="imgPtr[0][0]=4;loadImg('0')">
<br>
<img name="imgSrc0" id="imgSrc0">
<br>
<a href="javascript:void(0)" onClick="prev('0');">Prev</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="javascript:void(0)" onClick="next('0');">Next</a>
</div>

<div class="imgBlock">
<input type="radio" name="rg1" id="rg10" onclick="imgPtr[1][0]=0;loadImg('1')" checked>
<input type="radio" name="rg1" id="rg11" onclick="imgPtr[1][0]=1;loadImg('1')">
<input type="radio" name="rg1" id="rg12" onclick="imgPtr[1][0]=2;loadImg('1')">
<input type="radio" name="rg1" id="rg13" onclick="imgPtr[1][0]=3;loadImg('1')">
<input type="radio" name="rg1" id="rg14" onclick="imgPtr[1][0]=4;loadImg('1')">
<br>
<img name="imgSrc1" id="imgSrc1">
<br>
<a href="javascript:void(0)" onClick="prev('1');">Prev</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp
<a href="javascript:void(0)" onClick="next('1');">Next</a>
</div>

<div class="imgBlock">
<input type="radio" name="rg2" id="rg20" onclick="imgPtr[2][0]=0;loadImg('2')" checked>
<input type="radio" name="rg2" id="rg21" onclick="imgPtr[2][0]=1;loadImg('2')">
<input type="radio" name="rg2" id="rg22" onclick="imgPtr[2][0]=2;loadImg('2')">
<input type="radio" name="rg2" id="rg23" onclick="imgPtr[2][0]=3;loadImg('2')">
<input type="radio" name="rg2" id="rg24" onclick="imgPtr[2][0]=4;loadImg('2')">
<br>
<img name="imgSrc2" id="imgSrc2">
<br>
<a href="javascript:void(0)" onClick="prev('2');">Prev</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="javascript:void(0)" onClick="next('2');">Next</a>
</div>

</body>
</html>


This is fairly easy to modify, just be aware typos can cause havoc! ;)

bullant
07-02-2011, 03:46 AM
What if I want to add another of the same thing on the same page...?


In this type of scenario I would use an OOP approach along this line which imo makes the code easier to maintain.

You can add as many slideshow pics to the slideShowPics array as you like where each row in the array contains the pics for each slideshow.

Then create the html for each slideshow wherever you like on your page. The demo uses the html in the <body>.

The window.onload creates a slideshow object for each slideshow. To each slideshow object you pass the preloaded images for that slideshow and the element id of the slideshow container.

Each slideshow has its own previous and next buttons.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
var slideShowPics = [
['num1.jpg','num2.jpg','num3.jpg','num4.jpg','num5.jpg'],
['num6.jpg','num7.jpg','num8.jpg']
];
//preload the images
var ssPicsO = new Array();
for(i=0; i < slideShowPics.length; i++){
ssPicsO[i] = new Array();
for(j=0; j < slideShowPics[i].length; j++){
ssPicsO[i][j] = new Image();
ssPicsO[i][j].src = slideShowPics[i][j];
}
}
function slideShowObj(pics,cont){
var picsA = pics;
var ssContO = document.getElementById(cont);
var imgO = ssContO.getElementsByTagName('img')[0];
var curPic = 0;
function swapImage(dirn){
curPic += dirn;
if(curPic < 0){curPic = 0;}
if(curPic > picsA.length-1){curPic = picsA.length-1;}
imgO.src = picsA[curPic].src;
}
//assign the button onclicks
var btnsO = ssContO.getElementsByTagName('button');
btnsO[0].onclick = function(){swapImage(-1);}
btnsO[1].onclick = function(){swapImage(1);}
//assign the first image
swapImage(0);
}
window.onload=function(){
var ss1 = new slideShowObj(ssPicsO[0],'ss1Cont');
var ss2 = new slideShowObj(ssPicsO[1],'ss2Cont');
}
</script>
</head>
<body>
<div id="ss1Cont">
<img src="" alt="" />
<div>
<button>Previous</button>
<button>Next</button>
</div>
</div>
<div id="ss2Cont">
<img src="" alt="" />
<div>
<button>Previous</button>
<button>Next</button>
</div>
</div>
</body>
</html>
Maintenance:

Say now you wanted to add a third slideshow to your web page.

All you have to do is:

1) add another row of pics to the slideShowPics array.

2) copy and paste the html for an existing sldieshow to another location on your web page and give the sldieshow container an id.

3) add this line, with the appropriate element id, to window.onload


var ss3 = new slideShowObj(ssPicsO[2],'ss3Cont');You don't have to touch the rest of the javascript at all.

If you want to still use radio buttons to swap the images in each slideshow, then you can create them dynamically in slideShowObj(pics,cont) by using document.createElement() in a loop from 0 to picsA.length-1. In each iteration of the loop assign a property to each radio button called, say, num and give it the value of i (the loop iteration counter). Then, also at each iteration, assign an onclick to each radio button that calls a function that accepts the current radio button object. That function then simply assigns the src of the slideshow's <img> to the image file at the element num in picsA

lionpix90
07-05-2011, 08:00 PM
thanks so much guys... you guys are just great :thumbsup:

bullant
07-06-2011, 12:14 AM
you're welcome :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum