Rollover image is a design feature where an image changes when your mouse floats over it. Think of a light bulb that turns on and off when you move your mouse cursor to that part of a page. When a page loads, rollover images are loaded into it to ensure that the rollover effect is quickly displayed.

This was implemented using JavaScript which is quite simple with only a little bit of script involved. For creating rollover images, functional, onmouseover and onmouseout attributes are used to create a link tag. The code is then added to a blog gadget or a new message. However, it turned out to have a number of disadvantages, which is why many web developers use a CSS-only method.

 css rollover image "border =" 0 "height =" 200 "src =" https://3.bp.blogspot.com/-JOfTRWkg06Y/V_z6BpgKHjI/AAAAAAAAL3M/vF_yc-oNkd8BjbQOElXOiHEx7Jj93k25wCLcB/s200 /css-rollover-image-change-on-hover.png "title =" CSS Rollover Image Effect "width =" 200 "/> </div>
<p> </p>
<h2> Create a rollover image with CSS </h2>
<p> here how to implement a <b> rollover image </b> using CSS Before you get started, we need two images ready, one in the original / static state and the rollover status. </p>
<h4> The Image </h4>
<p> Place both the static and the <b> rollover image </b> in one file and make sure the rollover image is placed on top of the static point.To achieve the rollover effect, we write a code to represent the static display image and crop the float image, so that only one image status will be displayed at a time honored. </p>
<p> For this tutorial, we use the following as a CSS rollover image. </p>
<div class=  html rollover image "border =" 0 "src =" https://1.bp.blogspot.com / -NtrjKUd-0fs / V_ewyJEdB_I / AAAAAAAAL28 / D3OfCvvRv4oADehdckX0d919xFeggWZOwCLcB / s180 / rollover image -light-bulb-on-off.png "title =" CSS Rollover Image "/> </div>
<p> </p>
<h4> Creating an HTML anchor Element for our image </h4>
<p> Instead of the image file in a tag we will display it as a background image of an (anchor) tag.This is the HTML we have to add:  </p>
<blockquote class=

<a class = "rolloverimage" href = " #URL " > Rollover Image

Note: if you want to make click on the image, replace #URL with the URL of the webpage you want to link to.

Use CSS to Background image

To create the mouse over-image effect, we create & # 39; I use the: hover CSS pseudo-class, and then we use the properties ap background-position and set the values ​​to 0 0 to move the background image to the upper-left corner, creating the rollover effect.

Note: Replace the text in blue with the URL of your image file. Note the width and height values ​​that are highlighted in red, they must differ depending on your file, where the height value is only for one image and not for the entire image file!

The result

Hover your mouse over the light bulb to see the rollover-image effect in action:

Rollover image

Add rollover image to Blogger

The rollover image as add a gadget: copy both HTML / CSS codes and go to & # 39; Layout & # 39 ;, click on the link & # 39; Add a gadget & # 39;> select HTML / JavaScript and paste the codes in the box & # 39; Content & # 39 ;.

Or, if you want to add this from your messages, when you create a new message, go to the & # 39; HTML & # 39; and paste the codes into the empty box.

And thus you can swap images with mouseover using CSS. Lots of fun!






Leave a Reply

Your email address will not be published. Required fields are marked *