Better transition between pages

Posted on 2008-10-15
Last Modified: 2008-10-15
I'm redeveloping our company's website.  The background image is going to be an image that's a white background with a green bar going across in the middle.  The same background is used for every page.  when I change to different pages, that background image reloads and doesn't immediately appear with the rest of the content.  I've seen pages that it looks like only a certain area of the page changes and the rest (including a backgroudn image) doesn't have to reload.  Any suggestions on how to get this done?

I'm using Dreamweaver CS3 for site development.
Question by:sedberg1
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
LVL 21

Expert Comment

by:Julian Matz
ID: 22725379
Normally images should get cached. Check to see what response code is being sent for the URL of your image.

You can check this here:

Author Comment

ID: 22725464
From the first link:
HTTP/1.1 200 OK
Content-Length: 6134
Content-Type: text/html
Last-Modified: Wed, 15 Oct 2008 19:07:09 GMT
Accept-Ranges: bytes
ETag: "82493039f92ec91:3ea"
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
Date: Wed, 15 Oct 2008 20:26:03 GMT

From the second link: 
Expires     -  
Cache-Control     -  
Last-Modified   1 hr 19 min ago  (Wed, 15 Oct 2008 19:07:09 GMT) validated  
ETag   "82493039f92ec91:3ea"
Content-Length   6.0K (6134)  
Server   Microsoft-IIS/6.0  

This object doesn't have any explicit freshness information set, so a cache may use Last-Modified to determine how fresh it is with an adaptive TTL (at this time, it could be, depending on the adaptive percent used, considered fresh for: 15 min 56 sec (20%), 39 min 51 sec (50%), 1 hr 19 min (100%)). It can be validated with Last-Modified.

Author Comment

ID: 22725505
Could you please help me to understand what this stuff means?
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 21

Expert Comment

by:Julian Matz
ID: 22725532
I meant the URL of the actual image.
Where is the background image you're using?

Author Comment

ID: 22725651
it was a test site only accessible internally.  And I got rid of the previous pages that wwere being a problem.  I need to add more pages but I know I'm going to come across the same things in the future.  I thought this was something that could've been done without lookking at the actual site.  I know I've seen something before where this has been done.

Author Comment

ID: 22725697
Here's the site, but it's nowhere near done since I redid the layout it has only one page:
LVL 21

Expert Comment

by:Julian Matz
ID: 22725704
Well, the NORMAL behaviour is that the image is cached and therefore doesn't need to be reloaded after each subsequent request. If this was not the case then there'd be something wrong, which is why I suggested checking the response headers.

Author Comment

ID: 22725748
I'm not talking about caching the images when someone's looking at them.  I'm talking about only having parts of a page change when someone clicks a link.  An example is  Toward the middle of the home page, there are five tabs (what's new, learn about, etc) and the page doesn't reload, only the tabs change.
LVL 21

Accepted Solution

Julian Matz earned 500 total points
ID: 22725819
Oh right, I see what you mean now.

Basically, this can be done using 3 methods - Flash, Javascript or AJAX (which actually is Javascript).

Javascript can be used in combination with CSS to hide and display divs with onmouseover or onclick handlers. AJAX could be used to dynamically fetch content from the server and then display it in a certain defined area within your web page.

To get started with AJAX and some nifty Javascript features, have a look at:

Author Comment

ID: 22725858
Well, for a non-programmer, looks like I'll be needing someone's help with this.
LVL 21

Expert Comment

by:Julian Matz
ID: 22726043
Well, if you're confident enough with HTML, it's really not as difficult as it might first seem. The two links I posted have some tutorials and examples that you could have a look at to see if it might be something you could do without investing too much time.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
html input 8 56
Selected in an option list 13 26
Link not working 6 42
ASP get fieds value 2 21
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question