Hyperlink image to open new window
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.
Labels:
Design,
Navigation,
Reader's Emails
345 Comments:
great help
Hi 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!
Very well lesson you have given here for creating hyperlink image using simple example.
Thank You Happy Holiday!
From 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! :)
Very nice. Awesome code as usual!!!!
New Condos in Toronto
Useful piece of code. Thanks
I find most of the comments on this forum very useful. Thanks to all contributors!
Thanks, i use in my site!
Great post.. Very useful.. Thanks for sharing this..
Thanks again as always Annie! Your html tips are always helpful. :)
I 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.
@Jim, Thanks! About the featured blog posts...no, I haven't done that. I just do my own thing.
Wow very useful HTML tips thannksa bunch make money with no money
You'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!
Thanks for a great tip.
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! :)
very nice post, thanks for these tips
Hi
Thanks 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 :)
Thanks 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
I'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.
This is a nice trick. Thank you for sharing this >:D<
Ooh 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!
Sharing 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!
It's a little trickier than I thought, but I got it to work. Thank you!
thanks for info
I was looking for same thing and finally I found it here. You have resolved my problem.
i will try it on my website www.dzzik.com
Thank 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.
This 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. :)
I'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.
Thanks,
Your blogger theme is cool :)
it is probably one of the first html tricks that I learned way back...
nice, thanks :)
These 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.
wall coatings specialist
Interesting post, thanks for your tips and insight.
I 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 :)
Thanks been trying to do that same exact thing on our boating blog. Worked perfectly when I justed tested it out. Thanks and Happy Holidays!
Thanks for sharing informative content. I will definitely get benefit from it.
great article – thanks for sharing
I tried this and it worked perfect! Thanks for the detailed, informative and effective post.
I tried it on one of my sites and it worked. Thanks.
That's a brilliant post! Thanks! I'll do smth like this at my personal site!
Sometimes i forgot with above code because I rarely use it, your post reminded again.
Your 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.
The classic html code, easy but very useful.
Don'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! :)
I really like this post.. Great job!!!
Thanks 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.
Thank you.
Short and sweet!
I 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! :)
If you want the image to open in a new window don't you have to add target="_blank" to the link tag?
cloth diapers
Been trying to do this for a while luckily this post helped me out with the html. Thanks!
Hi Annie,
I 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
This is the first time I-ve found your blog! Really interesting reading and I will continue to show up here :)
Thenks for your post, this very help me...
This is what I was looking for. Short and sweet. Thanks for the share.
Hyperlink image to open new window, i have done this many times, and i made many mistakes, the simple codes really work well.
Great information for us all, many many thanks
Hey Annie
Thanks 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
Thank you for sharing, will be sure to use this for my site!
thanx, this helps. this whole stuff is new for me.
Thanks for the code snippet! I have been looking for this.
This 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.
Thanks for posting this code... Thank you for sharing!
Very nice Annie, thanks a lot.
This is so cool, thanks for sharing.
Thanks 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.
Thanks for the code !
After 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.
I 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...
and your post guides it..nice one!
Hey nice tip thanks
Very nice post, thank u!
thanks for sharing it
thanx for the code!
useful indeed, thanks
This is just perfect blog! Thanks man, i like it, please contact me at my website...
Nice 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..
seen on post
Shouldnt you put in target="_blank" as an attribute in the link?
The 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.
Sheesh! 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.:)
Using the target="_blank" attribute opens a new window wile keeping the existing window in another tab.
This 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.
Fantastically 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!
I 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!
Great post. Exactly what I was looking for. Following you.
Admin
PakLinks
Really nice tips you shared here with us.
Thanx! The code works great! And the way how to imply it is understandable even for me. Thanks one more time.
Nice tip, still learning html stuff, and this blog is great resource for that.....thanks again:)
thank you for the tips! helpful code and easy to apply!
Wow i never knew that we can do this. I tried it out, it worked out just fine...Thanks!!!!
I learned it while in school, in my computer course. This is very useful.
thanks man more tutorials to come!
Very handy bit of code, thanks.
Nice posting.Very informative and interesting,thanks for sharing with us.
thanks for the information
Cool Information
This 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.
I love the information you have here thank you so much!!!
Great 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.
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]
am i wrong, correct plz.
Fantastic advice - I always wanted to do this and to give the exact code has really helped, thanks.
Thanks for the post. Great Advice. I have looked at doing this with my site.
The 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"
hi everybody,
me 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
I will use this code on my website .
Thanks for the post. Great advice.
Thanks for the dofollow link...cheers!
Nice post...I used Job suggestion and it works fine.
Wow, 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. :)
having 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.
I'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!
thnx for the codings, i really needed them
well..quite useful thing. for those who didn`t knew it. :) no offence.
This 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!
Thanks for the coding! I apprecaite it.
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!=
Umm..don't you think you should use target="_blank"?
Great post.. Very useful.. You're instructions are the clearest and easiest to follow Thanks for sharing this.
Thanks for the cool blog information.
Useful bit of code, thanks!
It'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
Thanks a lot this help me much~
-----------------------------------------------
Welcome to visit http://thesc2guides.com for the sc2 guides
Good Html tips. Nice shortcut here. Thanks.
Excellent article and blog in general, added your blog to bookmark. Waiting for new articles =)
Nice. Its useful post.
Awesome! 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.
Thanks for the code iam checking now great stuff here.
Very interesting information! Thank you!
Thanks God I find this. I have tried to image hyperlinked to open in new window many times and never succeed.
Thanks 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!
This 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!
This looks actually a button control with click and command events.
very wonderful post it helps to everyone.
try to visit our site->
http://nitricoxidesupplementsreview.org
Thanks for the useful guides! Keep up the good work!
thanks bro...
Thanks for the useful guides. It is really very helpful for me and hope for others also. Keep it up.
You always have some good HTML tips. Now to find a use for this particular HTML.
Thanks for this information . This is great article .
I 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.
great post, very usfull
thank 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.
Thanks for the info post. Really helps.
Thanks you very much, wonderful news!
Great 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:
http://laviadesignreviewdotcom.wordpress.com/
This is good that you have given here for creating hyperlink image using simple example.
I am impressed with what you have done. Thanks for the great info mate, this is really helpful.
Your 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....
Wow, 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.
Good code as ever. I liked it and told my friends about it.
I just wanted to say thank you for putting up this code. It worked great fro my wifes blog. Nice of you thanks
Thanks 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.
I think this looks like a hyperlink control but is actually a button control with click and command events. Thanks for this tips..
I think this looks like a hyperlink control but is actually a button control with click and command events. Thanks for this tips..
Perfect code snippet. I like the way you always get right to the point without clogging up your post with whys.
Thanks for the useful information. I am using the code you gave me, and it works perfect.
You have a wonderful and helpful blog!
Very Nice. awesome code. Thanks for sharing such useful and helpful information. Its working perfectly fine.
thanks!very usuful your information!!
- 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.
Thanks 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.
Thanks for the tip!
Very helpful. I have been looking for a way to open images in a new window.
I 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.
i 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.
Did 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.
thanks for great tutorial very informative
Your 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.
thank you
You always provides new tips with codes to us. I really thank full for your help dear.
Hey, 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.
I was in GREAT need of this code. Thank you SO much!
This 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?
Very nice tips, I have been searching about hyperlink image, thanks.
can tell me how to add scroll on site..
I 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.
Very 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.
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.
Thank you very much for your tip
Thank you very much your info
I also wanted to do this in my blog, thanks for sharing i will use it.
One of my friend recommend me this blog for getting such nice information and articles. And I really happy to be here.
Never thought this would be so easy! Thank you. I'll bookmark your site
Think I've been searching an hour and a half for that code. Thanks alot Annie!
thanks for sharing, great idea, was wondering my self how to do it !!! thanks for sharing
Thanks for the help I would apply this.
But Why have you not applied in your Blog ... here!!!
Thanks for posting this code... Thank you for sharing.
Thank you for the code. I needed it too much.
Just what I needed. But could you tell me why some people think its a bad idea?
Very detailed and useful, cheers
I'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.
Thanks for the info. I always have trouble with certain codes.
Thanks for sharing this informative blog just for free. It is very simple and easy to follow.
Thanks for the value info..thank you very much.
I 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:
a 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