How To Enlarge Image onMouseOver using PHP?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the PHP section within the Web Development category of DaniWeb, a massive community of 361,619 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,188 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our PHP advertiser: Lunarpages PHP Web Hosting

Thread Tools Display Modes

Views: 1906 | Replies: 12 | Solved

Page 1 of 2

•

Join Date: Sep 2006

Posts: 84

Reputation: scorpionz is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

scorpionz

Offline

Junior Poster in Training

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 4:54 am. Reason: Keep It Organized - please use [code] tags

•

Join Date: Apr 2005

Location: New York state

Posts: 438

Reputation: ShawnCplus will become famous soon enough

Rep Power: 5

Solved Threads: 61

ShawnCplus ShawnCplus is offline

Offline

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 z+*

•

Join Date: Nov 2007

Posts: 86

Reputation: sagedavis is an unknown quantity at this point

Rep Power: 1

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

Location: Lawn Guylen, NY

Posts: 10,864

Reputation: cscgal is just really nice

Rep Power: 32

Solved Threads: 106

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
Do you run a computer-related website? Feature it in our niche link directory!

•

Join Date: Sep 2006

Posts: 84

Reputation: scorpionz is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

scorpionz

Offline

Junior Poster in Training

Re: How To Enlarge Image onMouseOver using PHP?

Mar 23rd, 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: 84

Reputation: scorpionz is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

scorpionz

Offline

Junior Poster in Training

Re: How To Enlarge Image onMouseOver using PHP?

Mar 26th, 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

Location: Bangalore, India

Posts: 2,861

Reputation: nav33n has a spectacular aura about

Rep Power: 7

Solved Threads: 205

nav33n

Offline

Posting Maven

Re: How To Enlarge Image onMouseOver using PHP?

Mar 27th, 2008

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

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

*PM asking for help will be ignored*

•

Join Date: Nov 2007

Posts: 86

Reputation: sagedavis is an unknown quantity at this point

Rep Power: 1

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

(Toggle Plain Text)

<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: 84

Reputation: scorpionz is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

scorpionz

Offline

Junior Poster in Training

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: 84

Reputation: scorpionz is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

scorpionz

Offline

Junior Poster in Training

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 12:16 am. Reason: Replaced [icode] [/icode] with [code=html] [/code]

Page 1 of 2

•

Only community members can participate in forum threads. You must register or log in to contribute.

•

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

•

DaniWeb PHP Marketplace

•

Thread Tools	Display Modes
Show Printable Version Email this Page	Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

•

Other Threads in the PHP Forum

Previous Thread: RewriteBase / (.htaccess) Simple problem for experienced people
Next Thread: Create ur own page number

DaniWeb Home > Forums > Web Development > PHP

How To Enlarge Image onMouseOver using PHP?

How To Enlarge Image onMouseOver using PHP?

Re: How To Enlarge Image onMouseOver using PHP?

Re: How To Enlarge Image onMouseOver using PHP?

Re: How To Enlarge Image onMouseOver using PHP?

Re: How To Enlarge Image onMouseOver using PHP?

Re: How To Enlarge Image onMouseOver using PHP?

Re: How To Enlarge Image onMouseOver using PHP?

Re: How To Enlarge Image onMouseOver using PHP?

Re: How To Enlarge Image onMouseOver using PHP?

Re: How To Enlarge Image onMouseOver using PHP?