Hi,
I hope someone will be able to help me, this is my first time using this website.
If you have a look at the site (link below), you can see 8 links on the left handside (all roll over image effect) and a large white are with content "Welcome to...".
What I am looking to do is have the current content you see in the white box show as default but when one of the links on the left hand side are clicked for the content to change to relevent content for that subject. As from what i can gather this can be done using DIVs but im not sure how as i have never done this before. Im assuming ill have to enter the content for each link in a DIV and give each DIV an ID and when a link is clicked it shows only the DIV its linked to.
Can anyone help with a script. I don't mind if the script needs to be included on the same page or a seperate .js page that I can link to the site.
Thank you for your help. Unfortunately the code you suggested doesnt work, it shows no content in that cell. I have copied the script to my whole page below to see if you can spot any more errors.
HTML Code:
<!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>Compu Tech Midlands</title><link href="global.css" rel="stylesheet" type="text/css" /><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script><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></head><body onload="MM_preloadImages('images/links/home_hov.png','images/links/sr_hov.png','images/links/up_hov.png','images/links/cust_hov.png','images/links/net_hov.png','images/links/web_hov.png','images/links/host_hov.png','images/links/contact_hov.png')"><table align="center" width="948" border="0" cellspacing="5" cellpadding="0"><tr><td class="header" colspan="2"> </td></tr><tr><td class="flash" align="center" valign="middle" colspan="2"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','938','height','150','src','main','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','main' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="938" height="150"><param name="movie" value="main.swf" /><param name="quality" value="high" /><embed src="main.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="938" height="150"></embed></object></noscript></td></tr><tr><td width="173" valign="top" align="center"><table width="173" border="0" cellspacing="0" cellpadding="0"><tr><td class="links" align="center" valign="middle"><div id="menu_area"><table width="163" border="0" cellspacing="0" cellpadding="0"><tr><td><a onclick="display_area('default_content')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/links/home_hov.png',1)"><img src="images/links/home.png" name="home" width="163" height="23" border="0" id="home" /></a></td></tr><tr><td><a onclick="display_area('content_2')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sr','','images/links/sr_hov.png',1)"><img src="images/links/sr.png" name="sr" width="163" height="23" border="0" id="sr" /></a></td></tr><tr><td><a onclick="display_area('content_3')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('up','','images/links/up_hov.png',1)"><img src="images/links/up.png" name="up" width="163" height="23" border="0" id="up" /></a></td></tr><tr><td><a onclick="display_area('content_4')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cust','','images/links/cust_hov.png',1)"><img src="images/links/cust.png" name="cust" width="163" height="23" border="0" id="cust" /></a></td></tr><tr><td><a onclick="display_area('content_5')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('net','','images/links/net_hov.png',1)"><img src="images/links/net.png" name="net" width="163" height="23" border="0" id="net" /></a></td></tr><tr><td><a onclick="display_area('content_6')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('web','','images/links/web_hov.png',1)"><img src="images/links/web.png" name="web" width="163" height="23" border="0" id="web" /></a></td></tr><tr><td><a onclick="display_area('content_7')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('host','','images/links/host_hov.png',1)"><img src="images/links/host.png" name="host" border="0" id="host" /></a></td></tr><tr><td><a onclick="display_area('content_8')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/links/contact_hov.png',1)"><img src="images/links/contact.png" name="contact" width="163" height="23" border="0" id="contact" /></a></td></tr></table></div></td></tr></table></td><td width="770" valign="top"><table width="770" border="0" cellspacing="0" cellpadding="0"><tr><td class="main" valign="top"><div class="main"><h1><strong>Welcome to CompuTech Midlands</strong></h1><p> </p><p>We provide individuals and companies with a one stop shop approach to I.T. maintenance and website design. We look into every situation in a unique way and offer the best resolution whilst keeping in mind the need of low cost solutions for all issues from PC faults to networking.</p><p> </p><p> </p><p><strong>Experiencing a computer problem? <a href="#">Contact us here</a></strong>.</p><p> </p><p>Whether you are an individual or a business we will arrive at your home/office and aim to resolve all problems at your home/office,</p><p>We can provide you with a tailored website services to get the most from your online presence. We offer a arrange of website solutions ranging from brochure sites showcasing your companies products and services to shopping sites and existing website updates, we can help. We also offer great value hosting to compliment your website.</p><p> </p><p><strong>Looking for a website? <a href="#">Take a look at our web development packages</a></strong>.</p><p> </p></div></td></tr><tr><td class="bmain"> </td></tr></table></td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table></body></html>
Thank you again for your input and trying to help.
Thanks for trying again for me, this time it shows the content in the default_content div, but when i click on any of the links in clears the cell again and when i click on the link to show default_content div it shows clear cell. and error message comes up adving couldnt call object on the line that contains new_area.style.display="block" in the javascript.
thanks again tho.
Im goin to be a pain again but you are extremly helpful and obviously know what your doin. I am looking to add a flash banner on the site advising that the business sells and installs windows 7, How can i link it in so that the flash banner can change the content in the main cell to its related info.
I know im asking alot here and may be out of your depth, but i thought it would be worth asking. I didnt know if i'd have to creat the link within flash using action script (if so, what code would i use to link it to the main content and not affect the side links) or could i just turn the flash banner into a link using code on the actual site page.
Sorry again for being a pain, just trying ge tthis site lookin the best i can and thought I'd ask with it stil bein linked with the DIV content change.
Linear Mode
