Please provide a link to your page and we'll sort out the best way of attacking the issue using CSS.
Here's a link to my homepage. The headers and footers have rollovers and need to stay that way. However, the other images on the page, which currently have rollovers, I'd like to just use the CSS "a:hover img" on. Thanks.
I suggest you first start by cleaning up the code.
There's a lot of confused, invalid code. e.g. at least 3 separate <body> tags.
Are you using Server Side Includes in the code? If so, the presence of multiple <body> tags suggest that your include files are (incorrectly) complete webpages, rather than (correctly) only containing code fragments.
Hmm, when I got through my code I only have one <body> tag. Doing a select all, copy, paste, and find in wordpad, I only find one. It's certainly possible that my header and footer have code problems as well which is why you're seeing that. I'll see what I can do about cleaning up the code. Thanks for the link.
When I browse to http://christopherdeldridge.com and View > Source in IE (incidentally, please remove that ineffective no right click script), I see:
<body bgcolor="#000000" onload="MM_preloadImages('Pics/MainPage/Book1b.jpg','Pics/MainPage/book2b.jpg','Pics/MainPage/boo k3b.jpg','Pics/MainPage/book4b.jpg','Pics/MainPage/Book5b.jpg','Pics/MainPage/DarkMindb.jp g','Pics/MainPage/Chrisb.jpg','Pics/MainPage/contact2.png')">
<body onload="MM_preloadImages('Pics/MainPage/Header/TopBorderWide2_r2_c1.gif','Pics/MainPage/Header/To pBorderWide2_r2_c2.gif','Pics/MainPage/Header/TopBorderWide2_r2_c3.gif','Pics/MainPage/Hea der/TopBorderWide2_r2_c4.gif','Pics/MainPage/Header/TopBorderWide2_r2_c5.gif','Pics/MainPa ge/Header/TopBorderWide2_r2_c6.gif','Pics/MainPage/Header/TopBorderWide2_r2_c7.gif','Pics/ MainPage/Header/TopBorderWide2_r2_c8.gif')">
<body onload="MM_preloadImages('Pics/Main Page/contact2.png','Pics/Main Page/Bottom Border/Bottom Border 2_r2_c2.gif','Pics/Main Page/Bottom Border/Bottom Border 2_r2_c4.gif','Pics/Main Page/Bottom Border/Bottom Border 2_r2_c6.gif','Pics/Main Page/Bottom Border/Bottom Border 2_r2_c8.gif','Pics/MainPage/Footer/BottomBorderWide2_r2_c1.jpg','Pics/MainPage/Footer/Bot tomBorderWide2_r2_c2.jpg','Pics/MainPage/Footer/BottomBorderWide2_r2_c3.jpg','Pics/MainPag e/Footer/BottomBorderWide2_r2_c4.jpg')">
This is all I have in my source code:
<body bgcolor="#000000" onload="MM_preloadImages('Pics/MainPage/Book1b.jpg','Pics/MainPage/book2b.jpg','Pics/Main Page/book3b.jpg','Pics/MainPage/book4b.jpg','Pics/MainPage/Book5b.jpg','Pics/MainPage/Dark Mindb.jpg','Pics/MainPage/Chrisb.jpg','Pics/MainPage/contact2.png')">
The line 229 and Line 449 is the header and footer, which preloads the images for the various rollovers.
If you want to view the code for the header and footer here's a link to them:
How are those two files being Included in the Home Page?
What code is used?
<?php include 'header.php'; ?> & <?php include 'footer.php'; ?>
1 person found this helpful
OK, that's what I thought. They're Includes.
The principle with includes is that the parent page (where the include code resides) is compiled on the server by stitching together all the Include files (such as header.php) into a composite whole.
The main idea is that the Include files must be fragments of code - not whole pages in themselves.
When the parent page code and the include code is put together, it forms a complete, valid web page.
In short, you need to strip out all the code from the header.php and footer.php except for the code that forms the header or footer.
e.g. header.php should be reduced to lines 192 to 200 only
Likewise, footer.php should be reduced to lines 161 to 198 only.
The CSS from both files should all go into an external stylesheet.
Okay. What about the preload images? Since the footer and header both have rollover images, I'd like those images to be preloaded. Is there a way to do that when I remove the "body onload..." from the footer and header?
Honestly, I wouldn't worry about the preloads, but if you want to do so, just make sure that the parent file's body tag preloads them all.
Well, I'll see how it works without the preloads. I just don't want people to mousover them the first time and nothing happens. Putting the preloads in the parent file's body tag is what I was hoping to avoid, since that means going back and putting that onload event in every single page, now well over fifty pages. That's exactly why I moved from html to php, to avoid those kinds of things.
1 person found this helpful
You could certainly do a sitewide Find and Replace to handle that task, no?