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! Link to comment https://forums.phpfreaks.com/topic/56681-need-help-on-my-onmouseover/ 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). Link to comment https://forums.phpfreaks.com/topic/56681-need-help-on-my-onmouseover/#findComment-279983 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! Link to comment https://forums.phpfreaks.com/topic/56681-need-help-on-my-onmouseover/#findComment-279996 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.