If you click on the image shown above, it will open a new google page for you.
In this post, we will discuss that how to create a link on image.
Whenever you upload a picture into Blogspot post, BlogSpot automatically stores it to its server and creates a link for it. In my case, the link is:-
I got this information from Edit HTML of editor. If you go to Edit HTML, code will appear very similar to:-
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img border="0" iq="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp" /></a>
</div>
You can see a line as src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp.
It says that image displayed in the blog will be from this source.
Then one more line:-
<a href=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp
It says that when Image will be clicked, open document , https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp
which is the same source image.
Now we want to modify this code, so that when we click on the link, it should open the google page.
Thus we need to modify it as <a href=http://google.com
If we want to open this link in a new browser, we need to use target="_blank" attribute for it. Also, we will add alt attribute, which will help to display a text message in case image line is not available in the server.
Thus, modified code will appear as:-
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.google.com" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank" alt="Google Search" >
<img border="0" iq="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiprdHAMqjIyQ29OrBIGyCD8t9t3LPwXOTngMCiLe4qZr_nRlZ3PHkslIdMOBi2hr7IeUiByL3xF4bs7sR_rIrgP6ShACC1oxymXkCMfqUfb2ksd-JUxieAh2DaVBvi2tKPXZsPdZ1whlr/s320/google.bmp" />
</a>
</div>
More information about basics of creation of a link, Click Here.
I hope this post was not complicated. ;-)
Keep Blogging.
BlueOcean
For Further Reading,
0 comments:
Post a Comment