...

View Full Version : Radio-Like Nav buttons



fuzzy1
05-03-2006, 02:02 AM
I have a vertical NavBar with image buttons (courtesy of front page) comprised of 3 images each. (20 buttons = 60 images)
Image_1 - Default
Image_2 - onMouseover
Image_3 - onMousedown

but I would like very much for these buttons to behave like radio buttons.
I like the onMouseover, but would like the onMousedown (Image_3) to remain
untill another button is selected.

Anyone? Please.

vwphillips
05-03-2006, 09:47 AM
<html>
<title></title>
<head></head>
<script>

function SwapOver(obj,img,grp){
if (!window[grp]){ window[grp]=[]; }
if (!obj.out){ obj.out=obj.src; obj.over=img; window[grp].push(obj); }
obj.src=obj.over;
}

function SwapDown(obj,img,grp){
obj.src=img;
for (var zxc0=0;zxc0<window[grp].length;zxc0++){
if (window[grp][zxc0]!=obj){
window[grp][zxc0].src=window[grp][zxc0].out;
}
}
}

</script>
<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onmouseover="SwapOver(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Grp1');"
onmousedown="SwapDown(this,'http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Grp1');"
>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onmouseover="SwapOver(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Grp1');"
onmousedown="SwapDown(this,'http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Grp1');"
>
</body>
</html>

or


<html>
<title></title>
<head></head>
<script>

function SwapOver(obj,img,grp){
if (!window[grp]){ window[grp]=[]; }
if (!obj.out){ obj.out=obj.src; obj.over=img; window[grp].push(obj); }
if (obj.src==obj.out){
obj.src=obj.over;
}
}

function SwapDown(obj,img,grp){
obj.src=img;
for (var zxc0=0;zxc0<window[grp].length;zxc0++){
if (window[grp][zxc0]!=obj){
window[grp][zxc0].src=window[grp][zxc0].out;
}
}
}

</script>
<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onmouseover="SwapOver(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Grp1');"
onmousedown="SwapDown(this,'http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Grp1');"
>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onmouseover="SwapOver(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Grp1');"
onmousedown="SwapDown(this,'http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Grp1');"
>
</body>
</html>

OR



<html>
<title></title>
<head></head>
<script>

function SwapOver(obj,img,grp){
if (!window[grp]){ window[grp]=[]; }
if (!obj.out){ obj.out=obj.src; obj.over=img; window[grp].push(obj); }
if (obj.src==obj.out){
obj.src=obj.over;
obj.down=false;
}
}

function SwapDown(obj,img,grp){
obj.src=img;
obj.down=true;
for (var zxc0=0;zxc0<window[grp].length;zxc0++){
if (window[grp][zxc0]!=obj){
window[grp][zxc0].src=window[grp][zxc0].out;
}
}
}

function SwapOut(obj){
if (!obj.over||!obj.out||obj.down){ return; }
obj.src=obj.out;
}

</script>
<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onmouseover="SwapOver(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Grp1');"
onmousedown="SwapDown(this,'http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Grp1');"
onmouseout="SwapOut(this);"
>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onmouseover="SwapOver(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Grp1');"
onmousedown="SwapDown(this,'http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Grp1');"
onmouseout="SwapOut(this);"
>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum