October 3, 2015

Make Reflective Image Rollover Without Script

Create a change Image when put mouse over
The image will change to another one when you move your mouse over the front one and this is called Rollover Image Effect which called by Helplogger. There are two different images that need to use for this effected change when you put the mouse over and it will back with the first image quickly when you take the mouse out. The images were changed without using flash or script. Otherwise, we use one a simple HTML code.

Create a change Image when put Mouse Over

Let's see this below DEMO

To make this image change "Rollover" You can use the below code:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE" onmouseover="this.src='URL OF SECOND IMAGE'" onmouseout="this.src='URL OF FIRST IMAGE'" /></a>

Changing Instruction Guidance:

Step 1: 
You can change "URL ADDRESS"
URL Address is the option that you can use for any that you want to go. Ex: http://blogsupporter.com

Step 2: 
 The first image is the image that shows before you take the mouse over it.

Step 3: 
The second image is the image that appears when you put the mouse over it and disappear when you take it out.

** The code can use in your HTML Widget sidebar and you use it in the HTML Post/Page.

Credit by: help blogger

    Was this article helpful?

    Thanks! Your feedback helps us to improve blogsupporter.com
    Keo Sopherth Professional Blogger

    Offer a blogger blog, WordPress website development tutorials, and simple search engine optimisation tip with love.

    - Advertisement -
    Advertise Here (330 x 280)
    - Advertisement -
    Advertise Here (330 x 280)

    3 Replies so far - Add your comment

    1. thaks for totorial, i want to use this on my blog, but i can not understand, where i con bet code...

      do you meand on compose format on posting space on blogspot?

      1. Hi Majalah, you can place it in the HTML Code area or place it in your post or Page.....

    2. very interesting! I didn't know about it. Thanks for sharing the code.


    Your comment will be removed if it is a Spam or a comment with a link.