• Around The HomeToggle Menu

    • Entertainment
    • Productivity
    • Smart Home
  • FamilyToggle Menu

    • Parenting
    • Toys
    • Pets
    • Travel
  • Product ReviewsToggle Menu

    • Phones
    • Tablets
    • Laptops
    • Desktops
    • Wearables
    • Audio
    • Cameras
    • Headphones
    • Printers
    • Smart Home
    • TVs
    • Gaming and Video
  • One Cool ThingToggle Menu

    • Frugal Tech
    • Kickstarters
    • Videos
Techwalla
  1. Home
  2. Around The Home
  3. Productivity
  4. How to Add URLs to Pictures

How to Add URLs to Pictures

March 31, 2015
By: Addie Kaye
  • Share
  • Share on Facebook

Add a URL to a picture if your picture represents a web page or entire website. Companies, for example, often include website URLs inside product images so that consumers will know where to find out more about the product just by viewing the image. You can add URLs within the picture itself for offline viewing or as a mouseover or interactive link for Internet viewing.

Video of the Day

...
Add a URL to a picture.

Graphical URL Addition

Step

Open your picture in a graphic design program.

Step

Click your mouse near the top or bottom of the image where you want to insert the URL. Choose an area that only contains image background as your viewers will not see this area clearly once covered with text. For a photograph taken outside, for example, insert the text onto the sky area.

Step

Select the option within your graphic program to add text.

Step

Choose a text color that stands out against the image background color. For a photograph taken at night with a dark background, for example, choose "white" as your text color.

Step

Type the URL into the text area. Adjust the size of the text so that it fills up most of the image background, but does not extend beyond the picture or into the main image details.

Step

Save the image using with a new name, such as photoname-URL.jpg, so that you do not override the original unedited image.

Online URL Addition

Step

Open the web page HTML code where you wish to insert the picture.

Step

Insert the picture within the HTML using the "img src" tag as follows: Replace the word "yorupicture.jpg" with the name of your image.

Step

Add the URL to the image so that when visitors see the URL when they move their mouse over the image using the "alt" tag as follows: http://www.yourwebsiteurl.com

Step

Add an interactive URL to the picture so that when visitors click the image, the URL opens in the browser window. Use the following code which includes both the mouseover and clickable URL within the picture: http://www.yourwebsiteurl.com

Show Comments

Related Articles

How to Embed Flv Video in HTML

How to Embed Flv Video in HTML

Around The Home
Productivity
By: Brandy Alexander
How to Use Javascript to Play an MP3 File

How to Use Javascript to Play an MP3 File

Around The Home
Productivity
By: Michael Carroll
How to Make a Static Web Page

How to Make a Static Web Page

Around The Home
Productivity
By: Alex Smith
How to Convert an Image to HTML Code

How to Convert an Image to HTML Code

Around The Home
Productivity
By: Will Conley
How Do I Make a Logo into a Link?

How Do I Make a Logo into a Link?

Around The Home
Productivity
By: Steve McDonnell
What Is the Difference Between Satellite & RADAR Pictures?

What Is the Difference Between Satellite & RADAR Pictures?

Around The Home
Entertainment
By: Richard Asmus
  • HOW WE SCORE
  • ABOUT US
  • CONTACT US
  • TERMS
  • PRIVACY POLICY
  • COPYRIGHT POLICY
  • Advertise

An error occurred. Try again later.

Thanks for signing up!
© 2018 Leaf Group Ltd. Leaf Group Media

Get great tech advice delivered to your inbox.

Keep your family productive, connected, entertained, and safe.

Please enter a valid email.