For example you have an image named “datasheet.jpg”. You are displaying this image on the webpage.

<img src="datasheet.jpg" />

Let’s say, if you are updating this image and leave it with the same name “datasheet.jpg”. Then also you image tag will be same.

<img src="datasheet.jpg" />

In many cases, browser will not know there is a new version of the same image and it will tend to display the content from the web cache. Even no-cache headers are not helping in these type of occasion (I tried and tired). So the returning visitor will see the same old image.

The simplest solution is to change the image filename. But how you will create a different name for an image that is in same name. Ok. Do it simply.

<img src="datasheet.jpg?mtime=1257316941" />

Do this -> Append a Query Sting

When you attach query sting in end of image file name, browser will treat it as a different file name and looks for the web server for new. This will not make the browser to display the cached content.

How to generate an optimized version of Query String for Image file name?

Using simply random value as query string will lead the browser to load the new version of image regardless of updated version. This will make the loading time of the web page too long even if the correct version of image is there on cache. This will become overhead. To overcome this issue, we can generate the query string using file modified time. So the query string will not be changed until file is modified next time. Once the file is modified, the query string will be changed and browser will load the new version.

Generate filename with query string using file modified time (PHP)

Use the filemtime($path) function to generate file modified time.

echo '<img src="datasheet.jpg?mtime=' . filemtime(="datasheet.jpg)  . '" />';

this will generate something similar to this

<img src="datasheet.jpg?mtime=1257316941" />

This will work for all types of browser including IE, FF, GC and all others.
I hope this will be useful for you. Don’t forget to leave a comment if you find any mistake on me.

.

Highlits:

• 100% pure Javascript/jQuery
• Fast Loading
• Auto animate banner
• Easy to use link buttons
• Enable or disable any texts
• Easy to integrate with PHP, ASP.NET and any other servers

Demo

Click here to see a demo

Download

Link 1

Screenshot :

Screenshot 1

.

Screenshot 2

.

Screenshot 3

Installation:

Installation instruction found in source file.

This is not 100% complete. Please give me your feedbacks. I will make any changes for the improvement.

• Use it for free & Please give me a link back if you like.

Bugs & Fixes

• Dropdown Menu problem
• Adding link to Large image in Banner

.

Centering a layer is not that much harder part. It is simple but it is the start of most web page. So it is worth knowing the right syntex that works with almost all browsers today. Following is a sample style that works in all browsers.

CSS Style

1
2
3
4
5
6
7
8
9
10
11
12

 
body {
    margin: 0px;
    padding: 0px;
    text-align:center;
}
 
#outerWrapper {
    width:900px;
    margin:0 auto;
    border:1px #999 solid;
}

The Body

1

<div id="outerWrapper"></div>

Cool ! It is working fine. By the way, I have a absolute positioned layer. Will this work with this idea. No problem buddy. There is nother technique using the negative margin.

1
2
3
4
5
6

#outerWrapper{
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

Check wheather is this work for you. Probably it should.