• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

add url to image on webpage

Community Beginner ,
Aug 11, 2022 Aug 11, 2022

Copy link to clipboard

Copied

Hello! I have an image in my webpage.  I am looking for the HTML code so that when someone clicks on the image it will take them to a specified URL. Seems easy and I thought I had it correct (In dreamweaver it has a link right under the SRC line and I thought that would do the trick, but it does not work), but it is not working.

 

Thank you!

Views

145

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2022 Aug 11, 2022

Copy link to clipboard

Copied

That link option should work unless there are other issues on the page.  Can you run your page through the validator and correct any errors that show up? https://validator.w3.org . When you want a link the a tag will wrap around your img tag which is what the link option that you see you will do. It's possible it's doing it but an error is causing it not to work on your page.  You can always share the code as well if you are running into issues and we can take a look into why it's not working to help out.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 14, 2022 Aug 14, 2022

Copy link to clipboard

Copied

Thank you - the validator link was helpful. In my attempt to try to fix the error myself, I had accidently removed some tags. I was able to get it working again! Thank you for your quick reply!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2022 Aug 11, 2022

Copy link to clipboard

Copied

Hyperlinked image.  Image is wrapped inside the anchor tags like so.

<a href="https://example.com">

<img src="https://dummyimage.com/500x500" alt="placeholder image" title="Link to Example.com">

</a>

 

Does that help you?

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 14, 2022 Aug 14, 2022

Copy link to clipboard

Copied

While title is a valid attribute on an image as it is a global attribute you already have the alt on there. Most browsers/email clients will ready that for an Image tag not the title.

Same goes for the anchor where the title tag there will be what search engines, marketing platforms and social media bots etc would be reading.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 15, 2022 Aug 15, 2022

Copy link to clipboard

Copied

LATEST
quote

...you already have the alt on there. Most browsers/email clients will ready that for an Image tag not the title.


By @Liam Dilley

==========

Internet Explorer was the ONLY browser that treated Alt & Title the same. And IE is dead now.  Email is an entirely different beast.

 

Alt is not the same as title. Alt attribute on images is a mandatory accessibility fallback with alternative text in case the image fails to load.  However search engines don't give Alt text much importance.

 

Title attribute displays multi-line advisory information usually inside a browser tooltip. Title text is recognized by screen readers & search engines and can be used on images, forms, anchors, iframes... at the developer's discretion.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 14, 2022 Aug 14, 2022

Copy link to clipboard

Copied

Yes, thank yoU! This was very helpful too! It was the exact line of code I was looking for. Thank you for your quick reply.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 14, 2022 Aug 14, 2022

Copy link to clipboard

Copied

Thank you for your help and the lines of code you provided! I appreciated your quick reply and information!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines