Member Avatar for scorpionz

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

  • 6 Contributors
  • 13 Replies
  • 2K Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by eidshow1

Recommended Answers

All 13 Replies

Member Avatar for ShawnCplus

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

Member Avatar for sagedavis

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

Member Avatar for Dani

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.

Member Avatar for scorpionz

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

Member Avatar for scorpionz

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

Member Avatar for sagedavis

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.

Member Avatar for scorpionz

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

Member Avatar for scorpionz

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

Member Avatar for sagedavis

the answer is that Pop is not defined. you are calling a function called POP in your onClick function and I see no javascript function (because it must be a function in order to use it). I do not see you using an external javascript either....

so, you've got no internal javascript going on, and no external javascript code (other than declairing a couple of variables) but no javascript functions.

Sage

Member Avatar for scorpionz

Thanks a lot sagedavis for providing me such useful guide lines of correcting my code
Finally i fixed it up up with this code

<html>
<head>
<title>My Test</title>

<script src="/test_files/scripts/PopBox.js" type="text/javascript"></script>

 <script type="text/javascript">
popBoxWaitImage.src = "images/spinner40.gif";
popBoxRevertImage = "images/magminus.gif";
popBoxPopImage = "images/magplus.gif";
</script> 
<style type="text/css">
.PopBoxImageSmall
{
	border: none 0px #ffffff;
	cursor: url("images/magplus.cur"), pointer;
}
.PopBoxImageLarge
{
	border: solid 1px #999999;
	cursor: url("images/magminus.cur"), pointer;
}
.position-box{
	position:absolute;
	top:100px;
	left:100px;
	}
</style>
</head>

<body>
<table class="position-box" border="1">
  <tr>
    <td >
	<img
src="images/ARY0144_small.jpg" alt="" width="399" height="253"
class="PopBoxImageSmall"  id="imgBlueScoop"
title="Click to magnify/shrink"
onclick="return Pop(this,50,'PopBoxImageLarge');"
pbsrc="images/ARY0144_small.jpg"
pbCaption="Nice Try" />

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

Infact this thread will be so much helpful though.....

Thanks and Regards to all those who participated with me in this thread...

Thanks and Regards
ScorpionZ

Member Avatar for sagedavis

You're welcome,
glad I could help.
sage

Member Avatar for eidshow1

Enlarge Image onMouseOver using PHP value from MySQL is solved. if you like this page http://bangalipona.com as you want i can describe details here. Although you will be able to view the source code of the pages how to write JavaScript function in php function using php value in that JavaScript functions argument.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.