DaniWeb IT Discussion Community
Page 1 of 2 1 2 >
Show 40 post(s) from this thread on one page

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)
-   PHP (http://www.daniweb.com/forums/forum17.html)
-   -   How To Enlarge Image onMouseOver using PHP? (http://www.daniweb.com/forums/thread115157.html)

scorpionz Mar 22nd, 2008 3:13 am
How To Enlarge Image onMouseOver using PHP?
 
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>

<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....

ShawnCplus Mar 22nd, 2008 8:07 am
Re: How To Enlarge Image onMouseOver using PHP?
 
onmouseover='this.height += 100;this.width += 100'
That's the most basic version.

sagedavis Mar 22nd, 2008 10:05 am
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

cscgal Mar 23rd, 2008 10:36 am
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.

scorpionz Mar 23rd, 2008 11:43 pm
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 Mar 26th, 2008 11:45 pm
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

nav33n Mar 27th, 2008 5:46 am
Re: How To Enlarge Image onMouseOver using PHP?
 
Something like this ? http://www.c6software.com/Products/PopBox/

sagedavis Mar 27th, 2008 7:57 am
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 
<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.

scorpionz Mar 30th, 2008 4:08 am
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 Mar 30th, 2008 11:19 am
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>

<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


All times are GMT -4. The time now is 4:05 pm.
Page 1 of 2 1 2 >
Show 40 post(s) from this thread on one page

Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC