/    Sign up×
Community /Pin to ProfileBookmark

onclick fadeout all other buttons

Copy linkTweet thisAlerts:
Jun 30.2007

So I’m trying to make this page so when you click on one of the fading rollover links, whichever else is ‘on’ is turned off, and the one that was clicked on, is turned on.

This is what I have so far:

[code=html]<HTML>
<HEAD>
<TITLE>Test</TITLE>
<!– (* Another free JavaScript © from JavaScript-FX.com *) –>
<SCRIPT LANGUAGE=”javascript” TYPE=”text/javascript” SRC=”http://www.sheaallen.com/imgfade.js”></SCRIPT>
</HEAD>
<BODY bgcolor=”black”> <center>
<table width=”720″ height=”36″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”120″ height=”36″ align=”center” valign=”bottom”><img src=”images/1_home_on.gif” width=”120″ height=”36″></td>
<td background=”images/2_projects_off.gif” width=”120″ height=”36″ align=”center” valign=”bottom”><A HREF=”#” onMouseOver=”JSFX.fadeIn(‘projects2’)” onMouseOut=”JSFX.fadeOut(‘projects2’)”><img name=”projects2″ src=”images/2_projects_on.gif” width=”120″ height=”36″ border=”0″ class=”imgFader”></A></td>
<td background=”images/3_portfolio_off.gif” width=”120″ height=”36″ align=”center” valign=”bottom”><A HREF=”#” onMouseOver=”JSFX.fadeIn(‘portfolio2’)” onMouseOut=”JSFX.fadeOut(‘portfolio2’)”><img name=”portfolio2″ src=”images/3_portfolio_on.gif” width=”120″ height=”36″ border=”0″ class=”imgFader”></A></td>
<td background=”images/4_services_off.gif” width=”120″ height=”36″ align=”center” valign=”bottom”><A HREF=”#” onMouseOver=”JSFX.fadeIn(‘services2’)” onMouseOut=”JSFX.fadeOut(‘services2’)”><img name=”services2″ src=”images/4_services_on.gif” width=”120″ height=”36″ border=”0″ class=”imgFader”></A></td>
<td background=”images/5_login_off.gif” width=”120″ height=”36″ align=”center” valign=”bottom”><A HREF=”#” onMouseOver=”JSFX.fadeIn(‘login2’)” onMouseOut=”JSFX.fadeOut(‘login2’)”><img name=”login2″ src=”images/5_login_on.gif” width=”120″ height=”36″ border=”0″ class=”imgFader”></A></td>
<td background=”images/6_contact_off.gif” width=”120″ height=”36″ align=”center” valign=”bottom”><A HREF=”#” onMouseOver=”JSFX.fadeIn(‘contact2’)” onMouseOut=”JSFX.fadeOut(‘contact2’)”><img name=”contact2″ src=”images/6_contact_on.gif” width=”120″ height=”36″ border=”0″ class=”imgFader”></A></td>
</tr>
</table>
</center>
</BODY>
</HTML>
[/code]

the fading js is here:

[CODE]
/****** User may alter these to change the fade effect ********/
var FadeInStep = 20;
var FadeOutStep = 20;
/****** Don’t alter anything else **************/
document.write(‘<STYLE TYPE=”text/css”>.imgFader{ position:relative; filter:alpha(opacity=0); -moz-opacity:0.0 }</STYLE>’);

if(!window.JSFX)
JSFX=new Object();

JSFX.RolloverObjects=new Array();

JSFX.Rollover = function(name, img)
{
JSFX.RolloverObjects[name]=new Image();
JSFX.RolloverObjects[name].img_src = img;
if(!JSFX.Rollover.postLoad)
JSFX.RolloverObjects[name].src = img;
}
JSFX.Rollover.postLoad = false;
JSFX.Rollover.loadImages = function()
{
var i;
for(i in JSFX.RolloverObjects)
{
r=JSFX.RolloverObjects[i];
r.src=r.img_src;
}
}
JSFX.Rollover.error = function(n)
{
alert(“JSFX.Rollover – An Error has been detectedn”
+ “———————————-n”
+ “You must define a JSFX.Rollover in your documentn”
+ “JSFX.Rollover(“”+n+””,”your_on_img.gif”)n”
+ “(check the spelling of your JSFX.Rollovers)”);
}

JSFX.getImg = function(n, d)
{
var img = d.images[n];
if(!img && d.layers)
for(var i=0 ; !img && i<d.layers.length ; i++)
img=JSFX.getImg(n,d.layers[i].document);
return img;
}

JSFX.findImg = function(n, d)
{
var img = JSFX.getImg(n, d);

/*** Stop emails because the image was named incorrectly ***/
if(!img)
{
alert(“JSFX.findImg – An Error has been detectedn”
+ “———————————-n”
+ “You must define an image in your documentn”
+ “<IMG SRC=”your_image.ext” NAME=””+n+””>n”
+ “(check the NAME= attribute of your images)”);

return(new Image());
}
return img;
}

JSFX.ImageFadeRunning=false;
JSFX.ImageFadeInterval=30;

JSFX.imgFadeIn = function(img, imgSrc)
{
if(img)
{
if(img.state == null)
{
img.state = “OFF”;
img.index = 0;
img.next_on = null;
}

if(img.state == “OFF”)
{
/*** Vers 1.7 only load the ON image once ever ***/
if(img.src.indexOf(imgSrc) == -1)
img.src=imgSrc;

img.currSrc = imgSrc;
img.state = “FADE_IN”;
JSFX.startFading();
}
else if( img.state == “FADE_IN_OUT”
|| img.state == “FADE_OUT_IN”
|| img.state == “FADE_OUT”)
{
if(img.currSrc == imgSrc)
img.state = “FADE_IN”;
else
{

img.next_on = imgSrc;
img.state=”FADE_OUT_IN”;
}
}
}
}

JSFX.imgFadeOut = function(img)
{
if(img)
{
if(img.state==”ON”)
{
img.state=”FADE_OUT”;
JSFX.startFading();
}
else if(img.state == “FADE_IN”)
{
img.state=”FADE_IN_OUT”;
}
else if(img.state==”FADE_OUT_IN”)
{
img.next_on == null;
img.state = “FADE_OUT”;
}
}
}

JSFX.startFading = function()
{
if(!JSFX.ImageFadeRunning)
JSFX.ImageFadeAnimation();
}

JSFX.ImageFadeAnimation = function()
{
JSFX.ImageFadeRunning = false;
for(i=0 ; i<document.images.length ; i++)
{
var img = document.images[i];
if(img.state)
{
if(img.state == “FADE_IN”)
{
img.index+=FadeInStep;

if(img.index > 100)
img.index = 100;

if(img.filters)
img.filters.alpha.opacity = img.index;
else
img.style.MozOpacity = img.index/101;

if(img.index == 100)
img.state=”ON”;
else
JSFX.ImageFadeRunning = true;
}
else if(img.state == “FADE_IN_OUT”)
{
img.index+=FadeInStep;
if(img.index > 100)
img.index = 100;

if(img.filters)
img.filters.alpha.opacity = img.index;
else
img.style.MozOpacity = img.index/101;

if(img.index == 100)
img.state=”FADE_OUT”;

JSFX.ImageFadeRunning = true;
}
else if(img.state == “FADE_OUT”)
{
img.index-=FadeOutStep;
if(img.index < 0)
img.index = 0;

if(img.filters)
img.filters.alpha.opacity = img.index;
else
img.style.MozOpacity = img.index/101;

if(img.index == 0)
img.state=”OFF”;
else
JSFX.ImageFadeRunning = true;
}
else if(img.state == “FADE_OUT_IN”)
{
img.index-=FadeOutStep;
if(img.index < 0)
img.index = 0;

if(img.filters)
img.filters.alpha.opacity = img.index;
else
img.style.MozOpacity = img.index/101;

if(img.index == 0)
{
img.src = img.next_on;
img.currSrc = img.next_on;
img.state=”FADE_IN”;
}
JSFX.ImageFadeRunning = true;
}
}
}
/*** Check to see if we need to animate any more frames. ***/
if(JSFX.ImageFadeRunning)
setTimeout(“JSFX.ImageFadeAnimation()”, JSFX.ImageFadeInterval);
}

JSFX.hasOpacity = function(obj)
{
if(document.layers)
return false;

if(window.opera)
return false;

if(navigator.userAgent.toLowerCase().indexOf(“mac”) != -1)
return false;

return true;
}

JSFX.fadeIn = function(imgName, rollName)
{
if(rollName == null)
rollName=imgName;

/*** Stop emails because the rollover was named incorrectly ***/
if(!JSFX.RolloverObjects[rollName])
{
JSFX.Rollover.error(rollName);
return;
}

var img = JSFX.findImg(imgName, document);
if(JSFX.hasOpacity(img))
JSFX.imgFadeIn(img, JSFX.RolloverObjects[rollName].img_src);
else
{
if(img.offSrc==null)
img.offSrc=img.src;
img.src=JSFX.RolloverObjects[rollName].img_src;
}
}
JSFX.fadeOut = function(imgName)
{
var img = JSFX.findImg(imgName, document);
if(JSFX.hasOpacity(img))
JSFX.imgFadeOut(img);
else
img.src=img.offSrc;
}

JSFX.imgOn = function(imgName, rollName)
{
if(rollName == null)
rollName=imgName;

/*** Stop emails because the rollover was named incorrectly ***/
if(!JSFX.RolloverObjects[rollName])
{
JSFX.Rollover.error(rollName);
return;
}
var img = JSFX.findImg(imgName,document);
if(img.offSrc==null)
img.offSrc=img.src;
img.src=JSFX.RolloverObjects[rollName].img_src;
}
JSFX.imgOff = function(imgName)
{
var img = JSFX.findImg(imgName,document);
img.src=img.offSrc;
}

JSFX.Rollover(“home2”, “images/1_home_on.gif”);
JSFX.Rollover(“projects2”, “images/2_projects_on.gif”);
JSFX.Rollover(“portfolio2”, “images/3_portfolio_on.gif”);
JSFX.Rollover(“services2”, “images/4_services_on.gif”);
JSFX.Rollover(“login2”, “images/5_login_on.gif”);
JSFX.Rollover(“contact2”, “images/6_contact_on.gif”);[/CODE]

Thanks so much for your time!

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @SaveSheep spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...