Set a mouseover image effect using jQuery

**Ektaa** · 23-05-2009

I am having query related to jQuery i have created a html code where i am trying to have a image displayed whenever a mouse is being movedover any hyperlink.I know that this kind of things we can do it by using JQuery but don't know how to do it can anyone provide me the code or any ideas where i can make this thing happening.

**MindSpace** · 23-05-2009

Try to use the following code to set image effect on mouseover

HTML Code:

<style type="text/css">
#demo_this 
{
      list-style-type: none;
      }
    
</style>
<script type="text/javascript">

$(document).ready(function(){

$(function() {
  $("#demo_this img").hover(function() {
        $(this).attr("src", $(this).attr("src").split(".").join("-hover."));  // adds -hover to the name of the image
  }, function() {
        $(this).stop(true,false); // prevents the creation of stacked actions
        $(this).attr("src", $(this).attr("src").split("-hover.").join("."));  // removes -hover from the name of the image
  });
});

  }); // end docready
</script>

<h1> Abbreviated Method Calls</h1>
<p>From: <a target="_blank" href="http://www.techarena.in">JQuery Rollovers Using  this </a></p>
<p>This is simple rollover done easier in CSS </p>
<p> &nbsp; </p>

<ul id="demo_this">
      <li><a href="#"><img src="/images/item1.gif" border="0" /></a></li>
      <li><a href="#"><img src="/images/item2.gif" border="0" /></a></li>
      <li><a href="#"><img src="/images/item3.gif" border="0" /></a></li>
</ul>

**Zecho** · 23-05-2009

Try to use the following code by using jQuery where image effect is not there

HTML Code:

<html>  
<head>  
   <script type="demotext/javascript" src="jquery.js"></script>  
   <script type="demotext/javascript">  
      $(function() {  
         $('table tbody tr').mouseover(function() {  
            $(this).addClass('selectedRow');  
         }).mouseout(function() {  
            $(this).removeClass('selectedRow');  
         }).click(function() {  
            alert($('td:first', this).text());  
         });  
      });  
   </script>  
   <style>  
      .selectedRow {  
         background-color: red;  
         cursor: pointer;  
      }  
   </style>  
</head>  
<body>  
   <table border="2">  
      <thead>  
         <tr>  
            <th>1st Column</th>  
            <th>2nd Column</th>  
            <th>3rd Column</th>  
         </tr>  
      </thead>  
      <tbody>  
         <tr>  
            <td>First </td>  
            <td>d1</td>  
            <td>d2</td>  
         </tr>  
         <tr>  
            <td>Second</td>  
            <td>d3 </td>  
            <td>d4</td>  
         </tr>  
      </tbody>  
   </table>  
</body>  
</html>

**Harshini** · 23-05-2009

Try to use a style rule for mouseover, where you add the class to the element on which the event is bound.

HTML Code:

<style type="text/css">
img.mouseover
{
    border: medium none;
    border-bottom: 2px solid;
}
</style>
 
<script type="text/javascript">
$(function() {
    $(".view-thumb img").mouseover(function() {
        // get rid of the text decoration on all 4 thumbnails by removing the class
        $("img.mouseover").removeClass("mouseover");
        // add the class to the specific image
        $(this).addClass("mouseover");
    });
});
</script>