what should do and how can i implement it. At last thanks to javascript, Who made me enable to solve this problem. May be you can write a
better code than me but here I want to show how I have implemented it.
<ul>
<li>
<label id=”label1″ for=”developer1″ onclick=”change1()”><image id=”111″src=”image1.jpg” </label>
<input id=”developer1″ style=”display:none” type=”radio” name=”developer” value=”1″ />
</li>
<li>
<label for=”developer2″ onclick=”change2()”><image id=”222″ src=”image2.jpg” </label>
<input id=”developer2″ style=”display:none” type=”radio” name=”developer” value=”2″ />
</li>
<li>
<label for=”developer3″ onclick=”change3()”><image id=”333″ src=”image3.jpg” </label>
<input id=”developer3″ style=”display:none” type=”radio” name=”developer” value=”3″ />
</li>
</ul>
Here in label i have used three images names image1, image2 and image3 respectivly. Now for each of these image i have also make a border image.
so that when a person select and images a border image should replace its orignal image. May be you can do it in different way i.e throw css, javaScript
etc.
Following is my javaScript code. Please dont worry its very easy.
<script type=”text/javascript”>
imgs1=Array(“image1.jpg”,”image1border.jpg”);
imgs2=Array(“image2.jpg”,”image2border.jpg”);
imgs3=Array(“image3.jpg”,”image3border.jpg”);
var x=0;
var y=0;
var z=0;
function change1() {
document.getElementById(“111”).src=imgs1[++x];
document.getElementById(“222”).src=imgs2[‘0’];
document.getElementById(“333”).src=imgs3[‘0’];
if (x==1) {
x=0;
}
else
x=1;
}
function change2() {
document.getElementById(“111”).src=imgs1[‘0’];
document.getElementById(“222”).src=imgs2[++y];
document.getElementById(“333”).src=imgs3[‘0’];
if (y==1) {
y=0;
}
else
y=1;
}
function change3() {
document.getElementById(“111”).src=imgs1[‘0’];
document.getElementById(“222”).src=imgs2[‘0’];
document.getElementById(“333”).src=imgs3[++z];
if (z==1) {
z=0;
}
else
z=1;
}
</script>
If you want that by default one button should be selected just change the order of image in that array and put checked in that radio button.
If you are still confuse just write your problem in comment i will try to help you.