PDA

View Full Version : one button swaps multiple others and Back, pls help

Grey3
07-23-2003, 06:43 PM
I know there are several image swapping threads here, read them all but wasn't able to fit one of those to my needs...here's what I want:
I have a button that, when clicked, changes various other buttons on the same page without changing itself. So far so good...when clicked again the button should change the other images back to their original state.

Would be great if anybody could help me, here's what I got so far (probably a real mess as I'm almost completely new to js):

______________________________________________

<HTML>
<HEAD><TITLE>MouseOver here - RollOver There</TITLE>
</HEAD>

<SCRIPT LANGUAGE="Javascript">

<!--//

browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
var clicked=0;

if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }


// the functions below are changeable to the number of images you want to
// control with one MouseOver.

function msover(img1,ref1,img2,ref2,img3,ref3) {
if (roll == 'true') {
document.images[img1].src = ref1;
document.images[img2].src = ref2;
document.images[img3].src = ref3;
var clicked=1
}
}
function msout(img1,ref1,img2,ref2,img3,ref3) {
if (roll == 'true') {
document.images[img1].src = ref1;
document.images[img2].src = ref2;
document.images[img3].src = ref3;
}
}

// Preloading images

if (roll=='true')
{
a1=new Image(50,50);a1.src="rcc1-on.gif";
a2=new Image(50,50);a2.src="rcc2-on.gif";
a3=new Image(50,50);a3.src="rcc3-on.gif";
a4=new Image(50,50);a4.src="rcc1-off.gif";
a5=new Image(50,50);a5.src="rcc2-off.gif";
a6=new Image(50,50);a6.src="rcc3-off.gif";
}


//-->

</SCRIPT>

<CENTER>
<TABLE>
<TR>

<TD><IMG NAME="ref1" WIDTH=50 HEIGHT=50 SRC="rcc1-off.gif"></TD>

<TD> </TD>

<TD><IMG NAME="ref2" WIDTH=50 HEIGHT=50 SRC="rcc2-off.gif"></TD>

<TD> </TD>

<TD><IMG NAME="ref3" WIDTH=50 HEIGHT=50 SRC="rcc3-off.gif"></TD>

</TR>
<TR><TD> <BR> </TD></TR>

<TR>
<TD COLSPAN=5>
<CENTER>

<A HREF="#"
if (clicked == 0)
{
onClick="msover('ref1','rcc1-on.gif','ref2','rcc2-on.gif','ref3','rcc3-on.gif');"
var clicked =1;
return true;
}
else
{
onClick="msout('ref1','rcc1-off.gif','ref2','rcc2-off.gif','ref3','rcc3-off.gif');"
var clicked =0;
return false;
}
}>

Put your thingie here

</A>
</CENTER>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
cheesebagpipe
07-23-2003, 08:57 PM
See if this is close:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<base href="http://www.codingforums.com/images/">
<style type="text/css">

img {cursor: pointer;}

</style>
<script type="text/javascript" language="javascript">

//preloader //////////////////////////////////////////////////////

var preloadURLs = new Array('buddy.gif'); //undisplayed image urls
var preloadObjs = new Array(preloadURLs.length);
for (var i=0; i<preloadURLs.length; ++i) {
preloadObjs[i] = new Image();
preloadObjs[i].src = preloadURLs[i];
}

//////////////////////////////////////////////////////////////////

function toggle() {
for (var el, i=0; i<arguments.length; ++i) {
el = document.getElementById(arguments[i]);
if (el)
el.src = (el.src == el.origsrc) ? el.altsrc : el.origsrc;
}
}

function set(oImg, altsrc) {
if (oImg.isset) return;
oImg.origsrc = oImg.src;
oImg.altsrc = altsrc;
oImg.isset = true;
}

</script>
</head>
<body>
<hr />
<img id="newthread" src="newthread.gif" onclick="return toggle('edit','profile','find')">
-----------------------------&amp;gt;

<!-- image id, etc. plus: onload="set(this,'alternative URL')" -->

<img id="edit" src="edit.gif" onload="set(this,'buddy.gif')">
<img id="profile" src="profile.gif" onload="set(this,'buddy.gif')">
<img id="find" src="find.gif" onload="set(this,'buddy.gif')">
<hr />
<img id="reply" src="reply.gif" onclick="return toggle('quote','sendpm')">
------------------------------&amp;gt;
<img id="quote" src="quote.gif" onload="set(this,'buddy.gif')">
<img id="sendpm" src="sendpm.gif" onload="set(this,'buddy.gif')">
<hr />
</body>
</html>
Grey3
07-24-2003, 11:23 PM
perfect :) thanks a lot cheesebagpipe, made my day I guess :)...gotta study this now...thanks.