Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 294
  • Last Modified:

How do I compose a HTML link tag that links to an image file in a subdirectory of the current directory?

How do I compose a HTML link tag that links to an image file in a subdirectory of the current directory?
0
Ted Palmer
Asked:
Ted Palmer
  • 8
  • 5
  • 3
  • +1
1 Solution
 
tailoreddigitalCommented:
<img src="subdirectory/image.jpg" />
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
<a href="subdirectory/image.jpg">Link to image</a>
0
 
Ted PalmerInformation Technology ConsultantAuthor Commented:
Sorry guys. Since I am not an HTML guy, I don't know how to articulate my question very well. This image is actually a big enough picture to consume a whole web page. It should open in a separate browser tab or instance. I prefer tab. It is way to big to be imbedded in the middle of a paragraph of text. Could you modify your comment to make it open in a different browser page?

Thank you,
Ted
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
tailoreddigitalCommented:
By default a browser will open a JPG, in it's own tab (all by itself).
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
<a href="subdirectory/image.jpg" target="_blank">Link to image</a
0
 
Ted PalmerInformation Technology ConsultantAuthor Commented:
tailoreddigital,

I pasted your tag into my HTML file. It causes a square nested inside of a square with an 'X' inside of it to appear in my web browser displayed HTML. When I click on it nothing happens.

I'll paste in a relevant snippent of my HTML

you have to have the Data Object Relationships diagram (<img src="0000_SubrogationDataRelationships.tif"/> ) in front of you whenever you are trying

Thanks,
Ted Palmer
0
 
Ted PalmerInformation Technology ConsultantAuthor Commented:
padas:

Are you sure this is right?

<a href="subdirectory/image.jpg" target="_blank">Link to image</a

The '</a' on the end looks like a syntax error.

Ted Palmer
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It's a copy and paste error.  Like paying the rent....you must close the tag.  </a>
0
 
Ted PalmerInformation Technology ConsultantAuthor Commented:
So can I copy and paste your code into my HTML and modify it to display my image file and expect it to work?
0
 
tailoreddigitalCommented:
Padas code should work.   When i posted to you i was trying to show you how to use a sub folder,  i assumed you knew how to load from the current folder.    Padas code is the complete tag.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you want to have a link called "Link to image" that will open up a jpg file in a new tab/window then yes, this is the code.  

<a href="subdirectory/image.jpg" target="_blank">Link to image</a>
0
 
Ted PalmerInformation Technology ConsultantAuthor Commented:
Padas,

I pasted your code into my HTML file. It looks like this:

you have to have the Data Object Relationships diagram (<a href="0000_SubrogationDataRelationships.tif" target="_blank">SubrogationDataRelationships</a> ) in front of you whenever you

The web page displays the anchor text as "SubrogationDataRelationships".

The path to the file is "C:\Drv3\Temp\Temp-9"


See attached file for the error-message.png file

I left out the subdirectory.
CanNotFind.png
0
 
Ted PalmerInformation Technology ConsultantAuthor Commented:
Padas,

Ok! when I did like I asked you to show me to make it, it worked. It opened the image file in the program that is in the windows registry to use to open that kind of file. It work the way I asked how to make it work,

You got it. Thank you.

Ted Palmer
0
 
Ted PalmerInformation Technology ConsultantAuthor Commented:
Thank you. You do good work.

Ted Palmer
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Firstly you have to add an alt attribute to the img as said by the W3c...

The correct format of the img tag is..

<img src="path_of_image.image_format" alt="alternate_text">

Open in new window


and your code would be somewhat like this...

<a href="path_of_the_image">Click here to see the image</a>

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Thanks!  I'm glad it worked.
0
 
Ted PalmerInformation Technology ConsultantAuthor Commented:
I thought I was posting this comment in a different question sorry. So I extracted it out of here.

Ted Palmer
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 8
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now