Can't crack mystery of how to use image as link.

[ScottM]

Dear Forum Friends:A little bit of good news. I discovered the Mac equivalent of notepad. It’s called TextEdit. I found, given the proper html code, that I could turn a humble TextEdit file into a working html file simply by adding the .html extension when I save a TextEdit file. Okay, now, I’m at the stage of my html studies where I’m studying links. W3 calls it “An image as a link.” I have had some previous html experience but my mind is still a jumble. Do I create an index.html page first? Do I create a folder that houses the index.html page and a subfolder that contains an image from my hard drive? How do I code my html to correlate to these?I am able to create a basic html file by creating the html code in a TextEdit file, saving the TextEdit file to my hard drive as a .html file, and opening this .html file in Firefox. I am able to create a basic html file, with text that serves as a link to a website, by creating the html code in a TextEdit file, saving the TextEdit file to my hard drive as a .html file, and opening this .html file in Firefox.But how do I create an html file, using TextEdit, that uses an image (from my hard drive) as a link?Thanks! ScottM

[scott100]

Easiest way is to make a new folder on your C drive called something like: mysite.In this folder put the webpage and imageIn the webpage put: <a href="http://www.google.com"><img src="pic.jpg" /></a>pic = the name of your picture.jpg = the type of picture, ie jpg gif pngYou could also access it with the full path like so: <img src="C:\mysite\pic.jpg" />

[G1337]

There are also CSS tricks for getting rid of those unsightly blue borders.

[ScottM]

Easiest way is to make a new folder on your C drive called something like: mysite.In this folder put the webpage and imageIn the webpage put: <a href="http://www.google.com"><img src="pic.jpg" /></a>pic = the name of your picture.jpg = the type of picture, ie jpg gif pngYou could also access it with the full path like so: <img src="C:\mysite\pic.jpg" />

<{POST_SNAPBACK}>

Thanks Scott100. I had to make sure my Macintosh TextEditor did not append the .txt file extension and instead just keep the .html extension.Other than that, your directions worked like a charm! They even helped to clarify a little more of the lesson that w3 had. For example, I was able to get in some practice at resizing the image. Thanks again. ScottM

[vchris]

To remove the default blue border around your images there's 2 ways:1) Add the border attribute with a value of 0 in your image tag. Example: <img src="image.jpg" border="0" />2a) Add image style to your page. This will remove the borders of all the images where you have this style added on your page. If this is added in a css document then all the images in your site won't have a border. Example: <style type="text/css"> img { border: 0; } </style> <img src="image.jpg" />2b) If you want to remove the border of only 1 specific image, you'll need to add a class attribute to your image. Every image with this class will have their borders removed. Example: <style type="text/css"> .noborder { border: 0; } </style> <img src="image.jpg" class="noborder" />Hope this helps!

[meef_jones]

hello. i seem to be having the same problems as scottm. I followed scott100's advice and put every thing in its own seperate folder, but nothing seems to work.

[scott100]

hello. i seem to be having the same problems as scottm. I followed scott100's advice and put every thing in its own seperate folder, but nothing seems to work.

<{POST_SNAPBACK}>

Ok that's strange, can you post the code you are using meef and we can have a look.In the meantime put this code on the page

<img src="http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif" />

If it works ok then there is a problem with the way you are referencing the image, make sure the image name is correct and the file extension.

[meef_jones]

<img src="c:\documents and settings\piggy\my documents\html again\html\coolpage\links.bmp">

That is only one part of it, but thats basically what they all look like. Also, is it poosible to have a link to a page on your hard drive?

[scott100]

<img src="c:\documents and settings\piggy\my documents\html again\html\coolpage\links.bmp">

That is only one part of it, but thats basically what they all look like. Also, is it poosible to have a link to a page on your hard drive?

<{POST_SNAPBACK}>

Is your webpage in the same folder as the image, if so try using:<img src="links.bmp">