# Getting Images on Web Page



## mouseman (Jul 14, 2009)

Hi 
I've not had problems in the past in getting my images on my web pages using eg: img src="documents/newpics/maggie/images/dscf0575.jpg" etc
I have deleted two images and replaced with others but the browser does not reflect the new images, just the red cross nightmare.
The new images have been used in the past with no problem.I'm sure the file path I'm using is OK.I've tried everything I know but am now getting desparate.

Can you help ? Kind Regards Mouseman


----------



## caraewilton (Nov 7, 2007)

Well I would check that the filename has no spaces and is all in lowercase. I have found that my server throws a fit with anything like

my pic.jpg

or even

mypic.JPG


----------



## mouseman (Jul 14, 2009)

Hi caraewilton
Thanks for your suggestion but I have ruled that out
Regards mouseman


----------



## Hughv (Jul 22, 2006)

The path you show looks like it applies to your local computer.
The path on the server is likely to be different.
Post a link so we can see this phenomenon.


----------



## mouseman (Jul 14, 2009)

Dear hughv
Perhaps I misled you,I haven't gone so far as uploading to the Web, I was just trying to view my index.html page on my browser on my PC. It is here that I can't get any images to display. I guess it must relate to my filepath but don't know how'

Filepath is:









Appreciate your views Regards mouseman


----------



## Hughv (Jul 22, 2006)

"picasa-images" is probably a virtual path used by the Picasa database.
When I create a web page, I start with three new folders, and I suggest you do the same to make uploading easier when you're finished. You want the file structure on your computer to match your server.
!. Web Site name (Contains all the html pages
2. Images
3. Css
Move your existing files accordingly, and your path will then be:








Use more descriptive file names to make editing easier.


----------



## mouseman (Jul 14, 2009)

Thanks for your suggestions - sounds more like it. I'll let you know how I get on.
Thanks for not talking down to me as some forums do - it helps confidence.
Regards mouseman.


----------



## Hughv (Jul 22, 2006)

You're welcome. I've noticed that "talking down" stuff occasionally, and it's a shame. I wouldn't know the little I do without help from a lot of very patient people, so I try to be patient also.


----------



## mouseman (Jul 14, 2009)

Hi hughv

As you suggested, I have opened 3 new folders (and deleted others which could be confusing) as follows :- CSS, images, ways with art. I have moved my html files viz 'index' 'about' 'gallery' 'contact' to the 'ways with art' folder - CSS to the CSS folder and one! image file to the 'images' folder, just as a test.
The following is the markup I've used in the 'index' text file :-










but I'm afraid the end result of this is - no image displayed.
Any suggestions ? Regards mouseman

Incidentally, I have a file (elsewhere) Called 'ftp maggie-rose-art.co.uk-ftp_log'. I can't get rid of this and don't know what it means-any idea?


----------



## Hughv (Jul 22, 2006)

I could have been clearer about the folders.
"css" and "images" are inside the folder that contains "index.html".
Your file list should look like this:
(File) index.html
(Folder) css
(folder) images
I have found that it's best to:
Always use lower case letters.
Never use spaces in a file name.
Rename "dscf0534.jpg" to something like "stilloranges.jpg" so you can identify each file from its name, which will make your life much easier as the site grows.
"'ftp maggie-rose-art.co.uk-ftp_log'" is a log file from your FTP program. I wouldn't be concerned about it at the moment.


----------



## mouseman (Jul 14, 2009)

O K hughv got you

mouseman


----------



## mouseman (Jul 14, 2009)

I now have:-
wayswithart (folder)
I
I
_______________________________________
I I I
4 html files
CSS (folder) images(folder)
I I
4 CSS files 2 images

In index.html notepad:-







(leaving image file name for the moment)

I hate to tell you, but still no image displayed.
Please don't worry if you want to withdraw from this dilemma - I understand. Regards mouseman


----------



## Hughv (Jul 22, 2006)

Wrong:
<img src="wayswithart/images/dscf0531.jpg" 
Right:
<img src="/images/dscf0531.jpg" 
Each "/" indicates a folder depth. If "images" is inside "wayswithart", the "/images" is all you need.


----------



## mouseman (Jul 14, 2009)

O K I understand but......it still doesn't work


----------



## Hughv (Jul 22, 2006)

Post the html from your page. There's something simple you're doing wrong.


----------



## mouseman (Jul 14, 2009)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

Ways With Art

*My Ways With Art*

My Traditional and Contemporary Art

* Site Navigation *


Home
About Me
My Pictures
Contact Me


----------



## Hughv (Jul 22, 2006)

I cleaned it up a little. Copy it to your index.html file.
You might also want to get an HTML editor if you don't have one.

If you put dscf0531.jpg in the Ways with Art/images folder and style1.css in the css folder it will work.
Just to be clear: The images and css folders are inside the Ways with Art folder.
There are other ways to organize folders, but this way works for me (And most people).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ways With Art

*My Ways With Art*

My Traditional and Contemporary Art

*Site Navigation*


Home
About Me
My Pictures
Contact Me


----------



## mouseman (Jul 14, 2009)

Sorry Hughv
Done as you say OK but situation remains the same
mouseman


----------



## youngros (Sep 24, 2009)

Try either 








or








and see how that works.


----------



## Hughv (Jul 22, 2006)

The code is fine the way it is.
You have made some kind of error.
Remember the file names must match exactly-both the case and the spelling must be identical.
I substituted one of my pics and it works just fine.
Post your css in case the error is there. Try deleting the css line temporarily in case that's the problem.


----------



## mouseman (Jul 14, 2009)

Hughv

There's something very fundamentally wrong here.
Let me tell you a story. I had this site up and running some weeks ago with no problems - images etc OK. The only problem was that I had no clickable thumbnails. I therefore purchased the ETG thumbnail generator. I was not very happy about the result so I uninstalled the program and all associated files. I decided to start from scratch using the basis of my original data. It is from this point that we are where we are now. I therefore can't help feeling this must somehow be related.
Would appreciate your thoughts on this.
Kind Regards mouseman


----------



## Hughv (Jul 22, 2006)

This is a very simple page.
The code we're working with is correct, so let's find your error and get the page working.
I'd like to see a screen shot of your "art" folder to be sure it's set up right.


----------



## mouseman (Jul 14, 2009)

Style Sheet as requested:-

/*
CSS for Timeless Art Website
*/
body {
font-family: Lucida;
background-color: #ffffcc;
padding: 15px;
line-height: 125%; 
border: 4px solid #336633; padding-bottom: 500px;border-left:80px solid #336633;border-right:80px solid #336633;
}
#tagline p {font: Verdana;background-color:#cccc66; border-top: 2px solid #336633; border-bottom: 2px solid #336633;
padding-top: 3px; padding-bottom: 3px; padding-left: 50px; border-left: 2px solid #336633;border-right:2px
solid #336633; }
h1 {
font-family: Georgia, Arial;
font-size: xx-large;
background-color: #336633;
color: white;
padding-top: 20px; padding-bottom:10px; padding-left:20px;padding-right:400px; }


p{
font-size: medium;
font-weight: normal;
color: #336633; 
}
#navigation { width: 180px;height:150px; border: 2px dotted green; background-color: #cccccc; color: #336633 
}

a:link {color: blue; }
a:visited {color:#880088; }
a:hover {text-decoration:none; color:#0099ff; background-color: white; }
a:active {color: #ff0000; }
h3{margin-left:30px;top:20px;}
#navigation {position:absolute;top:220px;left:150px;} 
#bodycontent{ position:absolute;left:350px;top:450px;}
img{border:1px solid green;}


----------



## mouseman (Jul 14, 2009)

sorry not sure how to send you a screen shot


----------



## Hughv (Jul 22, 2006)

You haven't defined this









Add this to your css:
div.right {
left : 1000px;
float : right;
position:relative;
width : 50%;
}
Change to 
This puts the pic as a background to your nav element. Move it as desired.
What's your OS? Alt-print screen for screenshots in XP.


----------



## mouseman (Jul 14, 2009)

Made the changes you suggested no change. To make the matter worse, it seems that the style sheet style1.css is not linking to the index.html page ie no style statements reflected.


----------



## Hughv (Jul 22, 2006)

Check this line:

Your style sheet must be inside the css folder.


----------



## mouseman (Jul 14, 2009)

Yes, this line is OK
Yes, the style sheet is inside the CSS folder


----------



## Hughv (Jul 22, 2006)

"CSS"?
It has to be "css".
Case and spelling have to be identical. Check every line if necessary.


----------



## Hughv (Jul 22, 2006)

Here's a zip of the whole thing.
Unzip to new folder. I used my image, so just substitute yours.


----------



## mouseman (Jul 14, 2009)

The best I can interpret is ;
My image replacing yours in your folder - no result
Your image replacing mine in my folder - no result

My logic (perhaps confused) is that the first example suggests a problem with my image files whereas the second suggests the opposite


----------



## Hughv (Jul 22, 2006)

Upload a copy of your image.
What happens when you click on index.html? (The file I sent).
Send a screenshot:
Load the page
Alt-print screen
Paste it into your editing program and save it.
Upload.


----------



## mouseman (Jul 14, 2009)

I've uploaded a copy of my image.
Clicking index.html in your file gives - thumbnail of my image, clickable to full image. 
Sorry I'm a bit stuck on next bit : send screenshot - how? - load page ?


----------



## Hughv (Jul 22, 2006)

Screenshot:
Load the page in your browser.
Alt-Prt Screen loads the image in memory.
Open any image-capable program(Word, Irfanview,Photoshop, etc.)
Edit/Paste or Ctrl-V
Save and upload.
You didn't upload an image. Try again.
Does the page look right-background color, etc, from the css file?
Clickable to full image? That doesn't make sense.
What browser are you using?
Sounds like we're making progress. What errors did you correct?


----------



## mouseman (Jul 14, 2009)

I have loaded image into browser. I am using IE 8.
The result in the browser is firstly a blank full image frame. Clicking on this produces the thumbnail which when clicked, produces the full image.
When you say upload the image do you mean to the Web? Doing so produces the bare web page, no image, just the frame.
No, the page has evidently not linked to the Style Sheet.
I'm still failing you in trying to get my head round your instructions ref. load image in memory-edit/paste- save/upload, sorry to be so dim.
Incidentally, I'm just wondering whether the problems are related to Picasa from where I've fetched my images ?


----------



## Hughv (Jul 22, 2006)

I think we're not communicating.
The zip file I uploaded contains the complete web page, with images and style sheet.
Go back to that. Unzip it into a new folder.
Then you''l have:
New folder, Containing index.html(File)- CSS(Folder) with your style sheet images(Folder) containing dscf0531.jpg
Click on index.html and you'll see your web page.
Do this first so we're on the same page.
Your folder should look like the attached image.


----------



## mouseman (Jul 14, 2009)

Yes, I've already done all that seen the web page which does not contain an image.


----------



## Hughv (Jul 22, 2006)

The only way that's possible is if you've turned off image display in your browser.
In IE Tools/Internet Options/Advanced/Multimedia
Make sure "Show pictures" is checked.


----------



## Hughv (Jul 22, 2006)

Just for laughs, I uploaded these files to my site. What do you see when you click?:

http://www.hughvandervoort.com/waystest/


----------



## mouseman (Jul 14, 2009)

'Show pictures' is checked - I know that i'm not very clever but this was an obvious.
I told you from the start that there is a much deeper problem. I built this site some months ago which was up and running with no problems.It was only when some clown sold me a thumbnail generator that the whole thing went awry.I can't see the answer but to start again from scratch. Sorry to be ratty but I'm a bit depressed.
Regards Monty


----------



## mouseman (Jul 14, 2009)

I'm trying to laugh - it shows your image. What does this mean?


----------



## Hughv (Jul 22, 2006)

Good question. Start by clearing your cache and temp files. The easy way is by downloading ccleaner:
http://www.ccleaner.com/
You could also:
Open My Computer. Rt-Click C:/ properties/Tools/Disk Cleanup
Uninstall the thumbnail generator. What's the name of this program?
Thumbnails are easy to make with just about any imaging program.


----------

