a question about html img sources

Evilreg · 31 Jan 2010 at 12:06

hi guys

sorry if this sounds like a bit of a noob question.

i have been learning html this week doing a few hours on an evening.

i am currently learning about different ways in which to link infomationas you would expect im trying it out myself as i go.

my question is when using html to creat an image as a link in the browser and you use the.
<p>Create a link of an image:
<a href="default.htm">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
the image src is obviousley were the infomation comes from so would any image i src this way need to be uploaded to the net first using somthing like image shack for example?
or is it possible to use say an image or photo with the file destination on your desktop but i carnt see how that would work on the net.

again im sorry if it sounds like a dumb thing to ask the tutorial has not yet covered this yet and i just fancied adding a picture link to my test page now i have the code.

thanks again guys for your help

Tripnologist · 31 Jan 2010 at 12:29

Yes, it would need to be uploaded.

Evilreg · 31 Jan 2010 at 12:41

thanks for the info

Evilreg · 31 Jan 2010 at 13:06

rofl if i had clicked next on the tutorial it would have told me that silly me

/slaps self

Randomface74 · 31 Jan 2010 at 13:12

That's not entirely true. In 99.99% of cases you would need to upload the image first, but there are a couple of exceptions I can think of.

1. If the website is hosted of your machine. If you have a fixed-IP you can install Apache (or a web server of your choice) and host the site locally. This is an advanced setup.

2. Using SVG, you can teach a web browser how to redraw your image. This is also an advanced technique which can be very useful for high-traffic sites with bandwidth issues.

Randomface74 · 31 Jan 2010 at 13:15

In addition, you could do something like this:

<style type='text/css'>
* { margin:0; padding:0; }
a.smiley { width: 32px; height:32px; display:block; background:transparent url('smiley.gif') left top no-repeat; }
a.smiley { border:1px solid green; }
a.smiley:hover { border:1px solid blue; }
a span { display:none; }
</style>

<a href='default.htm' class='smiley'><span>HTML Tutorial</span></a>

Evilreg · 31 Jan 2010 at 13:51

these look very complicated and currently beyond my understanding i will revert to the infomation you have given me here billy once i have sucssfully expanded my knowledge.

thank you for the infomation it is greatly appreaciated

Mr^B · 31 Jan 2010 at 15:32

billysielu said:
In addition, you could do something like this:

<style type='text/css'>
* { margin:0; padding:0; }
a.smiley { width: 32px; height:32px; display:block; background:transparent url('smiley.gif') left top no-repeat; }
a.smiley { border:1px solid green; }
a.smiley:hover { border:1px solid blue; }
a span { display:none; }
</style>

<a href='default.htm' class='smiley'><span>HTML Tutorial</span></a>

You'd still need the image uploaded to the server for that to work, so I'm not sure why you posted that.

Just ignore all of that for now, just follow the tutorial, upload the image to the site and away you go.

Randomface74 · 31 Jan 2010 at 16:45

Just introducing some concepts to the new guy, what he does with it is upto him

Mr^B · 31 Jan 2010 at 17:02

billysielu said:
Just introducing some concepts to the new guy, what he does with it is upto him

Ah, I see.

I was just wondering what it had to do with uploading images to the server, you didn't really explain what that section of css was there for or why it was relevant...