Display Image With jQuery OnMouseOver

Display image with jquery OnMouseOver, Here I’m using two images, If anybody is Hovering on one image then second image will be displayed, rest of the time second image will be hidden. And coming to HTML markup, I’ve one div inside that i’m using one span with an id of #pop-up. It has one more div with an id of #image. When you are hovering on #image div then span#pop-up will be shown. This span#pop-up should be shown only on OnMouseOver, rest of the time second image should be hidden, for hiding the image added inline style of display-none.

Here are the steps what you need to do

  1. Link the Jquery file.
  2. Next add jquery script in head section of your html file.
  3. Add this HTML markup inside your html file body tag.

Code for Display image with jquery OnMouseOver

1. Link the Jquery file

[html] <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>[/html]

2. Add this jquery script in the head section

[html] <script type="text/javascript">

3. Place this HTML code in body tag.

<span id="pop-up" style="position: absolute; display:none;"
><img src="image1.jpg"
<div id="image" style="width:208px; height:318px; margin-left: 150px;"><a href="#"><img
border="none" /></a></div>

I hope this article helped you to fix the issue, If you have any problem please let us know by using comment form. To get latest news us and updates follow us on twitter & Facebook, subscribe to our newsletter.

Vivek Vengala

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.