Friday, August 3

How to-make Image Links that glow






This tutorial will tell you how to make your own image link to put up on your blog or website .

1) For an image link you are required to have the desired 'link' as well as the the 'image' . Note that the img src should be a link from the internet and not from your computer's folder .

It should not be like this : img src="C:\Users\...image.jpg" .


2)If your desired image is already on the internet , skip this step .
To upload your image on the internet and make it usable , I prefer and recommend you to use google picasa  or any of these 2 sites - Imgur and Minus

Also keep in mind that the image you will choose , cannot be resized after becoming an image link . For resizing the image before hand to avoid any disruptions , go to Picresize .

3)Once you have uploaded the image , you can just copy the code below and paste it in your HTML code of your blog .

<a href="----YOUR---- DESIRED ---LINK--- HERE----">
<img src="-----YOUR----- IMAGE ----LINK------ HERE----" </a>




EXAMPLE :







GLOWING IMAGE LINK 


• For a glowing image link , you simply have to copy the code below .

• If you want to increase the glowing effect on mouseover , just replace the 0.8's and 80's with your required       opacity percentage . Lesser the number , more the glow effect .

• Note that the no.s that you may change must be identical i.e. 0.4 and 40 , 0.6 and 60 and not like 0.4 and 60 .



<a href=" ----YOUR---- DESIRED ---LINK--- HERE---- ">
<img class="glow" img src=" -----YOUR----- IMAGE ----LINK------ HERE---- "  border="0" onmouseout='this.style.opacity=0.8;this.filters.alpha.opacity=80' 
onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' style='opacity:0.8;filter:alpha(opacity=80)'/>
</a>




EXAMPLES -


Hope all the information provided in the post is sufficient . If you have any question feel free to ask them in the comments or send me an email .

No comments:

Post a Comment