Solved

jQuery enlarge image on mouseover

Posted on 2012-04-08
2
638 Views
Last Modified: 2012-04-09
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
Comment
Question by:JPERKS1985
2 Comments
 
LVL 9

Accepted Solution

by:
macarrillo1 earned 300 total points
ID: 37821394
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
 
LVL 20

Assisted Solution

by:BuggyCoder
BuggyCoder earned 200 total points
ID: 37821572
<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

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question