• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 695
  • Last Modified:

jQuery enlarge image on mouseover

i'm trying to enlarge an image on mouse over and shrink on mouse out.



       <script type="text/javascript">
$(document).ready(function(){
    $('preview').mouseover(grow);
    $('preview').mouseout(shrink);
});

function grow(){
    $('img.preview').css('height','542px');
      $('img.preview').css('width','799px');
}

function shrink(){
    $('img.preview').css('height','65px');
      $('img.preview').css('width','100px');
}
</script>

                  
<body>
      


      <h3>Buy  - <?echo($Event." ".$Date)?> -       <img src="http://XXXXX/members/resources/images/image-1.jpg" id="preview" width="100px" height="65px" onmouseover="grow()" onmouseout="shrink()"> </h3>
      
            
        Any ideas why this isn't working as expected?
0
JPERKS1985
Asked:
JPERKS1985
2 Solutions
 
macarrillo1Commented:
You should use # for id and . for class.
You have preview as an id.  Thus you should use 'img#preview' in your functions.

I am not sure but I think you are missing a semicolon at the end of your functions definitions grow() and shrink(); after the closing }
0
 
BuggyCoderCommented:
<script type="text/javascript">
$('document').ready(function(){
    $('#preview').mouseover(grow);
    $('#preview').mouseout(shrink);
});

function grow(){
    $('#preview').css('height','542px');
      $('#preview').css('width','799px');
}

function shrink(){
    $('#preview').css('height','65px');
      $('#preview').css('width','100px');
}
</script>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now