Create A Rollover Image Effect - Change Image On Mouseover
Create A Rollover Image Effect - Change Image on Mouse Hover
The rollover image effect is mostly used in a website or even in blogger designing. So how this effect works? When the mouse cursor hover (called mouseover) the default image, that image will change to a new image (called rollover) and reverts back to the original image on mouse out (not hovering).
In simple explanation, there are two images and one image is visible which is the default/original and the second image is hidden which will be shown when the mouse cursor is hovering the original image and the original image will be hidden. Rollover image is preloaded into the page when it is loading, to ensure that the rollovers are displayed quickly. In programming, we can compare it to True or False and If else statement, (something to think huh!?) Also Read: Automatically Add Image Border & Hover Effect o all Blogger Posts
DEMO: Place your mouse cursor on the image below, and see what happene (Don't be shoock!)
All In One SEO Pack for Blogger BlogspotNow you can paste your image with roll over effect inside the blog gadget going to LAYOUT > click on ADD A GADGET > and select HTML/JAVASCRIPT. Paste the code inside the content of the popup window.
You can also add it inside your post or in page by going to NEW POST or NEW PAGE > switch to HTML tab and then paste the code.
Final Words
I hope that this method will help you to add more awesomeness in your blog designs. If you have questions or perkara kindly type it in the comment area and we will discuss it, that's all enjoy!
