pixeltrace Posted June 22, 2007 Share Posted June 22, 2007 hi, i need help. please check my site http://mango.resonance.com.sg/memoryworld/test/abttest.htm what i wanted to happen on the menu on the right panel is, whenever i roll over on the menu and rollout it will still go back to its original image, same with the images on the right side. then, when i move my mouse onto the images on the right, the rollover image of the button will remain in its rollover image. is this possible on html scripts or i need any javascript on this? this is my current 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=iso-8859-1" /> <title>KAPLAN SINGAPORE: Website Design Concept</title> <style type="text/css"> <!-- body { background-color: #330066; } --> </style> <script language="JavaScript" 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/menu/aboutus-over.gif','images/menu/about.jpg','images/menu/shool-over.gif','images/menu/school.jpg','images/menu/programme-over.gif','images/menu/programme.jpg','images/menu/community-over.gif','images/menu/community.jpg')"> <table width="951" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#FFFFFF"> <tr> <td width="951"><table width="951" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td width="485" valign="top"><img src="images/logo.gif" width="485" height="80" /></td> <td width="466" rowspan="2" valign="top"><table width="466" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="170"><img src="images/menu/spacer.gif" width="1" height="28" /></td> <td width="296" rowspan="12" valign="top"><img src="images/menu/about.jpg" name="abt" width="296" height="350" id="abt"></td> </tr> <tr> <td valign="top"><a href="javascript:;" onmouseover="MM_swapImage('abt','','images/menu/about.jpg',1);MM_swapImage('aboutus','','images/menu/aboutus-over.gif',1)"><img src="images/menu/aboutus.gif" name="aboutus" width="170" height="30" border="0" id="aboutus" /></a></td> </tr> <tr> <td valign="top"><a href="#" onmouseover="MM_swapImage('school','','images/menu/shool-over.gif',1);MM_swapImage('abt','','images/menu/school.jpg',1)"><img src="images/menu/school.gif" name="school" width="170" height="29" border="0" id="school" /></a></td> </tr> <tr> <td valign="top"><a href="#" onmouseover="MM_swapImage('programme','','images/menu/programme-over.gif',1);MM_swapImage('abt','','images/menu/programme.jpg',1)"><img src="images/menu/programme.gif" name="programme" width="170" height="30" border="0" id="programme" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/partner.gif" width="170" height="30" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/academic.gif" width="170" height="28" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/career.gif" width="170" height="29" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/news.gif" width="170" height="30" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/resource.gif" width="170" height="29" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="#" onmouseover="MM_swapImage('community','','images/menu/community-over.gif',1);MM_swapImage('abt','','images/menu/community.jpg',1)"><img src="images/menu/community.gif" name="community" width="170" height="29" border="0" id="community" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/contact.gif" width="170" height="28" border="0" /></a></td> </tr> <tr> <td> </td> </tr> </table></td> </tr> <tr> <td width="485" valign="top"><img src="images/main-abt.jpg" width="485" height="270" /></td> </tr> <tr> <td colspan="2" valign="top"><img src="images/search.jpg" width="950" height="304" /></td> </tr> <tr> <td colspan="2" valign="top"><img src="images/footer.jpg" width="950" height="36" vspace="10" /></td> </tr> </table></td> </tr> </table> </body> </html> hope you could help me with this. thanks! Quote Link to comment Share on other sites More sharing options...
corbin Posted June 22, 2007 Share Posted June 22, 2007 Look into onmouseover and onmouseout. I would go into detail, but this is the PHP section, and this is a pure JS question (and It's 4AM ;p). Quote Link to comment Share on other sites More sharing options...
pixeltrace Posted June 22, 2007 Author Share Posted June 22, 2007 sorry about that. i just got no place to go. and i find this forum as the most reliable forum ever. i was able to fix the mouseout already. but my problem now, i need to leave the rollover image of the buttons whenever i rollover to the big image on the right. let say, i rollver to about us the image on the right change, when i rollover to that right image i want to retain the rollover image of about us. is this possible? currently this is my 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=iso-8859-1" /> <title>KAPLAN SINGAPORE: Website Design Concept</title> <style type="text/css"> <!-- body { background-color: #330066; } --> </style> <script language="JavaScript" 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 language="JavaScript" type="text/JavaScript"> function Load() { document.getElementById("menu").selectedIndex=0; document.getElementById("abt").innerHTML = "<img src='images/menu/about.jpg' name='abt' width='296' height='350' id='abt'>"; document.getElementById("aboutus").innerHTML = "<img src='images/menu/aboutus-over.gif' name='aboutus' id='aboutus'>"; } </script> </head> <body onload="MM_preloadImages('images/menu/aboutus-over.gif','images/menu/about.jpg','images/menu/shool-over.gif','images/menu/school.jpg','images/menu/programme-over.gif','images/menu/programme.jpg','images/menu/community-over.gif','images/menu/community.jpg'), Load()"> <table width="951" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#FFFFFF"> <tr> <td width="951"><table width="951" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td width="485" valign="top"><img src="images/logo.gif" width="485" height="80" /></td> <td width="466" rowspan="2" valign="top"><table width="466" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="170"><img src="images/menu/spacer.gif" width="1" height="28" /></td> <td width="296" rowspan="12" valign="top"><img src="images/menu/about.jpg" name="abt" width="296" height="350" id="abt"></td> </tr> <tr> <td valign="top"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('abt','','images/menu/about.jpg',1);MM_swapImage('aboutus','','images/menu/aboutus-over.gif',1)"><img src="images/menu/aboutus.gif" name="aboutus" width="170" height="30" border="0" id="aboutus" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('abt','','images/menu/school.jpg',1);MM_swapImage('school','','images/menu/shool-over.gif',1)"><img src="images/menu/school.gif" name="school" width="170" height="29" border="0" id="school" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('abt','','images/menu/programme.jpg',1);MM_swapImage('programme','','images/menu/programme-over.gif',1)"><img src="images/menu/programme.gif" name="programme" width="170" height="30" border="0" id="programme" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/partner.gif" width="170" height="30" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/academic.gif" width="170" height="28" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/career.gif" width="170" height="29" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/news.gif" width="170" height="30" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/resource.gif" width="170" height="29" border="0" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('abt','','images/menu/community.jpg',1);MM_swapImage('community','','images/menu/community-over.gif',1)"><img src="images/menu/community.gif" name="community" width="170" height="29" border="0" id="community" /></a></td> </tr> <tr> <td valign="top"><a href="javascript:;"><img src="images/menu/contact.gif" width="170" height="28" border="0" /></a></td> </tr> <tr> <td> </td> </tr> </table></td> </tr> <tr> <td width="485" valign="top"><img src="images/main-abt.jpg" width="485" height="270" /></td> </tr> <tr> <td colspan="2" valign="top"><img src="images/search.jpg" width="950" height="304" /></td> </tr> <tr> <td colspan="2" valign="top"><img src="images/footer.jpg" width="950" height="36" vspace="10" /></td> </tr> </table></td> </tr> </table> </body> </html> thanks! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.