How do I make the picture link to an external site, but have it open into a new window?
Some think this is not a good idea. This post is not addressing that. This is simply a post on how to open an image that is linked to another site in a new window.
This is the code that does that:
<a href="URL" title="TITLE"><img src="IMAGE URL" border="0" width="xx" height="xx" alt="Description"></a>And here is the code with the information plugged in:
<a href="http://seaside-sharon.blogspot.com/" title="Seaside Sharon"><img src="http://farm4.static.flickr.com/3117/2489901121_35e9239f99.jpg" border="0" width="254" height="45" alt="Seaside Sharon header"></a>Here is the result of using that code.
great help
ReplyDeleteHi Annie, I just want to thank you for putting up the code for this. I maintain a Wordpress blog and it makes image links open in a new window automatically for me, but for some reason, it wasn't working today. Had to do it manually and this helped a lot!
ReplyDeleteVery well lesson you have given here for creating hyperlink image using simple example.
ReplyDeleteThank You Happy Holiday!
ReplyDeleteFrom Jvtur T
Global Consumer Network
Happy New Year!!! to all BlogU
I've been wanting to try this and good thing that I found this link. I'm opening up a blog in a month and this would be really helpful to me. Looking forward to see more tips and information here! :)
ReplyDeleteVery nice. Awesome code as usual!!!!
ReplyDeleteNew Condos in Toronto
Useful piece of code. Thanks
ReplyDeleteI find most of the comments on this forum very useful. Thanks to all contributors!
ReplyDeleteThanks, i use in my site!
ReplyDeleteGreat post.. Very useful.. Thanks for sharing this..
ReplyDeleteThanks again as always Annie! Your html tips are always helpful. :)
ReplyDeleteI really enjoyed reading this post, I was just wondering do you trade featured blog posts. Thanks for sharing your tips with others also for me a big things.
ReplyDelete@Jim, Thanks! About the featured blog posts...no, I haven't done that. I just do my own thing.
ReplyDeleteWow very useful HTML tips thannksa bunch make money with no money
ReplyDeleteYou've got some helpful tips in here. I have been browsing the net on this kind of matter and thank you it surely answers my question. Hope to find other question that bothers my head in your site. Thanks!
ReplyDeleteThanks for a great tip.
ReplyDeleteI've been wanting to try this and good thing that I found this link. I'm opening up a blog in a month and this would be really helpful to me. Looking forward to see more tips and information here! :)
ReplyDeletevery nice post, thanks for these tips
ReplyDeleteHi
ReplyDeleteThanks for the help I would apply this.
But Why have you not applied in your Blog ... here!!!
Great tips as always Annie! Thanks for making it very easy to follow for us HTML newbies :)
ReplyDeleteThanks for sharing this. I have been trying to add links this way to contributors of my site. I still need the link to their logo tho correct? Thanks
ReplyDeleteI've always wanted to do this in my blog but I just didn't know how to. This post is actually a great help and I owe you thanks! Having images in your post is really a plus point especially if it's linked to another site and opens up in new window.
ReplyDeleteThis is a nice trick. Thank you for sharing this >:D<
ReplyDeleteOoh so that's how you do it. It's a little trickier than I thought (thought it would just be copy and paste) but I got it to work. Thank you!
ReplyDeleteSharing this simple tutorial on how to open an image with a link to other site is very helpful for all the beginners. Yes, it really helps a lot. Thanks!
ReplyDeleteIt's a little trickier than I thought, but I got it to work. Thank you!
ReplyDeletethanks for info
ReplyDeleteI was looking for same thing and finally I found it here. You have resolved my problem.
ReplyDeletei will try it on my website www.dzzik.com
ReplyDeleteThank you once again, The little codes was super helpful. I figured out how to switch the image to a new one, so I'm including everything from your remarkable thoughts.
ReplyDeleteThis site is a must for newbies wanting to try HTML. You make it look simple and very easy for us to execute those commands. It's a huge help. Thank you so much. :)
ReplyDeleteI'm always looking for something new in HTML because as an IT student I have to be resourceful and I have to learned different tags in HTML and soon on css, php, javascript and jquery.
ReplyDeleteThanks,
ReplyDeleteYour blogger theme is cool :)
it is probably one of the first html tricks that I learned way back...
ReplyDeletenice, thanks :)
ReplyDeleteThese were really great information given by you, I really appreciate your post, well I think that there is also a way to do this using JavaScript, which gives you more options on the appearance of the new window.
ReplyDeletewall coatings specialist
Interesting post, thanks for your tips and insight.
ReplyDeleteI actually remember working in FrontPage 2000 or something ike that in design mode, then looking in the code mode looking for changed stuff :) Ahh, the good times :)
ReplyDeleteThanks been trying to do that same exact thing on our boating blog. Worked perfectly when I justed tested it out. Thanks and Happy Holidays!
ReplyDeleteThanks for sharing informative content. I will definitely get benefit from it.
ReplyDeletegreat article – thanks for sharing
ReplyDeleteI tried this and it worked perfect! Thanks for the detailed, informative and effective post.
ReplyDeleteI tried it on one of my sites and it worked. Thanks.
ReplyDeleteThat's a brilliant post! Thanks! I'll do smth like this at my personal site!
ReplyDeleteSometimes i forgot with above code because I rarely use it, your post reminded again.
ReplyDeleteYour blog is very informative. I use a lot of your codes here and it works for me. I am looking forward for new codes from you. You've been such a great help. This is truly a blogger's university.
ReplyDeleteThe classic html code, easy but very useful.
ReplyDeleteDon't you think so?
I've been wanting to try this and good thing that I found this link. I'm opening up a blog in a month and this would be really helpful to me. Looking forward to see more tips and information here! :)
ReplyDeleteI really like this post.. Great job!!!
ReplyDeleteThanks for the info. It's the little things like this we often miss. I would prefer to keep people on my pages longer, if possible, so I copied this info and placed in a notepad.
ReplyDeleteThank you.
Short and sweet!
ReplyDeleteI hope to see more codes for 2011. It's exciting to try new ones to reinvent my blog. You've been a great help! Thanks! :)
ReplyDeleteIf you want the image to open in a new window don't you have to add target="_blank" to the link tag?
ReplyDeletecloth diapers
Been trying to do this for a while luckily this post helped me out with the html. Thanks!
ReplyDeleteHi Annie,
ReplyDeleteI will promote your templates in my collection blog. http://www.thebloggertemplates.com
Regards
Eva
Cheers for that, I already knew how to do it but I'll pass on this link so that I don't have to explain it to others anymore. You have done a much better job than I seem to. Thanx
ReplyDeleteThis is the first time I-ve found your blog! Really interesting reading and I will continue to show up here :)
ReplyDeleteThenks for your post, this very help me...
ReplyDeleteThis is what I was looking for. Short and sweet. Thanks for the share.
ReplyDeleteHyperlink image to open new window, i have done this many times, and i made many mistakes, the simple codes really work well.
ReplyDeleteGreat information for us all, many many thanks
ReplyDeleteHey Annie
ReplyDeleteThanks for the code, this really useful. What I usually do is to use the form that Wordpress gives- it already asks for the link and if you want it to be opened in a new page or not.
best,
Tom
I would have used the underscore blank target attribute, but good tip none the less
ReplyDeleteThank you for sharing, will be sure to use this for my site!
ReplyDeletethanx, this helps. this whole stuff is new for me.
ReplyDeleteThanks for the code snippet! I have been looking for this.
ReplyDeleteThis code is excellent, it's great as people who are reading blogs who are not computer savvy, they will not lose your website so they can easily continue to read the rest of your article. Thanks alot Annie.
ReplyDeleteThanks for posting this code... Thank you for sharing!
ReplyDeleteVery nice Annie, thanks a lot.
ReplyDeleteThis is so cool, thanks for sharing.
ReplyDeleteThanks for the code, this really useful. What I usually do is to use the form that Wordpress gives- it already asks for the link and if you want it to be opened in a new page or not.
ReplyDeleteThanks for the code !
ReplyDeleteAfter a tough 4 years learning about internet marketing it is great to be able to still find useful information as there is on this blog.
ReplyDeleteI am most impressed with the content and especially the code for the links.
Great stuff keep up the good work.
Steve
Images are crucial to make something worth off...
ReplyDeleteand your post guides it..nice one!
Hey nice tip thanks
ReplyDeleteVery nice post, thank u!
ReplyDeletethanks for sharing it
ReplyDeletethanx for the code!
ReplyDeleteuseful indeed, thanks
ReplyDeleteThis is just perfect blog! Thanks man, i like it, please contact me at my website...
ReplyDeleteNice article. Now i can actually customize my site with the help of this article. I use to have a plain site and customizing it has been a problem to me. Now i know its css3 that could help me make things possible. thanks for this article..
ReplyDeleteseen on post
Shouldnt you put in target="_blank" as an attribute in the link?
ReplyDeleteThe code's really helpful. In the past I stick to pure text in Blogger because I couldn't figure out how to change it up.
ReplyDeleteSheesh! Didn't realize that what I've been trying to do for the past hour was so easy! Thanks for the quick tutorial and the easy copy-paste.:)
ReplyDeleteUsing the target="_blank" attribute opens a new window wile keeping the existing window in another tab.
ReplyDeleteThis is a really useful site. I think it's great how you just give matter of fact techniques on how to use html without the extraneous opinions.
ReplyDeleteFantastically generous of you to make it do follow too!
this stuff is all so new to me, and when people like you come along you make everyone else's life easier! Thank you!
ReplyDeleteI tried this out and it didn't work right away but it turns out I was copying and pasting wrong. LOL didn't think I could mess up something like just copying and pasting!
ReplyDeleteGreat post. Exactly what I was looking for. Following you.
ReplyDeleteAdmin
PakLinks
Really nice tips you shared here with us.
ReplyDeleteThanx! The code works great! And the way how to imply it is understandable even for me. Thanks one more time.
ReplyDeleteNice tip, still learning html stuff, and this blog is great resource for that.....thanks again:)
ReplyDeletethank you for the tips! helpful code and easy to apply!
ReplyDeleteWow i never knew that we can do this. I tried it out, it worked out just fine...Thanks!!!!
ReplyDeleteI learned it while in school, in my computer course. This is very useful.
ReplyDeletethanks man more tutorials to come!
ReplyDeleteVery handy bit of code, thanks.
ReplyDeleteNice posting.Very informative and interesting,thanks for sharing with us.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletethanks for the information
ReplyDeleteCool Information
ReplyDeleteThis is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. Youve got a design here thats not too flashy, but makes a statement as big as what youre saying. Great job, indeed.
ReplyDeleteI love the information you have here thank you so much!!!
ReplyDeleteGreat info. I think there is also a way, using the target attribute, to open a link in a new tab when using Firefox. Simply insert target="_blank" after the URL attribute.
ReplyDeleteIn title saying that open in new window, but in code no target="_blank" for the result, it will not open in new window,
ReplyDeleteit should be
< a href="link" target="_blank" >image link here< /a >
[no space]
am i wrong, correct plz.
Fantastic advice - I always wanted to do this and to give the exact code has really helped, thanks.
ReplyDeleteThanks for the post. Great Advice. I have looked at doing this with my site.
ReplyDeleteThe link is bound to open in a new window, isn't it? Well, if it's so, the anchor text should have a target="blank"
ReplyDeletehi everybody,
ReplyDeleteme too thinking the same what Alex shared us:
In title saying that open in new window, but in code no target="_blank" for the result, it will not open in new window,
it should be
< a href="link" target="_blank" >image link here< /a >
[no space]
thanks indeed
thanks for the info, ıt's very useful
ReplyDeleteI will use this code on my website .
ReplyDeleteThanks for the post. Great advice.
ReplyDeleteThanks for the dofollow link...cheers!
ReplyDeleteNice post...I used Job suggestion and it works fine.
ReplyDeleteWow, this is really informative. I prefer it when a writer talks about ONE aspect of HTML vs a whole section of various features... that way when I'm searching for a specific feature (which I often do) I can find exactly what I'm looking for. Thank you. :)
ReplyDeletehaving an image linked to another url and have that image go to that url when clicked used to drive me nuts.. since all coding tutorials seem to lump a gazillion bunch of tutorials at once. but not anymore. it is tutorial posts such as these certainly help a lot of "not so technology savvy" types like me.
ReplyDeleteI've been looking for a site with instructions on how to do this for a couple days now. You're instructions are the clearest and easiest to follow. Thank you!
ReplyDeletethnx for the codings, i really needed them
ReplyDeletewell..quite useful thing. for those who didn`t knew it. :) no offence.
ReplyDeleteThis code is good because it lets the visitor keep your website up in another window, instead of them moving on to another site when they click the image. Good Post!
ReplyDeleteThanks for the coding! I apprecaite it.
ReplyDeleteI'm opening up a blog in a month and this would be really helpful to me. Looking forward to see more tips and information here!=
ReplyDeleteUmm..don't you think you should use target="_blank"?
ReplyDeleteGreat post.. Very useful.. You're instructions are the clearest and easiest to follow Thanks for sharing this.
ReplyDeleteThanks for the cool blog information.
ReplyDeleteUseful bit of code, thanks!
ReplyDeleteIt's important to remember to have a textual link too though....although as you said - we're not discussing that one :)
Thanks for the code. I have been looking for this for a while
ReplyDeleteThanks a lot this help me much~
ReplyDelete-----------------------------------------------
Welcome to visit http://thesc2guides.com for the sc2 guides
Good Html tips. Nice shortcut here. Thanks.
ReplyDeleteExcellent article and blog in general, added your blog to bookmark. Waiting for new articles =)
ReplyDeleteNice. Its useful post.
ReplyDeleteAwesome! I was trying to figure out a similar problem the other day but now I've got it licked. Great site too... I'll have to make sure to visit again.
ReplyDeleteThanks for the code iam checking now great stuff here.
ReplyDeleteVery interesting information! Thank you!
ReplyDeleteThanks God I find this. I have tried to image hyperlinked to open in new window many times and never succeed.
ReplyDeleteThanks for this info
Thank you for providing this in such an easy to understand manner. I don't have the time or energy to devote to learning a bunch of code, so your website makes it really easy to find what I need quickly and just move on!
ReplyDeleteThis code is good because it lets the visitor keep your website up in another window, instead of them moving on to another site when they click the image. Good Post!
ReplyDeleteThis looks actually a button control with click and command events.
ReplyDeletevery wonderful post it helps to everyone.
ReplyDeletetry to visit our site->
http://nitricoxidesupplementsreview.org
Thanks for the useful guides! Keep up the good work!
ReplyDeletethanks bro...
ReplyDeleteThanks for the useful guides. It is really very helpful for me and hope for others also. Keep it up.
ReplyDeleteYou always have some good HTML tips. Now to find a use for this particular HTML.
ReplyDeleteThanks for this information . This is great article .
ReplyDeleteI also have had some troubles in the past about making a hyperlink image, so I went to a site that had a tutorial about it. Maybe you can check it out on Google or something. Thanks for the information.
ReplyDeletegreat post, very usfull
ReplyDeletethank you.
This was very useful. Sites and blogs normaly give you this option but it's always nice to be able to do it yourself.
ReplyDeleteThanks for the info post. Really helps.
ReplyDeleteThanks you very much, wonderful news!
ReplyDeleteGreat review of how to make hyperlink images. Review blogs are very helpful. I wrote a Lavia Design Review a while back. You can see it here:
ReplyDeletehttp://laviadesignreviewdotcom.wordpress.com/
This is good that you have given here for creating hyperlink image using simple example.
ReplyDeleteI am impressed with what you have done. Thanks for the great info mate, this is really helpful.
ReplyDeleteYour blog is very informative. I use a lot of your codes here and it works for me. I am looking forward for new codes from you. Hope you will come up with more....
ReplyDeleteWow, thanks for this code. I love having readers open a link in a new window so that they eventually have to come "back" to my site once they close the window.
ReplyDeleteGood code as ever. I liked it and told my friends about it.
ReplyDeleteI just wanted to say thank you for putting up this code. It worked great fro my wifes blog. Nice of you thanks
ReplyDeleteThanks for the code. I'm not sure I'll want to use this on my site but it's still good to know how to actually do it if I need it.
ReplyDeleteI think this looks like a hyperlink control but is actually a button control with click and command events. Thanks for this tips..
ReplyDeleteI think this looks like a hyperlink control but is actually a button control with click and command events. Thanks for this tips..
ReplyDeletePerfect code snippet. I like the way you always get right to the point without clogging up your post with whys.
ReplyDeleteThanks for the useful information. I am using the code you gave me, and it works perfect.
ReplyDeleteYou have a wonderful and helpful blog!
ReplyDeleteVery Nice. awesome code. Thanks for sharing such useful and helpful information. Its working perfectly fine.
ReplyDeletethanks!very usuful your information!!
ReplyDelete- found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later.
ReplyDeleteThanks a lot! It has always been a problem when you image opens int he same window as the reader goes away from your page and has to come back later.. if he remembers to do so.
ReplyDeleteThanks for the tip!
Very helpful. I have been looking for a way to open images in a new window.
ReplyDeleteI had my photos clickable but the problem is that visitors always leaving my site. with the tutorial above, at least I can now have my photos open in a new window so that my site is still on their browsers -- then visitors will not leave my site.
ReplyDeletei always try to do this in my blog but remained away from implementation. This post is actually a great help and I owe you thanks! Having images in your post is really a plus point especially if it's linked to another site and opens up in new window.
ReplyDeleteDid I miss something? That link opened in the SAME tab. You'd need an target attribute to make it open in a different tab/window.
ReplyDeletethanks for great tutorial very informative
ReplyDeleteYour blog is very informative. I use a lot of your codes here and it works for me. I hope you will come up with more codes.
ReplyDeletethank you
ReplyDeleteYou always provides new tips with codes to us. I really thank full for your help dear.
ReplyDeleteHey, this is Daniel. This post will be very handy ! However, my question here is how we can use flash in the image which is to be hyperlinked ? It would be very kind of you if you could post the code for flash image as well. Thanks.
ReplyDeleteI was in GREAT need of this code. Thank you SO much!
ReplyDeleteThis is just what I needed for my own site structure (http://towncraft.net)
I have always wondered about the importance of the "title" attribute in images. I have no doubt about the "alt," but does "title" do anything at all?
ReplyDeleteVery nice tips, I have been searching about hyperlink image, thanks.
ReplyDeletecan tell me how to add scroll on site..
ReplyDeleteI was searching for this and you furnish in very few lines, thanks for sharing. I don't have the time or energy to devote to learning a bunch of code, so your website makes it really easy to find what I need quickly.
ReplyDeleteVery helpful, concise yet thorough post on getting my images to open in a new window. I'm grateful you always take the time to deliver such an effective code snippet.
ReplyDeleteI've been wanting to try this and good thing that I found this link. I'm opening up a blog in a month and this would be really helpful to me.
ReplyDeleteThank you very much for your tip
ReplyDeleteThank you very much your info
ReplyDeleteI also wanted to do this in my blog, thanks for sharing i will use it.
ReplyDeleteOne of my friend recommend me this blog for getting such nice information and articles. And I really happy to be here.
ReplyDeleteNever thought this would be so easy! Thank you. I'll bookmark your site
ReplyDeleteThink I've been searching an hour and a half for that code. Thanks alot Annie!
ReplyDeletethanks for sharing, great idea, was wondering my self how to do it !!! thanks for sharing
ReplyDeleteThanks for the help I would apply this.
ReplyDeleteBut Why have you not applied in your Blog ... here!!!
Thanks for posting this code... Thank you for sharing.
ReplyDeleteThank you for the code. I needed it too much.
ReplyDeleteJust what I needed. But could you tell me why some people think its a bad idea?
ReplyDeleteVery detailed and useful, cheers
ReplyDeleteI've been searching for how to do this for hours, yours is the only site that just gave me the code so i can copy and paste it. easy enough.
ReplyDeleteThanks for the info. I always have trouble with certain codes.
ReplyDeleteThanks for sharing this informative blog just for free. It is very simple and easy to follow.
ReplyDeleteThanks for the value info..thank you very much.
ReplyDeleteI do need to make one comment. The code you created is perfect for using a picture as a link. However, the question was for the code to open the link in a NEW WINDOW. For that, the code would also need to be written as:
ReplyDeletea href="http://www.com" target="_blank"
You left out the target element which needs to be set to "_blank" (as a default it is set to "_top" which opens the link in the same window)
Never thought this would be so easy! Thank you. I'll bookmark your site
ReplyDelete