Ad:

PHP Discussion Thread
Marked Solved
Views: 15404

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Mar 22nd, 2008

-1

How To Enlarge Image onMouseOver using PHP?

Expand Post »

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:

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

scorpionz

Reputation Points: 13

Solved Threads: 0

Junior Poster

Offline

109 posts
since Sep 2006

Permalink

Mar 22nd, 2008

Re: How To Enlarge Image onMouseOver using PHP?

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

ShawnCplus

Sponsor

Reputation Points: 520

Solved Threads: 268

Code Monkey

Offline

1,564 posts
since Apr 2005

Permalink

Mar 22nd, 2008

Re: How To Enlarge Image onMouseOver using PHP?

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

sagedavis

Reputation Points: 10

Solved Threads: 6

Junior Poster in Training

Offline

86 posts
since Nov 2007

Permalink

Mar 23rd, 2008

Re: How To Enlarge Image onMouseOver using PHP?

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.

cscgal

Administrator

Staff Writer

Reputation Points: 1422

Solved Threads: 162

The Queen of DaniWeb

Offline

13,645 posts
since Feb 2002

Permalink

Mar 24th, 2008

Re: How To Enlarge Image onMouseOver using PHP?

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

scorpionz

Reputation Points: 13

Solved Threads: 0

Junior Poster

Offline

109 posts
since Sep 2006

Permalink

Mar 27th, 2008

Re: How To Enlarge Image onMouseOver using PHP?

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

scorpionz

Reputation Points: 13

Solved Threads: 0

Junior Poster

Offline

109 posts
since Sep 2006

Permalink

Mar 27th, 2008

Re: How To Enlarge Image onMouseOver using PHP?

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

nav33n

Moderator

Featured Poster

Reputation Points: 524

Solved Threads: 356

Purple hazed!

Offline

3,878 posts
since Nov 2007

Permalink

Mar 27th, 2008

Re: How To Enlarge Image onMouseOver using PHP?

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

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.

sagedavis

Reputation Points: 10

Solved Threads: 6

Junior Poster in Training

Offline

86 posts
since Nov 2007

Permalink

Mar 30th, 2008

Re: How To Enlarge Image onMouseOver using PHP?

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

scorpionz

Reputation Points: 13

Solved Threads: 0

Junior Poster

Offline

109 posts
since Sep 2006

Permalink

Mar 30th, 2008

Re: How To Enlarge Image onMouseOver using PHP?

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

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]

scorpionz

Reputation Points: 13

Solved Threads: 0

Junior Poster

Offline

109 posts
since Sep 2006

Page 1
2
Next

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

Previous Thread in PHP Forum Timeline: passing multiple values of tick boxes at the same time

Next Thread in PHP Forum Timeline: PHP help with arrays

DaniWeb Message

Cancel Changes

User Name
Password