How to Make an Image Clickable Using HTML

Sometimes you want to make an image clickable, meaning, you want someone to be able to click on an image and be taken to a page you specify. In other words, you want the image itself to be a link.

Several people have asked me how to make images in their sidebar clickable. Here's how…

How to make an image clickablePhoto by Yandle.

Step 1: Create (or Save) the Image

If you have not already saved the image to your computer, do this first. (If you need to create an image, check out my video tutorial on my blog button post. It shows you an easy way to create simple images.)

Step 2: Upload the Image to Your Server

Using WordPress, you can upload the image via FTP, or, upload the image via your Dashboard. Here's how:

  1. While logged into your Dashboard, click Media (in the left column).
  2. Choose Add New from the submenu.
  3. On the new page, click Select File. A window will pop up allowing you to navigate to the place where your image is stored on your computer.
  4. Once the image is uploaded successfully, copy the "File URL" (which is automatically assigned). The "File URL" field is located at the bottom of the upload window so just scroll down until you see it. This is your image location URL.

Step 3: Insert the HTML in a Widget

You will need two pieces of information for this step:

  1. The landing page URL. This is the address of the page/post/site where you want the user to land when they click on the image.
  2. Image Location URL. The URL specifying where the image is located (that you obtained in Step 2 above).

To insert the image and make it clickable, slide a Text Widget into your sidebar. (Here's how to use widgets in WordPress).

Paste the following code into the Text Widget. Once it's in there, switch out the bolded URLs below with the two pieces of information you have on hand. Simply paste the URLs between the quotation marks. (Be very careful not to accidentally delete the quotation marks in the process.)

<a href="http://LandingPageURL.com"><img src="http://ImageLocationURL" /></a>

To make the link open in a new window…

If you want the new page to open in a new window you would simply add "target="_blank" to the first piece like so:

<a href="http://LandingPageURL.com" target="_blank"><img src="http://ImageLocationURL" /></a>

That's it! Simple. :)

Comments

  1. Now isn't that weird…just yesterday I added a clickable image to my blogger design, but when I went to do the same thing on WordPress blog I was lost.

    Thank you so very much!!!

  2. Good tip & explanation! Thanks for sharing!

  3. I have found in ONE morning what I could not find in a YEAR elsewhere !!!
    Amy – I want to throw you the biggest party EVER…because you just saved me!
    I spent all morning reading your blog and it just keeps going and going with every next question I have had for which you have all the answers !!
    I am your biggest, newest fan and I will be here daily to take in the ton of info you provide !!
    Sick of all the forums where the instructions are vague and people have a "more or less similar' problem on a different platform!!
    SOOOOOOO happy to have found your blog. GREAT step-by-step easy to follow posts !! Thanks again.

  4. I just have to say a huge "THANK YOU"! I was wondering how to do that!:) I'm really a big fan of your blog … its my "go to" blog when I need questions answered about blogging and html, etc!

  5. Told you I would be back every day now!!
    Just did this and VOILA… worked perfectly !!
    Thanks SOOOOOOO much.

  6. The end result is not what I'm going for at all, your instructions worked PERFECTLY! Now to "pretty" up my image a bit.

    Thanks again Amy ~love the way you explain things!!!

  7. Whoops – I forgot a word..

    HOWEVER….your instructions worked PERFECTLY!

  8. i do it the semi lazy way– i open up a new blog post. pop in the photo. add the link to it and then…..i click on source. that takes you from the viewed page to the html code. i copy that and then stick it in the widget!!! works perfectly. if you want it centered to the sidebar, center the photo before going to the source code.

  9. very useful information….very helpful to the newbies like me
    thanks

  10. I may be missing it in your archives but if you could direct me to how to make your button both a clickable image and have the "grab my button" box showing the code I will be ever so grateful.

  11. Well thank you for taking the time to help out. Got it working!

  12. I just want to say thank you!! You have helped me get a lot of things looking better and helped me get my blog up and running. I really do appreciate the help!

  13. Awesome job Amy! I too had been looking for this info for a while :) Thank you :)

  14. Just what I needed! Thank you for writing in non-programmer speak. :)

  15. I can not believe how easy that was!!! Amy- You are amazing! Just in case anyone needs to know where to find the image location URL in wordpress after you load it…(it took me a few to find it!)… it is under Media Library, then click "edit" below the image, scroll down to "file URL".
    As always- thank you Amy for simple and clear instructions!

  16. It worked, but the url shows up above the image. Did I do something wrong ?

  17. Thank's a lot. You saved my day. :)

  18. HI Amy,
    Your blog is SO helpful to me! How would I make the pages title use a custom button instead of the premade one in my theme?

  19. This info is all over google :) But its very helpful. Stumbled accros your blog when i was messing around on w3schools site. If you all need some more info google w3schools, theyve got everything to know :D I think they have an online class thing as well thats free, it gives you a real certificate that can be used in the real world. Also may i ask whos hosting this wordpress blog?

  20. So clear and concise! Had it done in a second :)

    You rock!!! Lots ;)

  21. Thank you so much for these clear and helpful directions. They were so easy to follow. You saved me a lot of searching on the internet.

  22. I thought I did this, but when clicked, it shows up as a 404 error on my blog.

  23. …and I followed the How to Make An Image Clickable…post directions.

  24. It's at http://coffeehousemom.com/ sidebar.

    • Just looks like you forgot to paste in your affiliate link into the HTML. If you look at the widget, you'll see: a href = " "

      Your affiliate link should go between the quotes there.

      • 6th time's the charm! I thought I was doing that, until I realized I was copying the entire text (not just the affiliate code) in the box. I'll be more aware next time. Thank you for your kindness, Amy. I purchased mine and look forward to the back-to-school tips.

  25. I'm looking at Rhonda's comments and your questions … and I'm wrestling with making an image clickable. In the post body/text, I got it to work using the html link from Amazon. I also followed the post directions (LOVE how clear you are!) about dragging a text widget and inserting the 2 pieces of info to make a clickable image. BUT … I thought the widget would show up in the sidebar (Which it didn't, and I really didn't want it to), but I'm trying to get the image in the post body to be clickable. Where do I put that "html text with the 2 pcs" now saved in the widget, so that the pic in the post is clickable? RIght now I just have the picture linked to the Amazon page (not via my associate code) so that it doesn't end up "nowhere."
    http://www.juliesanders.org/2012/08/prayers-from-the-pews-teri-lynne-underwood.html

    • You're pasting HTML, so you need to make sure you're putting it in the HTML tab not the Visual tab in your Post window. (Look at the top right of the box where you enter your post and you'll see the Visual and HTML tabs. Just click on "HTML" to click over and you can put the HTML code in there.) Does that help?

  26. Thank you – This was so helpful…I was just able to put a clickable image to my new book on Amazon!!!
    You are awesome!

  27. This was soooo simple! I love your tips Amy! Thanks for sharing :-)

  28. Thank you so very much for this. I too just couldn't get this right on wordpress! I tweeted this tip because I suspect this confuses a lot of people! Thank you again :)

  29. Thank you! Thank you! Worked like a charm. Especially for the tip about getting it to open on a new page. I need to snag that chunk of html for a couple other places too!

  30. Great info and well informed. Just did my and very easy too, just copy and paste! That was it. Thanks again.

  31. Thank you.

  32. That was really fun! Thanks so much for all the good information, Amy!

  33. Thanks for posting easy to understand directions and simple copy/paste example! It is fun to have an idea, learn how to do it and immediately apply it!

  34. "target="_blank" this was all that was missing. Thank you so much.

  35. thanks for the help. I did exactly what you instructed, but I have one more question.. Is there some more code to add to make the logo center aligned? I made it clickable and all, but it's off the the side..

  36. thank you …. how about the design ?

  37. Superb… Got all the answers I needed. Thanks!

  38. Thanks for the tip. I am putting up some pictures from my CDT 1500 mile hike and needed to know how to make images click through to links. This article was concise and very helpful.

  39. Excellent and useful info. Well, opening in a new window is better. Thanks for sharing the and tweeted :)

  40. This was really helpful. Thanks, Amy!

  41. You are a life saver, thanks so much! Such an easy post to follow and I had managed to do this in 30 seconds, something which on my own would have taken hours :) Will definitely be revisiting your site.

  42. I have done this and absolutely nothing shows up. I don't what could be wrong. The only thing that shows up on my site is the title words "Our Sponsors". Nobody else ever have this issue?

    • Isa, do you have a link to the post where it's not working? It sounds like the image is not being pulled which makes me think you might not be using the correct image URL.

      • Actually it was for an affiliate link but the company doesn't have affiliate links so they just track where the traffic came from. I only got the picture but I think you are right. The wordpress image url didn't work at all. I had to use photobucket to get a usable link. I was able to make it work now. It is the Bee Mine ad on my website. Thanks for following up.

  43. Great post, thanks for the info… it worked a treat

Leave a Comment

*

x
Sign up for my useletter!
  • Tips
  • Tools
  • Tutorials

Type your email and hit enter: