How To Make Image Switches On Mouse Hover!

What is this Hover Effect?

When The Mouse Cursor hover on the image or any other element where we set the hover effect it changes or returns to our desired parameters. And We see the hover effect. as shown in the image above.

Hover Effect can only be achieved by CSS?

With the New Document Object Model (DOM)
JavaScript can change all the HTML elements, HTML Attributes, CSS styles, and can add new HTML elements, Attributes etc. With this powers We Can Easily Edit HTML Elements or CSS Of any page using JavaScript.

What We Will learn Today?

Today We Will Learn To Change the image when mouse hover on it which is also known as Rollover Image Effects. The Best Thing is We Will Show you to add this effect by using Javascript, CSS, And JavaScript Framework Jquery.

First We Will Add by using inline-JavaScript:

STEP 1: Keep Your Both Images Ready First for Mouse Over And Other is for Mouse Out.

<a href="Only Enter Link Url Here"><img src="Main-Image-Here" onmouseover="this.src='Add Image Which Appear When Hover'" onmouseout="this.src='After The hover The Image Which you Want To Display'" /></a>

Customization:

  • The Orange Highlighted Text is for The Link to your Desired page or Site. When The Image is Clicked it leads to your Desired Page.So Change the Text With Your URL.
  • The Light Blue Highlighted Text is Responsible For The Main Image. Place the URL of the first image here. This is the image shown before you hover over it or it is the image without any effect (original image).
  • The Green Highlighted Text is Responsible For the Image you want to Display When Mouse Hover on the First Image. This is the image that appears after your cursor hovers over it. So Place the URL of the second image Here
  • The Yellow Highlighted Text is Responsible For The image you want to display After the Hover Effect get Finished this means You should display your main Image here or you want to display any other it is your choice.

Second Method: We Will Achieve This by using CSS:

STEP 1: Keep Your Both Images Ready and First We Will Add The Image to the Anchor.

HTML Part:

<div id="onHoverChange">

  <a href="Your URL HERE" title="Your Image Title" alt="Your Image Alt Text"></a>

</div>


CSS Part:

#onHoverChange a{

  display:block;

   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN2XQQqa4rWuCak9ix1M4-63WtvV_bMCiBgQ394YIKQ6MdUSMsB6QxjCO5YGQIr8Kpi-ThSnOy8rvoxofUeg_lKSOz6umjuV8y7s7saHjOZK6Gx0_tYBjnEXI0UkZvWueYXa0eQZ2CBTU/s200/html-rollover-image-effect-change-on-hover_250x228.png');
  background-repeat: no-repeat;

  width: 300px;

  height:300px;}
#onHoverChange a:hover {

  display:block;

   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmb8emkOB-MBsSwwuai_d-HPgJIMMJOXzg7q6C4K6UhxMQnLTQp1I2nAILChfkv5EV3d_5eZglAMaFmnKFnxxX6m6ShymTEk8mkinroZi4FgL0Ro69nipHb60P_ke91JFX1YnlSesxev4/s1600/rollover-image-2.png');

}


Customization:

  • The Orange Highlighted Text is for The Link to your Desired page or Site. When The Image is Clicked it leads to your Desired Page.So Change the Text With Your URL.
  • The Light Blue Highlighted Text is Responsible For The Main Image. Place the URL of the first image here. This is the image shown before you hover over it or it is the image without any effect (original image).
  • The Green Highlighted Text is Responsible For the Image you want to Display When Mouse Hover on the First Image. This is the image that appears after your cursor hovers over it. So Place the URL of the second image Here
  • The Yellow Highlighted Text is Responsible For The image you want to display After the Hover Effect get Finished this means You should display your main Image here or you want to display any other it is your choice.
  • The Pink Highlighted Text is Responsible For The image Width And Height So Change this Parameters According to your Image Size.
That's It Thanks For Following our Tutorial ''Add Rollover Image Effects - Image Switches On Hover! '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

No comments:

Post a Comment