HTML Wamp - debugging required

Question

Well I built a page which is working absolutely fine as you can see below:

but when i copy my folder to C:\wamp\www\myFolder and run it through localhost using WAMP Server it look something like this

the problem is that the attached Style Sheets are not working and the Java Script is not working.

see below

• where you see the green dots here the images are loaded fine...
• where you see the pink dots the images are not loaded
• where you see the black dot.. 5 boxes in the red section... they are javascript rollover images well they loaded but are not working.. once mouse over the rollover image is not displayed
• on the top right where you see the yellow boxes.. the links and the textbox and the button have css style attached which is not working...

WHATS HAPPENING

Answer 1

Perhaps your assets (css and js) are served incorrectly?

If you view source of you page in Firefox, you will be able to click on css link. Do it and see if it take you to your css. If not, then you have the answer - assets path is wrong.

Answer 2

It looks like the images are in the wrong place.

WAMP by default points to C:\www. If your images in your CSS/HTML are referenced by "/images/example.png", then Apache interprets this request as:

"Look for the file example.png in the folder C:\www\images\"

You need to either add the directory "/myFolder/images/" to the image URL or reference the images relative from the CSS file.

This means if your css file is in your C:\www\myFolder and you have an images folder in C:\www\myFolder then your images inside your css will be declared like this:

url('images/example.png');

Note that the trailing slash has been removed, this means it will be relative from the CSS rather than from the root directory (C:\www)

Hope that helps.

Answer 3

i had my links like

href=".\images\image.png"

just changed them to

href=".\images/image.png"

the server was doing what it was supposed to do...