I already have my javascript in place to replace one div for the other, I just want to know how to place a fade in/fade out transition when one div is replaced with the other. To give you a better idea of what I am trying to accomplish, the user has 3 options when the page opens. They can click either the marketing, legacy or wedding links which then brings them to the corresponding div which asks them if they want samples of work or if they would like to contact us. As I have said, it works perfectly, I would just like the divs to fadeIn/FadeOut when the first links are clicked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Legacy Media Calgary Service - Blooper Reel</title>
<link href="css/chooseyourproject.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type = "text/javascript">
function changeDiv(i){
if(i==1) {
document.getElementById("questions").style.display="none";
document.getElementById("LegacyQuestions").style.display="block";
} else if (i==2) {
document.getElementById("questions").style.display="none";
document.getElementById("MarketingQuestions").style.display="block";
} else if (i==3) {
document.getElementById("questions").style.display="none";
document.getElementById("WeddingQuestions").style.display="block";
}
}
</script>
</head>
<body onload="MM_preloadImages('images/first_legacy_on.png','images/first_marketing_on.png','images/first_weddings_on.png','images/First_samples_on.png','images/first_contactUs_on.png')">
<div id="body">
<div id="topspace"></div>
<div id="title"></div>
<div id="questions">
<div id="whatWouldYouMake"></div>
<div id="linkspace">
<div id="leftlinks"></div>
<div id="legacyLink"><a href="#" onclick="changeDiv(1)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Legacy','','images/first_legacy_on.png',1)"><img src="images/first_legacy_off.png" width="174" height="80" id="Legacy" /></a></div>
<div id="marketinglink"><a href="#" onclick="changeDiv(2)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Marketing Link','','images/first_marketing_on.png',1)"><img src="images/first_marketing_off.png" width="218" height="80" id="Marketing Link" /></a></div>
<div id="weddinglink"><a href="#" onclick="changeDiv(3)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/first_weddings_on.png',1)"><img src="images/first_weddings_off.png" width="222" height="80" id="Image3" /></a></div>
<div id="rightLinks"></div>
<div id="linkfooter"></div>
</div>
<div id="underLinks"></div>
</div>
<div id="LegacyQuestions">
<div id="WouldYouLike"></div>
<div id="secondLinkSpace">
<div id="secondLeftSpace"></div>
<div id="secondSamplesLink"><a href="www.legacymediacalgary.com/legacyprojects.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LegacyProjects','','images/First_samples_on.png',1)"><img src="images/First_samples_off.png" width="238" height="82" id="LegacyProjects" /></a></div>
<div id="secondContactUs"><a href="www.legacymediacalgary.com/legacycontact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Legacy Contact Us','','images/first_contactUs_on.png',1)"><img src="images/first_contactUs_off.png" width="268" height="82" id="Legacy Contact Us" /></a></div>
<div id="secondrightSpace"></div>
<div id="secondLinkFooter"></div>
</div>
</div>
<div id="MarketingQuestions">
<div id="WouldYouLike"></div>
<div id="secondLinkSpace">
<div id="secondLeftSpace"></div>
<div id="secondSamplesLink"><a href="www.legacymediacalgary.com/marketingprojects.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Marketing Projects Link','','images/First_samples_on.png',1)"><img src="images/First_samples_off.png" width="238" height="82" id="Marketing Projects Link" /></a></div>
<div id="secondContactUs"><a href="www.legacymediacalgary.com/marketingcontact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Marketing Contact Us','','images/first_contactUs_on.png',1)"><img src="images/first_contactUs_off.png" width="268" height="82" id="Marketing Contact Us" /></a></div>
<div id="secondrightSpace"></div>
<div id="secondLinkFooter"></div>
</div>
</div>
<div id="WeddingQuestions">
<div id="WouldYouLike"></div>
<div id="secondLinkSpace">
<div id="secondLeftSpace"></div>
<div id="secondSamplesLink"><a href="www.legacymediacalgary.com/weddingprojects.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WeddingProjects','','images/First_samples_on.png',1)"><img src="images/First_samples_off.png" width="238" height="82" id="WeddingProjects" /></a></div>
<div id="secondContactUs"><a href="www.legacymediacalgary.com/weddingcontact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wedding Contact Us','','images/first_contactUs_on.png',1)"><img src="images/first_contactUs_off.png" width="268" height="82" id="Wedding Contact Us" /></a></div>
<div id="secondrightSpace"></div>
<div id="secondLinkFooter"></div>
</div>
</div>
</div>
</body>
</html>