Hi all! I need some help... I tryed the google search but in vain...so.. I have a header.htm with some rollover butons: "img_off.gif" and "img_on.gif" stuff. This page is call in a PHP page through include function. The butons work fine my question is: when I click the link loads the new page but I want that the image in my rollover (the one I just click) stays on the "img_on.gif" and not "img_off.gif" (the previous state). Is this possible through PHP without javascript or CSS? I hope I made myself clear. Thanks in advance. António
Hi António. You can try to use PHP code in header.htm file to check the current URI and show the specific menu item image with or without rollover. Code example: <?php if ( $_ENV['REQUEST_URI'] == '/page1.html' ) { echo '<img src="img_on.gif">'; } else { echo '<img src="img_on.gif" onMouseOver="mouseOverActions();" onMouseOut="mouseOutActions();">'; } ?> Code (markup): That is an example of the possible approach. Also in this case it's recommended to rename header.htm to header.php or make header.htm to be parsed by PHP.
Hi! Thanks for the fast reply! I tryed to implement your ideia and I keep getting the "normal" rollover. I mean it does not fix in the "b_home_on.jpg"... Any ideia why? I send the code below. António <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript"> <!-- 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('/images/b_home_on.jpg')"> <table width="100%" height="131" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="bottom" background="images/fundo1.jpg"><a href="/page1.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','/images/b_home_on.jpg',1)"><img src="/images/b_home_off.jpg" name="Image1" width="120" height="29" border="0"></a> <?php if ( $_ENV['REQUEST_URI'] == '/page1.php' ) { echo '<img src="images/b_home_on.jpg">'; } else { echo '<img src="images/b_home_off.jpg" onMouseOver="mouseOverActions();" onMouseOut="mouseOutActions();">'; } ?> </td> </tr> </table> <p> </p> </body> </html>
Hi António. 1. Did you create a page1.php file and checking it there? 2. Try to use the following code instead: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript"> <!-- 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_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_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/b_home_on.jpg')"> <table width="100%" height="131" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="bottom" background="images/fundo1.jpg"> <?php if ( $_ENV['REQUEST_URI'] == '/page1.php' ) { ?> <img src="/images/b_home_on.jpg" name="Image1" width="120" height="29" border="0"> <?php } else { ?> <a href="/page1.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','/images/b_home_on.jpg',1)"><img src="/images/b_home_off.jpg" name="Image1" width="120" height="29" border="0"></a> <?php } ?> </td> </tr> </table> <p> </p> </body> </html> Code (markup):
António and the other users with similar issue who might read this thread, Follow-up to the code example from reply #2. It should be better to use img_off.gif image in the "else" part: <?php if ( $_ENV['REQUEST_URI'] == '/page1.html' ) { echo '<img src="img_on.gif">'; } else { echo '<img src="img_[b]off[/b].gif" onMouseOver="mouseOverActions();" onMouseOut="mouseOutActions();">'; } ?> Code (markup):
You're really overcomplicating this. A few lines of CSS would do exactly what you need without all the Javascript and with minimal PHP.