Current location: Hot Scripts Forums » General Web Coding » JavaScript » Image resize onmouseover !!!

Image resize onmouseover !!!

Reply
  #1 (permalink)  
Old
Newbie Coder
 
Join Date: Jun 2005
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Image resize onmouseover !!!

Can somebody explain me a good way to create a effect
so a image is shown on its full size when you move the mouse over it ?

like for example i got a page with a bunch of images
but to not mess up the site i need to keep them a bit smaller
so when i move the mouse button over it it resizes to the original size and back again to the smaller version when moved off it

anybody know how to do this ? without messing up the page because of the image resize
Reply With Quote

Featured Marketplace Scripts (view more)

  #2 (permalink)  
Old
Keith's Avatar
Community Liaison
 
Join Date: Feb 2004
Posts: 1,233
Thanks: 1
Thanked 11 Times in 11 Posts
Code:
<img src="/image.jpg" width="150" height="100" name="image_name"
onmouseover="image_name.width='300';image_name.height='200';"
onmouseout="image_name.width='150';image_name.height='100';" />

Last edited by Keith; 10-16-05 at 06:08 PM.
Reply With Quote
  #3 (permalink)  
Old
Newbie Coder
 
Join Date: Jun 2005
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
alright thanks Keith i am going to give it a try
Reply With Quote
  #4 (permalink)  
Old
Newbie Coder
 
Join Date: Oct 2009
Posts: 14
Thanks: 8
Thanked 0 Times in 0 Posts
re

what if i get pictures from a mysql database and the code is:

<?php do { ?>
<img src="pictures/<?php echo $row_Recordset1['pic']; ?>" alt="" width="160" height="175" align="middle" />
<?php } while ($row_Pictures= mysql_fetch_assoc($Pictures)); ?>


where to put the code for resizing????
Reply With Quote
  #5 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Quote:
Originally Posted by braca86 View Post
what if i get pictures from a mysql database and the code is:

<?php do { ?>
<img src="pictures/<?php echo $row_recordset1['pic']; ?>" alt="" width="160" height="175" align="middle" />
<?php } while ($row_pictures= mysql_fetch_assoc($pictures)); ?>


where to put the code for resizing????
Well, first of all, $row_pictures and $row_recordset1 don't match.
So I doubt that you will get any output from $row_recordset1['pic'].

But just for the sake of argument,
let's say you have a table in your database called "pictures".
And in the "pictures" table you have a column called "pic".
And also in the "pictures" table you have a few records that has an image file name in the column "pic".

Then this script would do what you want.
PHP Code:

<html>
<head>
<script type="text/javascript">
function getTopPos(inputObj)
{
 var returnValue = inputObj.offsetTop;
 while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetTop;}
 return returnValue;
 }
function getLeftPos(inputObj)
{
 var returnValue = inputObj.offsetLeft;
 while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetLeft;}
 return returnValue;
 }
function show_large_image(obj)
{
 var large_image_obj = document.getElementById("image_holder");
 large_image_obj.src = obj.src;
 large_image_obj.style.left = getLeftPos(obj)+"px";
 large_image_obj.style.top = getTopPos(obj)+"px";
 large_image_obj.style.display = "block";
 }
function hide_large_image(obj)
{
 obj.style.display = "none";
 }
</script>
</head>
<body>
<?php
$host 
"";          // Enter mysql host address here. //
$user "";          // Enter mysql user name here. //
$password "";      // Enter mysql password here. //
$db "";            // Enter mysql database name here. //
$table "pictures"// Enter mysql table name here. //

mysql_connect($host,$user,$password);
mysql_select_db($db);

$sql "select pic from $table";
$Pictures mysql_query($sql);
while(
$row_Pictures mysql_fetch_assoc($Pictures))
{
 echo 
"<img src='pictures/".$row_Pictures["pic"]."' alt='' width='160' height='175' align='middle' onmouseover='show_large_image(this)' />";
 }
?>
<!-- Large image holder. -->
<img id="image_holder" src="" width="320" height="350" style="position:absolute;display:none;" onmouseout="hide_large_image(this)" />
<!-- ------------------- -->
</body>
</html>
And this may be a little cleaner.
If you click on an image, the large image will be displayed.
And when you click on the large image it disappears.
PHP Code:

<html>
<head>
<style>
img{cursor:pointer;}
</style>
<script type="text/javascript">
function getTopPos(inputObj)
{
 var returnValue = inputObj.offsetTop;
 while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetTop;}
 return returnValue;
 }
function getLeftPos(inputObj)
{
 var returnValue = inputObj.offsetLeft;
 while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetLeft;}
 return returnValue;
 }
function show_large_image(obj)
{
 var large_image_obj = document.getElementById("image_holder");
 large_image_obj.src = obj.src;
 large_image_obj.style.left = getLeftPos(obj)+"px";
 large_image_obj.style.top = getTopPos(obj)+"px";
 large_image_obj.style.display = "block";
 }
function hide_large_image(obj)
{
 obj.style.display = "none";
 }
</script>
</head>
<body>
<?php
$host 
"";          // Enter mysql host address here. //
$user "";          // Enter mysql user name here. //
$password "";      // Enter mysql password here. //
$db "";            // Enter mysql database name here. //
$table "pictures"// Enter mysql table name here. //

mysql_connect($host,$user,$password);
mysql_select_db($db);

$sql "select pic from $table";
$Pictures mysql_query($sql);
while(
$row_Pictures mysql_fetch_assoc($Pictures))
{
 echo 
"<img src='pictures/".$row_Pictures["pic"]."' alt='' width='160' height='175' align='middle' onclick='show_large_image(this)' />";
 }
?>
<!-- Large image holder. -->
<img id="image_holder" src="" width="320" height="350" style="position:absolute;display:none;" onclick="hide_large_image(this)" />
<!-- ------------------- -->
</body>
</html>
__________________
Jerry Broughton

Last edited by job0107; 10-28-09 at 11:22 PM.
Reply With Quote
The Following User Says Thank You to job0107 For This Useful Post:
braca86 (10-28-09)
  #6 (permalink)  
Old
Newbie Coder
 
Join Date: Oct 2009
Posts: 14
Thanks: 8
Thanked 0 Times in 0 Posts
re

thanks man... its working....
Reply With Quote
  #7 (permalink)  
Old
Wannabe Coder
 
Join Date: Jul 2010
Posts: 137
Thanks: 2
Thanked 0 Times in 0 Posts
thats nice, however all the pictures i assume are not the same size, and when its re-sizes some of them looks blurred. So, i was thinking if we have the re-size pic in one table and the original pictures in other one, it is possible when the mouse over re-size the re-sized picture to the original???
Reply With Quote
  #8 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Quote:
Originally Posted by williamh26 View Post
thats nice, however all the pictures i assume are not the same size, and when its re-sizes some of them looks blurred. So, i was thinking if we have the re-size pic in one table and the original pictures in other one, it is possible when the mouse over re-size the re-sized picture to the original???
I specified a width and height in the image element.
If you eliminate one or the other, the re-sized image will retain it's aspect ratio.
__________________
Jerry Broughton
Reply With Quote
  #9 (permalink)  
Old
New Member
 
Join Date: Jan 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
hi Keith,
thanks. really its very nice.
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Image resize onmouseover !!! CnB HTML/XHTML/XML 2 10-16-05 05:03 PM
image resize ascanio PHP 1 07-12-05 01:32 AM
image resize and upload ascanio PHP 0 06-25-05 07:37 PM
Please help -- need to resize Access OLE image jinlynn ASP 0 09-13-04 11:29 PM
I need a script for onMouseOver, image zooming + fading AgentRed Script Requests 0 09-06-04 07:21 PM


All times are GMT -5. The time now is 12:14 PM.
vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.