DaniWeb Forum Index > Web Development > PHP

How To Enlarge Image onMouseOver using PHP?

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Sep 2006

Posts: 107

Reputation: scorpionz is an unknown quantity at this point

Solved Threads: 0

scorpionz

Offline

Junior Poster

How To Enlarge Image onMouseOver using PHP?

Mar 22nd, 2008

Hi This Is ScorpionZ
I have an Image Gallery and have a PHP code toooo,,,,I Wana know How to Enlarge image when my mouse Over Image
Here is the Code:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
</head>
 
<body>
<table class="details-box-products" width="511" border="1">
<tr>
    <td width="213" rowspan="4" bgcolor="#EFEFE9" align="center">
	<strong><a href="#"><img src="./uploaded_images/<?php echo $prod_up_img; ?> " name="prod_up_img" id="prod_up_img" onMouseOver="" width="209" height="175" /></a> </strong> 
    </td> 
</tr> 
<table> 
</body> 
</html> 
<html>
<head>
</head>

<body>
<table class="details-box-products" width="511" border="1">
<tr>
    <td width="213" rowspan="4" bgcolor="#EFEFE9" align="center">
	<strong><a href="#"><img src="./uploaded_images/<?php echo $prod_up_img; ?>" name="prod_up_img" id="prod_up_img" onMouseOver="" width="209" height="175" /></a></strong>
    </td>
</tr>
<table>
</body>
</html>

What type of JavaScript needs to Apply... I have no idea about that.....

Any Response back Will be highly Appreciated with great Interest

Thanks and Regards
Scorpionz

In Addition I have Safe the Image name in DB and Getting the image by name it is Stored in Server....

Last edited by peter_budo; Mar 23rd, 2008 at 5:54 am. Reason: Keep It Organized - please use [code] tags

•

Join Date: Apr 2005

Posts: 1,426

Reputation: ShawnCplus is a glorious beacon of light

Solved Threads: 230

ShawnCplus ShawnCplus is online now

Online

Code Monkey

Re: How To Enlarge Image onMouseOver using PHP?

Mar 22nd, 2008

onmouseover='this.height += 100;this.width += 100'
That's the most basic version.

GCS d- s+ a-->? C++(++++) UL+++ P+>+++ L+++ E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r y+
PMs asking for help will not be answered, post on the forums. That's what they're there for.

•

Join Date: Nov 2007

Posts: 86

Reputation: sagedavis is an unknown quantity at this point

Solved Threads: 6

sagedavis

Offline

Junior Poster in Training

Re: How To Enlarge Image onMouseOver using PHP?

Mar 22nd, 2008

adding 100 to the height and width, actually does not maintain the aspect ratio of the image (unless the image is already the same height and width.

If you use a multiplication instead, you should be maintaining the aspect ratio.
Sage

•

Join Date: Feb 2002

Posts: 12,056

Reputation: cscgal is a glorious beacon of light

Solved Threads: 128

cscgal

Offline

The Queen of DaniWeb

Re: How To Enlarge Image onMouseOver using PHP?

Mar 23rd, 2008

Sagedavis ... Yup, like height *= 2 to double the height ... Remember to also do onmouseout= to restore the height and width back to normal when the mouse moves off of the images. You might also want to add this.src= and fetch a higher resolution version of the image from the server so that you don't end up with images scaled too big for their size.

Dani the Computer Science Gal

Follow my Twitter feed! twitter.com/DaniWeb
And if you're interested in Internet marketing there is twitter.com/DaniWebAds

•

Join Date: Sep 2006

Posts: 107

Reputation: scorpionz is an unknown quantity at this point

Solved Threads: 0

scorpionz

Offline

Junior Poster

Re: How To Enlarge Image onMouseOver using PHP?

Mar 24th, 2008

Hi
first of all Thanks to "ShawnCplus", "sagedavis","cscgal"
for their response back to my thread..... Guys
I m trying it right now and will get back to you Guys as soon as i can
and Will let you knows it what occurs
Again Thanks

Regards
Scorpionz

•

Join Date: Sep 2006

Posts: 107

Reputation: scorpionz is an unknown quantity at this point

Solved Threads: 0

scorpionz

Offline

Junior Poster

Re: How To Enlarge Image onMouseOver using PHP?

Mar 27th, 2008

Hi Guys and Girls
I m Back
First of all direct to the Point Iapplied all the suggestions of you all people and it works
Thanks
But this is not what i am trying to do
Description is that
When i mouse over the image then it opens over some box, like in Div box and then when i mouse out then it dissapears
I m couldnt find on Internet

Thanks and Regards
ScorpionZ

•

Join Date: Nov 2007

Posts: 3,761

Reputation: nav33n is a jewel in the rough

Solved Threads: 332

nav33n

Offline

Senior Poster

Re: How To Enlarge Image onMouseOver using PHP?

Mar 27th, 2008

Something like this ? http://www.c6software.com/Products/PopBox/

Ignorance is definitely not bliss!

*PM asking for help will be ignored*

•

Join Date: Nov 2007

Posts: 86

Reputation: sagedavis is an unknown quantity at this point

Solved Threads: 6

sagedavis

Offline

Junior Poster in Training

Re: How To Enlarge Image onMouseOver using PHP?

Mar 27th, 2008

OK, well, that's different, you are looking for something like an ajax, hidden div tag which reviels itself on the mousover of another?

Even though you will be using images, think of it more like a customized tooltip.

There is actually a javascript library located at http://blog.innerewut.de/tooltip
which I have used in the past. All that is required is one small piece of code.
Download tooltip.js I believe it may also require prototype.js (not exactly sure about that since it's been a while since I've used it).

Then all you need to do is include them in your head tag, create the two div tags in your body (one hidden, one not), then at the bottom of your page

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
<script type="text/javascript">
  var my_tooltip = new Tooltip('visible_div_id', 'hidden_div_id')
</script>
<script type="text/javascript">
  var my_tooltip = new Tooltip('visible_div_id', 'hidden_div_id')
</script>

Replace visible_div_id and hidden_div_id with the id of the coresponding div tags.

What you need to know though is that your visible div tag must have widths, otherwise the trigger will happen an unwanted places.

•

Join Date: Sep 2006

Posts: 107

Reputation: scorpionz is an unknown quantity at this point

Solved Threads: 0

scorpionz

Offline

Junior Poster

Re: How To Enlarge Image onMouseOver using PHP?

Mar 30th, 2008

Hi Guys, due to some network problem in my area, i am unable to contact here,
First of all Thanks for the response of "naveen" and "sagedavis"
Now the frame that i was thinking is not that, but it is beyond my expectations, means that you guys Provide such tutorial with examples that are wonderful.I was only trying some lite thing but this tutorial let me force to do some other.....
It Works

Thanks and Regards
ScorpionZ

•

Join Date: Sep 2006

Posts: 107

Reputation: scorpionz is an unknown quantity at this point

Solved Threads: 0

scorpionz

Offline

Junior Poster

Re: How To Enlarge Image onMouseOver using PHP?

#10

Mar 30th, 2008

Hi After Visiting to Website and Understanding of tutorials i made this code for testing
and Finding some Problems in execution

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My Test</title>
 <script type="text/javascript">
popBoxWaitImage.src = "/test_files/images/spinner40.gif";
popBoxRevertImage = "/test_files/images/magminus.gif";
popBoxPopImage = "/test_files/images/magplus.gif";
</script> 
<style type="text/css">
.PopBoxImageSmall
{
   border: none 0px white;
   cursor: url("http://test_files/images/magplus.cur"), pointer;
}
.PopBoxImageLarge
{
   border: solid thin #CCCCFF;
   cursor: url("http://test_files/images/magminus.cur"), pointer; 
}
</style>
</head>
 
<body>
<table border="1">
  <tr>
    <td >
	<img
src="images/my_image.jpg" alt="" width="399" height="253"
class="PopBoxImageSmall"  id="imgBlueScoop"
title="Click to magnify/shrink"
onclick="return Pop(this,50,'PopBoxImageLarge');"
pbsrc="images/my_image.jpg"
pbCaption="I don't know where we got these beach toys, but they make for a nice contrasting photograph against the darker sand of Folsom Lake. It's not the greatest beach, but it's a beach, and that's a very nice change from a cube wall" />
 
</td>
  </tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My Test</title>
 <script type="text/javascript">
popBoxWaitImage.src = "/test_files/images/spinner40.gif";
popBoxRevertImage = "/test_files/images/magminus.gif";
popBoxPopImage = "/test_files/images/magplus.gif";
</script> 
<style type="text/css">
.PopBoxImageSmall
{
   border: none 0px white;
   cursor: url("http://test_files/images/magplus.cur"), pointer;
}
.PopBoxImageLarge
{
   border: solid thin #CCCCFF;
   cursor: url("http://test_files/images/magminus.cur"), pointer; 
}
</style>
</head>

<body>
<table border="1">
  <tr>
    <td >
	<img
src="images/my_image.jpg" alt="" width="399" height="253"
class="PopBoxImageSmall"  id="imgBlueScoop"
title="Click to magnify/shrink"
onclick="return Pop(this,50,'PopBoxImageLarge');"
pbsrc="images/my_image.jpg"
pbCaption="I don't know where we got these beach toys, but they make for a nice contrasting photograph against the darker sand of Folsom Lake. It's not the greatest beach, but it's a beach, and that's a very nice change from a cube wall" />

</td>
  </tr>
</table>
</body>
</html>

Now let me describe
I am running it on Mozilla and in its Error Console I find this Bug
"Pop is not defined "
and one important thing
when i move the mouse over to image it is not also showing the mouse as an "+" like magplus.cur this one
So Please view it and let me get out of this Problem .. Any Response will be highly apppreciated

Thanks and Regards
Scorpionz

Last edited by cscgal; Apr 3rd, 2008 at 1:16 am. Reason: Replaced [icode] [/icode] with [code=html] [/code]