Hi Anyone, Hope someone might be able to help me here, I have designed the following http://www.bitstorm.org.uk/home.html The three button links: About Us, Services and Contact Instead of linking to separate pages like they are at the moment I would like to keep everything on one page so I could display one flash movie where the images currently are. The buttons should instead hide and display three divs all on top of each other, containing the written content. The aim of this is to avoid using a frame to keep the flash movie in. So just to explain clearly clicking on About us would display a hidden div with the about us written content in it and hide the Services and Contact Divs. Then clicking on Services would hide the About Us and Contact Divs but show the Services Div etc. I have an external style sheet. Would anyone know how to do this as I have seen examples done with 2 divs so one is hidden while the other is shown but cannot adapt it to three? Any ideas would be much appreciated. Please note I am not using any position:absolute Thanks Bitstorm
Hi! Here I present a simple code for you. I think its enough for you to gather the idea how to do it. Directly copy the code and save it to .html file and test it. All the codes are copied from your site. <!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>Ship Shape Cleaning Co. - Commercial and Contract Cleaners</title> <meta name="description" content="Shipshape cleaning co offer a wide range of environmentally friendly services including: Domestic, office, residential and commercial cleaning; Carpet and upholstery; cleaning and sanitising; One off and spring cleans; removal of rubbish and re-cycle goods..."> <meta name="keywords" content="bristol cleaners, bristol cleaning, business cleaning, carpet cleaning, cleaners bristol, cleaners services, cleaning cleaners, cleaning company, cleaning contract, cleaning contractors, cleaning service, cleaning services, commercial cleaners, commercial cleaning, commercial cleaning business, green cleaners, green cleaning, house clean, industrial cleaning services, office cleaners, office cleaning, office cleaning services, office commercial cleaning, professional cleaning, south west cleaning, west cleaning"> <link href="test_files/cleaning.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- body { background-color: #FFFFFF; } --> </style> <script type="text/javascript"> function getpage(what){ if (what=="about") { document.all("cleaningcontent").innerHTML="<div id='col' ;='' style='float: left;'> Shipshape Cleaning Company has eight years experience in office, commercial and domestic cleaning.Regarded as one of the most competitive professional, trusted and reliable companies operating in Bristol. <p>We use environmentally friendly products wherever possible and employ a green clean approach.</p><p>Shipshape cleaning company have an excellent client retention rate because we deliver high cleaning standards 365 days of the year. </p></div><div id='space' ;='' style='float: left;'></div><div id='col' ;='' style='float: left;'>We are members of the National Trade Register and are fully insured.Find us in Yell.com and Yellow pages. We currently maintain offices and buildings in and around the Bristol area. <p>As contract cleaners Shipshape Cleaning Co staff are made aware of cleaning practices and all Health and Safety aspects regarding safe working conditions. </p> <p>Contact us for house cleans, office cleans one offs and contract work.</p> </div> "; } if (what=="contact") { document.all("cleaningcontent").innerHTML="<div id='col' ;='' style='float: left; width: 460px;'></div><div id='col' ;='' style='float: left; width: 260px;'> Please feel free to contact us for a quote: <p>Peter: 07960 460255<br>Robin: 07989 575638</p> <p>Email: <a href='mailto:shipshapeclean@yahoo.co.uk'>shipshapeclean@yahoo.co.uk</a></p></div>"; } if (what=="service") { document.all("cleaningcontent").innerHTML="<div id='col' ;='' style='float: left;'>Shipshape cleaning co offer a wide range of services including:<p> </p><li>Domestic, Office, Residential and Commercial Cleaning</li><li>Carpet and Upholstery Cleaning Sanitising, One off and Spring Cleans</li><li>Removal of rubbish and re-cycle goods</li> </div><div id='space' ;='' style='float: left;'></div><div id='col' ;='' style='float: left;'></div>"; } } <!-- 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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc; } 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[n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script></head><body onload="MM_preloadImages('serviceson.gif','contacton.gif')"> <div id="commercialcleaning"></div> <div id="bristol"> <div id="greencleaning"><img src="http://www.bitstorm.org.uk/shipshapecleaning.gif" alt="Ship Shape Cleaning Co." width="320" height="130"></div> <div id="officecleaning"><img src="http://www.bitstorm.org.uk/bristol3.jpg" alt="Bristol Cleaning Services" height="250" width="800"></div> <div id="carpetcleaning"> <div id="bristolcleaners"> <div id="shipshapemenu" ;="" style="float: left;" onclick=getpage("about")><img src="test_files/aboutuson.gif" alt="About Us" height="30" width="200"></div> <div id="shipshapemenu" ;="" style="float: left;" onclick=getpage("service")><img src="test_files/servicesoff.gif" alt="Services" id="Image1" onmouseover="MM_swapImage('Image1','','serviceson.gif',1)" onmouseout="MM_swapImgRestore()" height="30" width="200"></div> <div id="shipshapemenu2" ;="" style="float: left;" onclick=getpage("contact")><img src="test_files/contactoff.gif" alt="Contact" id="Image2" onmouseover="MM_swapImage('Image2','','contacton.gif',1)" onmouseout="MM_swapImgRestore()" height="30" width="200"></div> </div> </div> <div id="cleaningcontent"> <div id="col" ;="" style="float: left;"> Shipshape Cleaning Company has eight years experience in office, commercial and domestic cleaning. Regarded as one of the most competitive professional, trusted and reliable companies operating in Bristol. <p>We use environmentally friendly products wherever possible and employ a green clean approach. </p> <p>Shipshape cleaning company have an excellent client retention rate because we deliver high cleaning standards 365 days of the year. </p> </div><div id="space" ;="" style="float: left;"></div><div id="col" ;="" style="float: left;"> We are members of the National Trade Register and are fully insured. Find us in Yell.com and Yellow pages. We currently maintain offices and buildings in and around the Bristol area. <p>As contract cleaners Shipshape Cleaning Co staff are made aware of cleaning practices and all Health and Safety aspects regarding safe working conditions. </p> <p>Contact us for house cleans, office cleans one offs and contract work.</p> </div> </div> </div> </body></html> Hello! do not forget to reply.
thanks for that, will have to go through it and work it out. I want the page to look exactly the same but where the div containing the written content is at the bottom I want three divs on top of each other each with written content in. So one for about us, one for services and one for contact. At anyone one time two are hidden and one is visible depending on which link you choose. Anyway I'll go through your code and try and figure it out. I appreciate your help. Bitstorm
This is better done with AJAX. Also, the content is going to look horrible for someone who has javascript turned off, so, again, using AJAX will degrade better. I recommend using the jQuery library, and it's a simple case of saying $(".button").click(function(){load("somepage.html");});