In most of the blogs or websites we usually see many images having rollover effect. By adding rollover effects to the images, the image changes to a different image when we hover the cursor over the image or picture. This effect looks cool and attractive on blogs/websites which makes the blog look beautiful. Adding images with Rollover effect in a blog post makes the post interesting for the visitors and thus helps in getting more traffic.
We can also make such images as a clickable link on the blog posts as discussed below.
Lets us see the process of adding rollover effect to the images posted on blog.
The code required for Rollover effect is mentioned below.
<a href="TARGET URL GOES HERE"><img src="FIRST or DISPLAY IMAGE URL GOES HERE" onmouseover="this.src='SECOND or HOVER IMAGE URL GOES HERE'" onmouseout="this.src='FIRST or DISPLAY IMAGE URL GOES HERE'" /></a>
Before using the above code, we need to update the highlighted URLs with actual paths.
1. TARGET URL GOES HERE : It should be replaced with the URL address that we want to navigate to when the image is clicked. This makes the image clickable link.
2. FIRST or DISPLAY IMAGE URL GOES HERE : It should be replaced with the URL address of the image that we want to be displayed when the cursor is not on the image.
3. SECOND or HOVER IMAGEE URL GOES HERE : It should be replaced with the URL address of the image that we want to be displayed when the cursor is placed over the image (hover).
Example: This example shows the image Rollover effect
Image1: This will be displayed when the cursor is not placed on the image.
Image2: This will be displayed when the cursor is placed on the image.
We can also make such images as a clickable link on the blog posts as discussed below.
Lets us see the process of adding rollover effect to the images posted on blog.
The code required for Rollover effect is mentioned below.
<a href="TARGET URL GOES HERE"><img src="FIRST or DISPLAY IMAGE URL GOES HERE" onmouseover="this.src='SECOND or HOVER IMAGE URL GOES HERE'" onmouseout="this.src='FIRST or DISPLAY IMAGE URL GOES HERE'" /></a>
Before using the above code, we need to update the highlighted URLs with actual paths.
1. TARGET URL GOES HERE : It should be replaced with the URL address that we want to navigate to when the image is clicked. This makes the image clickable link.
2. FIRST or DISPLAY IMAGE URL GOES HERE : It should be replaced with the URL address of the image that we want to be displayed when the cursor is not on the image.
3. SECOND or HOVER IMAGEE URL GOES HERE : It should be replaced with the URL address of the image that we want to be displayed when the cursor is placed over the image (hover).
Example: This example shows the image Rollover effect
Image1: This will be displayed when the cursor is not placed on the image.
By adding the URLs of the above images makes the code look as below (Rollover image code).
<a href="https://www.google.co.in/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1M5HdgllprtOBRGqy0mi5JlZPD2PRdIWizpj40F8ryj8vsMW0BpUzmMJJjb7FlXJZEBchvHx_iyRS3x9LrpXk3wL1_klAjoC1NooQRjMYBYSokZhh4JUoK8qmlkBpjByEO1D0YYKBjF68/s1600/image.jpg" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdCnz2lo-fL9tgunz-MxqM9WWxO6WIyCYo-NloFfGlpCMEVjH5L-nVZ08iHZkYCTccis7wpMpTsi0tbrw_YHE3yaDgRfXrj67DnZtwD4IQH68WyC6AA_WNhMJiEuihkhWhYikcEh_Z7Yth/s1600/image2.jpg'"
onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1M5HdgllprtOBRGqy0mi5JlZPD2PRdIWizpj40F8ryj8vsMW0BpUzmMJJjb7FlXJZEBchvHx_iyRS3x9LrpXk3wL1_klAjoC1NooQRjMYBYSokZhh4JUoK8qmlkBpjByEO1D0YYKBjF68/s1600/image.jpg'" /></a>
Now add the above code in the blog post where we want this rollover image to be displayed (We need to add the code under the HTML view of the blog post as the we are using the HTML code).
Then the Rollover image look like the one below on the blog.
Place the cursor on the image to see the rollover effect.
If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.
0 comments:
Post a Comment