www.webdeveloper.com
Results 1 to 13 of 13

Thread: How to link thumbnail to image

  1. #1
    Join Date
    Apr 2007
    Posts
    6

    Angry How to link thumbnail to image

    Not exactly computer illiterate, but just beginning to work on a web page via netscape.
    Im using the a href and img src according to all instructions, and in my files I can make the thumb nail link to the image no problem. When I upload it all though, it doesnt work. What am I doing wrong here?

  2. #2
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    If you are using an absolute path for the images in relation to your local drive then once uploaded it will not work, it is usually best to use a relative path.

    Unless you post your code there's little more to suggest
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  3. #3
    Join Date
    Apr 2007
    Posts
    6

    thumb nails

    hi
    thank you so much for your reply. Im afraid I have no idea what a relative path is; is there anything online you can refer me to that might help? Or do you have a minute?
    Again, thank you

  4. #4
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Relative path:

    Code:
    <a href="filename.html">Click me</a>
    Relative paths are relative to the location where they reside. For example, if you have a folder in the root of your direction named generalinfo, the link above looks like:

    Code:
    <a href="../filename.html">Click me</a>
    Absolute path:

    Code:
    <a href="http://www.domain.com/filename.html">Click me</a>
    Where the HTTP is the full path to your file.
    Ryan Butler

    Ryan Butler.org

  5. #5
    Join Date
    Apr 2007
    Posts
    6

    thumbnails

    Thanks a million. Its getting late here and Ive been trying to suss this website biz all day and not getting very far! I shall try and work out what you have very kindly sent me first thing in the morning. Thank you again. I have been making this website via netscape and have just discovered it doesnt all show up in mozilla. Oh boy!!!

  6. #6
    Join Date
    Jun 2006
    Posts
    472
    If you are using images...
    <a href="bigpic.jpg"><img src="thumbnailpic.jpg"></a>

  7. #7
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    It would make it a lot easier if you posted your code then we might be able to see exactly what the problem is without having to guess..

    Help us help you, post your code
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  8. #8
    Join Date
    Apr 2007
    Posts
    6

    thumbnail problem

    this is a cut and paste of the code


    <a
    href="file://C:/Documents%20and%20Settings/Owner/My%20Documents/
    My%20Pictures/jewellery/jewellery%20015.jpg"><img
    src="file:///C:/Documents%20and%20Settings/Owner/My%20Documents/
    My%20Pictures/jewellery/tn_jewellery%20015.jpg"></a>

    this works fine in my files but doesnt work when I upload it

  9. #9
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,198
    That's because you do not have the paths correct. See ryanbutler's explanation and correct the paths to where the images are after being uploaded. Absolute paths are best. I would also suggest naming your files without the spaces even if you want to use " %20 ". The paths on your PC will not work after you file is uploaded.

    Ron
    Last edited by Major Payne; 04-08-2007 at 04:23 AM.

  10. #10
    Join Date
    Apr 2007
    Posts
    6
    have added www. in front of the filenames on the a href and the img src
    it is one step better in that the image box(empty) links to a not found message online!

  11. #11
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Create a folder in the same folder as the html file and called the folder jewellery
    In this folder put your images, your link and image src would then be as follows

    <a href="jewellery/jewellery015.jpg">
    <img src="jewellery/tn_jewellery015.jpg">
    </a>

    Your structure would be

    Code:
    root folder
           html file
           
          jewellery folder
              jewellery015.jpg
              tn_jewellery.jpg
    Last edited by Mr J; 04-08-2007 at 05:46 AM.
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  12. #12
    Join Date
    Jan 2007
    Posts
    196
    This is a simple problem with a simple solution.

    On your C disc you have three files:

    1. The file containing the code you are writing and ends in .htm
    2. jewellery 20015.jpg
    3. tn_jewellery 20015.jpg

    You need to rewrite your pasted code as:

    <a href='jewellery 20015.jpg'><img src='tn_jewellery 20015.jpg'></a>

    You then upload all three files to the same directory on your web space.

  13. #13
    Join Date
    Apr 2007
    Posts
    6

    thumb nails

    Thank you for that, done it!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles