Easy steps to create great rollover effect on blogspot
Oct 6, 2016
The Rollover image effect is one in which two images swaps itself, the first image changes to another image (called rollover image) on mouse hover and get back to original image on mouse out. To display rollover effect without delay, the rollover image pre-loaded at instance of pageloading. The onMouseOver and onMouseOut are two registered attributes of the link tag are used to make this functional.
Demo: Three rollover image are created here to better understanding the effect. To see effect, Please place mouse pointer over image.Go Here
Step 1. Change the colored texts as it follows:
URL ADDRESS
One can also place a desired url(link) in the rollover image (on-click user sent to the placed url).
Example, my blog address: (Cross posted:https://www.tauren-idus.blogspot.com)
URL OF THE FIRST IMAGE GOES HERE
Change the green text twice with the URL address of the image which will appear before you hover over it
URL OF THE SECOND IMAGE GOES HERE
Replace the text in red once with the url of the image that will appear when the cursor(mouse pointer) hovers over it.
Your code is ready to use.
Step 3. Putting code where you need
Now you can paste your image inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.
You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.
Ask author by contacting vial google plus.
Demo: Three rollover image are created here to better understanding the effect. To see effect, Please place mouse pointer over image.Go Here
Making Rollover Image Effect
It is very easy to create such swift and spectacular image effect (called rollover effect). This below little bit of code use to create rollover. Follow these simple steps to create the rollovers.
Step 0. Copy the below code and paste it in post editor.<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>
Step 1. Change the colored texts as it follows:
URL ADDRESS
One can also place a desired url(link) in the rollover image (on-click user sent to the placed url).
Example, my blog address: (Cross posted:https://www.tauren-idus.blogspot.com)
URL OF THE FIRST IMAGE GOES HERE
Change the green text twice with the URL address of the image which will appear before you hover over it
URL OF THE SECOND IMAGE GOES HERE
Replace the text in red once with the url of the image that will appear when the cursor(mouse pointer) hovers over it.
Your code is ready to use.
Step 3. Putting code where you need
Now you can paste your image inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.
You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.
Ask author by contacting vial google plus.