Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post

    Rollover not working on pages created from template

    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

    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=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <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>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </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>
    <!-- TemplateBeginEditable name="Header Graphic" -->
    <div id="apDiv3"><img src="../Images/homepage_header1.jpg" width="474" height="129" alt="Header background" /></div>
    <!-- TemplateEndEditable -->
    <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>
    <!-- TemplateBeginEditable name="Left Navigation" -->
    <div id="apDiv7">Left Navigation</div>
    <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Content Column 1" -->
    <div id="apDiv8">Content Column 1</div>
    <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Content Column 2" -->
    <div id="apDiv9">Content Column 2</div>
    <!-- TemplateEndEditable -->
    
    </body>
    </html>
    ps yes this is homeworkish (well an at home learning course) but please any help on this issue be very welcome!!

    Hmmmm......scratchy head time......

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    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!
    Hmmmm......scratchy head time......

  • #4
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    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...........
    Last edited by claire_t; 04-29-2011 at 11:52 AM.
    Hmmmm......scratchy head time......

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #6
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    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
    Hmmmm......scratchy head time......

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    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!!

    Hmmmm......scratchy head time......


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •