PHP require & Rollover images conflict

Arty Owl · 16-Aug-2007, 07:02 PM #1

Hi, this is my first time using the forums, so my apologies if I don't include something in my explanation I should have.

I'm having a problem when using the PHP require command to call up a navigation menu of rollover images on a separate page. When I call up the menu once on a page there is no problem, but as soon as I include a second instance of the same menu (i.e. one at the top of the page and one at the bottom - to save having to scroll up to move between pages) the rollover images no longer load the second image when the mouse pointer comes into contact with them.

Note: I'm using Dreamweaver 8 mainly in design mode to code all of this for me as I know only a little about the inner workings of HTML and PHP (though enough to get by in most basic situations).

The menu page is in the same folder as the content page I'm loading it into. So I'm using:

Quote:

<?php require("page_menu.htm"); ?>

to call up the menu. This works fine if I include it only once on the page, but if included twice (with no other changes made to the code) it no longer works. I assume it's a problem with the code on the menu page itself - perhapse that part of it comes into conflict with itself if run twice? The code for the menu page is:

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>

<onLoad="MM_preloadImages('/media/page_numbers/page_numbers_1_on.jpg','/media/page_numbers/page_numbers_2_on.jpg','/media/page_numbers/page_numbers_3_on.jpg','/media/page_numbers/page_numbers_4_on.jpg','/media/page_numbers/page_numbers_5_on.jpg','/media/page_numbers/page_numbers_9_on.jpg','/media/page_numbers/page_numbers_8_on.jpg','/media/page_numbers/page_numbers_7_on.jpg','/media/page_numbers/page_numbers_6_on.jpg','/media/page_numbers/page_numbers_10_on.jpg')">
<div align="center"><img src="/media/page_numbers/page_numbers_title.jpg" width="40" height="25"><a href="sketches01.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 1','','/media/page_numbers/page_numbers_1_on.jpg',1)"><img src="/media/page_numbers/page_numbers_1_off.jpg" alt="Page 1" name="Page 1" width="25" height="25" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 2','','/media/page_numbers/page_numbers_2_on.jpg',1)"><img src="/media/page_numbers/page_numbers_2_off.jpg" alt="Page 2" name="Page 2" width="25" height="25" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 3','','/media/page_numbers/page_numbers_3_on.jpg',1)"><img src="/media/page_numbers/page_numbers_3_off.jpg" alt="Page 3" name="Page 3" width="25" height="25" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 4','','/media/page_numbers/page_numbers_4_on.jpg',1)"><img src="/media/page_numbers/page_numbers_4_off.jpg" alt="Page 4" name="Page 4" width="25" height="25" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 5','','/media/page_numbers/page_numbers_5_on.jpg',1)"><img src="/media/page_numbers/page_numbers_5_off.jpg" alt="Page 5" name="Page 5" width="25" height="25" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 6','','/media/page_numbers/page_numbers_6_on.jpg',1)"><img src="/media/page_numbers/page_numbers_6_off.jpg" alt="Page 6" name="Page 6" width="25" height="25" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 7','','/media/page_numbers/page_numbers_7_on.jpg',1)"><img src="/media/page_numbers/page_numbers_7_off.jpg" alt="Page 7" name="Page 7" width="25" height="25" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 8','','/media/page_numbers/page_numbers_8_on.jpg',1)"><img src="/media/page_numbers/page_numbers_8_off.jpg" alt="Page 8" name="Page 8" width="25" height="25" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 9','','/media/page_numbers/page_numbers_9_on.jpg',1)"><img src="/media/page_numbers/page_numbers_9_off.jpg" alt="Page 9" name="Page 9" width="25" height="25" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Page 10','','/media/page_numbers/page_numbers_10_on.jpg',1)"><img src="/media/page_numbers/page_numbers_10_off.jpg" alt="Page 10" name="Page 10" width="25" height="25" border="0"></a></div>
</html>

I wondered if the Java script was interfering with itself when run twice, but I have a different "site index" menu on the same page which uses identical Java script to run; and since the site index menu continues to work perfectly well with both the single and double inclusions of the navigation menu I presume thats not the problem. My only guess is that there is some conflict I don't know of in the workings of loading the same rollover images twice... but this now a way beyond my knowledge of HTML and PHP code.

I desperately don't want to have to create a separate copy of the navigation menu (e.g. page_menu_top.htm and page_menu_bottom.htm files that are exactly the same in content) as this would completely defeat the point for me of being able to just update one file and not having to remember to update any other instance of the same menu each time.

Any help you can provide me with, to enable to include the menu twice without the rollover images breaking, would be appreciated! Thank you

namenotfound · 08:14 PM

You have: <onLoad=".......">

But <onLoad> isn't a HTML tag.

If you want that JS to load when the body of the page loads, try this: <body onload="..."> since <body> is a valid HTML tag.

Also, the structure of the page is all unorganized. You don't define what is the head and what is the body of the document. The only structure tag you have is <html>

This is what a basic pages looks like:

<html>
<head>
<title>Title of the page</title>
(other head stuff here)
</head>
<body>
(everything you want to show up on the page here)
</body>
</html>

Arty Owl · 09:10 PM

Sorry I forgot to mention that part. Yes the <title> <head> and <body> tags are missing as I removed them from the code (bare with me). Whilst seeking help on this rollover image problem from a colleague who knows a bit more about HTML than I do, he mentioned that the problem might be that the browser is trying to interpret several inclusions of <title> <head> and <body> tags as the whole of the code from that menu page will be included when the PHP require command brings it into the main page... if that makes sense.

So I removed the tags, one of which was the "body" from <body onLoad="..."> which I was dubious about for the very reason I didn't know whether it would continue to work like that. However having done so the Java still worked fine (though again only when one copy of the menu was 'required' onto the main page), in fact nothing that was apparent changed for the better or the worse... though if you are saying that <onLoad="..."> on its own shouldn't work, I have no idea why it is continuing to do so.

Just to clarify, the long section of code I quoted in my original post was from the file I'm loading into the main page, and not the main page's code itself. The main page does obviously contain <title> <head> and <body> tags.

*edit*
Ah having said that I suspect the Java still works, not because of some freak of digital nature, but because the same Java code is being used on the main page when the site index menu is loaded through a separate 'require' command elseware on the same page. Presumably it only needs to be present once for the whole lot to work?
Either way the rollover image problem is still present.

*edit again*
Yes, just to confirm, the identical Java script present in the code pulled in from the site index menu file does in fact cause the navigation menu rollovers to work (though again only in the single usage instance).
(I went back and replaced the <head> and <body> tags in their original places and tried removing the Java script entirely from the navigation menu page. After a refresh, the instance of a single usage of the menu continues to work... as again trying to include two copies of the menu doesn't.)
Thanks for the suggestion anyway. Any other ideas?

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)