October 3, 2015

Make Reflective Image Rollover Without Script

- Advertisement -
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: 
Change The "URL OF THE FIRST IMAGE"
 The first image is the image that shows before you take the mouse over it.

Step 3: 
Change the "URL OF SECOND IMAGE"
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?

Yes
No
Thanks! Your feedback helps us improve blogsupporter.com
Keo Sopherth

I love web and I am a Blogger and Author at Blog Supporter (Siem Reap, Kingdom of CAMBODIA) / www.blogsupporter.com / info at blogsupporter dot com

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

3 comments:

  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?

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

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

    ReplyDelete

*** Although every comment is appreciated, due to time constraints I could not be able to respond for some comment. Remember that comments are regulated and could spend sometimes to appear. All spam comments or "COMMENT WITH HYPERLINK" will certainly be removed. Thanks for recognising!