Rollover not working on pages created from template

claire_t

04-28-2011, 08:51 PM

Hi

This is probably such a simple problem to solve but i'm darned if i can work it out after a long time staring at code!!

I have created a page template, which has 4 rollover images for a menu. I have used this code on another site and it works! However I have created 4 pages from this template and in these pages the rollovers do not work when oped in a browser. But they do when I open the template in a browser! Any ideas anyone????

Thanks

<!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=utf-8" />

<title>Untitled Document</title>

<style type="text/css">
#apDiv1 {
position:absolute;
left:3px;
top:4px;
width:260px;
height:65px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:263px;
top:4px;
width:440px;
height:65px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:2px;
top:69px;
width:700px;
height:129px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:476px;
top:69px;
width:226px;
height:129px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:2px;
top:199px;
width:133px;
height:36px;
z-index:5;
background-color: #FF9900;
}
#apDiv6 {
position:absolute;
left:135px;
top:199px;
width:567px;
height:36px;
z-index:6;
background-color: #FFCC66;
}
#apDiv7 {
position:absolute;
left:1px;
top:236px;
width:133px;
height:273px;
z-index:7;
}
#apDiv8 {
position:absolute;
left:168px;
top:235px;
width:250px;
height:280px;
z-index:8;
}
#apDiv9 {
position:absolute;
left:452px;
top:235px;
width:250px;
height:280px;
z-index:9;
}
#TopNav {
position:absolute;
left:264px;
top:34px;
width:435px;
height:28px;
z-index:10;
}

ul {
text-decoration: none;
list-style-type:none;
}

#TopNav li {
width:80px;
margin: 0px;
text-decoration: none;
text-align: center;
float: left;
}

</style>


</head>

<body>
<div id="apDiv1"><a href="http://www.habitat.org"><img src="../Images/topnavBG_01.jpg" width="260" height="65" alt="Habitat for Humanity International" /></a></div>
<div id="apDiv2"><img src="../Images/topnavBG_02.jpg" width="440" height="65" alt="Background image" /></div>
<div id="TopNav">
<ul>
<li><a href="getinvolved.htm"><img src="../Images/getinvolved.gif" alt="Get Involved" onmouseover="this.src='../Images/getinvolved_over.gif'" onmouseout="this.src='../Images/getinvolved.gif'"/></a>
</li>
<li><a href="how.htm"><img src="../Images/howitworks.gif" alt="How It Works" align="top" onmouseover="this.src='../Images/howitworks_over.gif'" onmouseout="this.src='../Images/howitworks.gif'"/></a></li>
<li><a href="truestories.htm"><img src="../Images/truestories.gif" alt="True Stories" onmouseover="this.src='../Images/truestories_over.gif'" onmouseout="this.src='../Images/truestories.gif'"/></a>
</li>
<li><a href="build.htm"><img src="../Images/wherewebuild.gif" alt="Where We Build" onmouseover="this.src='../Images/wherewebuild_over.gif'" onmouseout="this.src='../Images/wherewebuild.gif'"/></a></li>
</ul>
</div>

<div id="apDiv3"><img src="../Images/homepage_header1.jpg" width="474" height="129" alt="Header background" /></div>

<div id="apDiv5"><img src="../Images/welcome.gif" width="133" height="36" alt="Welcome" /></div>
<div id="apDiv6"><img src="../Images/rotatingquote3.gif" width="541" height="36" alt="Quote" /></div>

<div id="apDiv7">Left Navigation</div>

<div id="apDiv8">Content Column 1</div>

<div id="apDiv9">Content Column 2</div>


</body>
</html>

ps yes this is homeworkish (well an at home learning course) but please any help on this issue be very welcome!!

:thumbsup:

teedoff

04-28-2011, 08:55 PM

Since you say your template page works, I would bet its a path issue. Where are you saving your new pages in relation to where your template is? Put the new pages in the same folder the template file is in to test this idea.

claire_t

04-28-2011, 09:13 PM

Feel I should mention Im using Dreamweaver CS5, may be useful info ha! Sadly my course book is for CS4 which makes it abit challenging.

I have the template in 'Templates' file which in turn is in a file called 'Habitat' and then the other pages are saved within the 'Habitat' file also. As this is how the book says to do it then i think i maybe concerned if that not right!! gaahhhhh!!!

so it would work if they were in the 'Templates' file then you think??

will give that ago in the morning (or my brain may go boom!!) and get back to you!

thanks Teedoff! :D

claire_t

04-29-2011, 11:49 AM

Ok have tried with the file locations and its not that. Could it be the path of the images? as the template is in a different folder pointing back to the images would that then effect the path on the new pages as they are on the same level as the images?

ok thats probably not explained very well......
Habitat (file) contains :
Images (file) which contains :all images
Template (file) which contains :template.dwt
index.htm
how.htm...etc

so template pointing back them up to images but the other pages are pointing just straight to images. would this cause the problem? mind you the images show up its just the rollover ones that don't!!?? but then if this is the problem how do i rectify it??

ok am waffling now.....sorry what a bunch of nonsense that is ha!!

any ideas would be gratefully recieved tho!!

going to return to the pomp of the royal wedding now...........:rolleyes:

teedoff

04-29-2011, 02:23 PM

DW is pretty good at updating file paths for images as well as stylesheets and links when you create or move a page to a different level folder. But it gives you the option to update. Also its not 100% fullproof.

Yes I was suggesting the images for your rollovers might be wrong if the new page is in a different folder than your template.

Do you have a test site for a new page? One we could look at?

Also, on a side note, all those absolute positions might get you in some trouble.

claire_t

05-01-2011, 12:36 PM

I dont have a test site yet....trying to sort that ha! I will try moving the images etc and see what happens. Just frustrating as thats how the book says to do it and I have a copy of the completed site and the file system and mine is the same! maybe one of lifes little mysteries which I will never understand!

I haven't used absolute positions before, the book I'm working for is telling me to use them so I am. why is it best not to use them? how could they cause problems? I'm curious to know so i don't use them again in my own work!!

Ta muchly!!

C:D

AndrewGSW

05-01-2011, 06:30 PM

If your 'Images' folder is in the same location as your web page then you shouldn't need to use "../" in "../Images/topnavBG_01.jpg", but if it is showing the initial images then it's probably pointing to the correct folder. Try clearing your browser cache to see if it still finds the initial images, as they may be in the browser cache but not in the location you've specified.

Try opening your Images folder from Windows Explorer to make sure the images are all there (and have the correct names and extensions!). It is possible that the folder view within DW has not been updated and is still listing the images even though they may have been moved. Andy.

claire_t

05-01-2011, 09:49 PM

I will try clearing the browser and see what happens.

Next question tho......as the new pages are made from a template (which is in the Templates file) and that has editable content from what I can tell I cannot change the file path on the new pages, as its 'uneditable'. so if it is because the ../ is there when it shouldnt be how can i get rid of it? or is it just a case of making them uneditable? of course problem then occurs where its a lab in a course and I'm supposed to make editable regions!!

GAHHHHH brain ache from it all.......maybe I should skip it and get the next lab!! ha!!

:D