Jump to content

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


ScottM
 Share

Recommended Posts

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

Link to comment
Share on other sites

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" />

Link to comment
Share on other sites

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" />

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
Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

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.

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.

Link to comment
Share on other sites

<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?

Is your webpage in the same folder as the image, if so try using:<img src="links.bmp">
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...