Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 23-05-2009
Member
 
Join Date: Jan 2009
Posts: 110
Set a mouseover image effect using jQuery

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.
Reply With Quote
  #2  
Old 23-05-2009
Member
 
Join Date: Feb 2008
Posts: 1,848
Re: jquery image mouseover

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>
Reply With Quote
  #3  
Old 23-05-2009
Member
 
Join Date: May 2008
Posts: 2,293
Re: Mouseover image effect using jQuery

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>
Reply With Quote
  #4  
Old 23-05-2009
Member
 
Join Date: Mar 2009
Posts: 89
Re: Set a mouseover image effect using jQuery

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>
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "Set a mouseover image effect using jQuery"
Thread Thread Starter Forum Replies Last Post
My jquery is not working for an image mouse hover? Bontu Software Development 4 10-06-2011 07:30 AM
How to add Mock Effect in an image Kalanidhi Windows Software 5 18-04-2010 01:11 AM
How can i apply Speed Effect to image in Photoshop teenQ Windows Software 5 20-01-2010 01:46 AM
Image changing on mouseover Shophia_D Software Development 3 25-11-2009 09:34 PM
How to make an image blink effect using photoshop? biohazard 76 Windows Software 2 01-08-2009 06:35 PM


All times are GMT +5.5. The time now is 06:20 AM.