homepage Welcome to WebmasterWorld Guest from 184.73.104.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

    
How to increase the size of the image using the X, Y co-ordinates
ravii

5+ Year Member



 
Msg#: 3792958 posted 1:54 pm on Nov 24, 2008 (gmt 0)

hello,

I need to increase the size of the image when onmouseover() and onmouseout() event occurs at the same position using x and y co-ordinates

please help me out how to do this

here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

function mover(event)
{
x=event.clientX;
y=event.clientY;
document.getElementById("img1"+ x,y).height="250px";
document.getElementById("img1"+ x,y).width="300px";
}
function mout(event)
{
x=event.clientX;
y=event.clientY;
document.getElementById("img1"+ x,y).height="170px";
document.getElementById("img1"+ x,y).width="100px";
}
</script>
</head>

<?php
function connect()
{
$dbhost='localhost';
$dbuser='root';
$dbpass='swetha';
$conn= mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'.mysql_error());
$dbname='hakman';
mysql_select_db($dbname);
return $conn;
}
?>

<body bgcolor="#0a1936">
<?php
$c=connect();
$page_name="spry_styles.php";
$start=$_GET['start'];
if(!($start>0))
{
$start=0;
}
$eu=($start-0);
$limit=9;
$this1=$eu+$limit; //6
$back=$eu-$limit; //-6
$next=$eu+$limit; //6
$query2="select style from styles";
$sql=mysql_query($query2);
$result2=mysql_num_rows($sql); //25
$query="select path from styles limit $eu,$limit"; //0 to 6
$result=mysql_query($query);
echo '<table border="1" align="center" width="55%" height="60%" BORDERCOLOR="#C6C6C6" >';
for($r=1;$r<=3;$r++)
{
echo '<tr>';
for($d=1;$d<=3;$d++)
{
$obj=mysql_fetch_object($result);
$imageSrc=$obj->path;
$cimage="/images/".$obj->path;

echo '<td border="1" width="15px" height="25px" id="img1" name="img1">
<img onmouseover="mover(event)" onmouseout="mout(event)" width="170px" height="100px" src='.$cimage.'></td>';


}
echo '</tr>';
}
echo'</table>';

// From here the paging code starts

echo '<table align ="center" width="50%"><tr><td align="center">';
$nume=$result2;
if($nume > $limit ) // 25>9 y
{
echo "<table align ='center' width='100%'><tr><td align='left' width='5%'>";
if($back >=0) //
{
print "<a href='$page_name?start=$back&uname=$cuser'><font face='Verdana' size='2'>PREV</font></a>";
}
echo "</td><td width='10%'>";
$i=0;
$l=1;
for($i=0;$i < $nume;$i=$i+$limit)
{
if($i <> $eu)
{
echo "<a href='$page_name?start=$i&uname=$cuser'><font face='Verdana' size='2'>$l </font></a>";
}
else
{
echo "<font face='Verdana' size='2' color=red>$l </font>";
}
$l=$l+1;
}
echo "</td><td align='right' width='5%'>";
if($this1 < $nume)
{
print "<a href='$page_name?start=$next&uname=$cuser'><font face='Verdana' size='2'>NEXT</font></a>";
}
echo "</td></tr></table>";
}
echo '</tr></td></table>';
?>
</body>
</html>

thanks in advance

 

andrewsmd

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3792958 posted 1:58 pm on Nov 24, 2008 (gmt 0)

You probably should post in the JavaScript. You can't execute PHP onmouseover unless you call it with JavaScript because it is server side. Once you start doing that, however, it get's really, really messy.

enigma1

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3792958 posted 10:04 am on Nov 30, 2008 (gmt 0)

if you just need a resize on hover use css. From the code you posted I understand you need just a secondary image size so your css entries could been (eg:)

td a img {
width: 100px;
height: 100px;
}

td a:hover img {
width: 200px;
height: 100px;
}

just specify the some names for the tags as you do not want this to apply to all images.

ravii

5+ Year Member



 
Msg#: 3792958 posted 6:55 am on Dec 1, 2008 (gmt 0)

hello enigma1

thanks for the reply
i tried as you said but it increased the sizes of the tabs not the images
please tell what wrong am i doing
I am poor at CSS

here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<!--<script type="text/javascript">

function mover(img1)
{
document.getElementById("img1").height="250px";
document.getElementById("img1").width="300px";
}
function mout(img1)
{
document.getElementById("img1").height="170px";
document.getElementById("img1").width="100px";
}
</script>-->
<!--<style type="text/css">
.img1
{
opacity:0.4;
filter:alpha(opacity=40)
}
</style>-->

<style type="text/css">
td a:hover img
{
width: 200px;
height: 100px;
}
</style>

</head>
<?php
function connect()
{
$dbhost='host';
$dbuser='user';
$dbpass='pass';
$conn= mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'.mysql_error());
$dbname='aaaa';
mysql_select_db($dbname);
return $conn;
}
?>

<body bgcolor="#0a1936" onload="MM_preloadImages('/home_normal.jpg','/home_clicked_down.JPG','/retail_normal.JPG','/retail_clicked_down.JPG','/contact_clicked_down.JPG','/about_clicked_normal.JPG','/about_clicked_down.JPG')">
<p>&nbsp;</p>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="welcome.html" target="_top" onclick="MM_nbGroup('down','group1','Home','/home_normal.jpg',1)" onmouseover="MM_nbGroup('over','Home','/home_clicked_down.JPG','',1)" onmouseout="MM_nbGroup('out')"><img src="/home_normal.jpg" alt="" name="Home" width="87" height="33" border="0" id="Home" onload="" /></a></td>
<td><a href="retail.php" target="_top" onclick="MM_nbGroup('down','group1','Retailers','/retail_normal.JPG',1)" onmouseover="MM_nbGroup('over','Retailers','/retail_clicked_down.JPG','',1)" onmouseout="MM_nbGroup('out')"><img src="/retail_normal.JPG" alt="" name="Retailers" width="113" height="33" border="0" id="Retailers" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','contact','/contact_clicked_down.JPG',1)" onmouseover="MM_nbGroup('over','contact','/contact_clicked_down.JPG','',1)" onmouseout="MM_nbGroup('out')"><img src="/contact_normal.jpg" alt="" name="contact" width="134" height="32" border="0" id="contact" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','about','/about_clicked_normal.JPG',1)" onmouseover="MM_nbGroup('over','about','/about_clicked_down.JPG','',1)" onmouseout="MM_nbGroup('out')"><img src="/about_clicked_normal.JPG" alt="" name="about" width="121" height="33" border="0" id="about" onload="" /></a></td>
</tr>
</table>
<?php
$c=connect();
$page_name="spry_styles.php";
$start=$_GET['start'];
if(!($start>0))
{
$start=0;
}
$eu=($start-0);
$limit=9;
$this1=$eu+$limit; //6
$back=$eu-$limit; //-6
$next=$eu+$limit; //6
$query2="select style from styles";
$sql=mysql_query($query2);
$result2=mysql_num_rows($sql); //25
$query="select path from styles limit $eu,$limit"; //0 to 6
$result=mysql_query($query);
echo '<table border="1" align="center" width="55%" height="60%" BORDERCOLOR="#C6C6C6" >';
for($r=1;$r<=3;$r++)
{
echo '<tr>';
for($d=1;$d<=3;$d++)
{
$obj=mysql_fetch_object($result);
$imageSrc=$obj->path;
$cimage="/images/".$obj->path;


echo '<td border="1" width="15px" height="25px" id="img1" name="img1">
<a href="#"><img width="170px" height="100px" src='.$cimage.'></a></td>';

}
echo '</tr>';
}
echo'</table>';

echo '<table align ="center" width="50%"><tr><td align="center">';
$nume=$result2;
if($nume > $limit ) // 25>9 y
{
echo "<table align ='center' width='100%'><tr><td align='left' width='5%'>";
if($back >=0) //
{
print "<a href='$page_name?start=$back&uname=$cuser'><font face='Verdana' size='2'>PREV</font></a>";
}
echo "</td><td width='10%'>";
$i=0;
$l=1;
for($i=0;$i < $nume;$i=$i+$limit)
{
if($i <> $eu)
{
echo "<a href='$page_name?start=$i&uname=$cuser'><font face='Verdana' size='2'>$l </font></a>";
}
else
{
echo "<font face='Verdana' size='2' color=red>$l </font>";
}
$l=$l+1;
}
echo "</td><td align='right' width='5%'>";
if($this1 < $nume)
{
print "<a href='$page_name?start=$next&uname=$cuser'><font face='Verdana' size='2'>NEXT</font></a>";
}
echo "</td></tr></table>";
}
echo '</tr></td></table>';
?>
</body>
</html>

enigma1

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3792958 posted 10:01 am on Dec 1, 2008 (gmt 0)

From the code I understand you want this line to have the resize ability?


echo '<td border="1" width="15px" height="25px" id="img1" name="img1">
<img onmouseover="mover(event)" onmouseout="mout(event)" width="170px" height="100px" src='.$cimage.'></td>';

So you could specify the class for the td element and add an <a> tag to get control of the hover so it becomes like:

echo '<td class="dual_size" border="1"><a href="javscript:void(0)"><img src="' . $cimage . '" /></a></td>';

then in the stylesheet you have the code I posted like above specifying the class

td.dual_size a img {
width: 170px;
height: 100px;
}

td.dual_size a:hover img {
width: 250px;
height: 300px;
}

It is much simpler because in this case you should not need jscripts.

ravii

5+ Year Member



 
Msg#: 3792958 posted 10:48 am on Dec 1, 2008 (gmt 0)

Hello enigma1

thanks for the reply
but my problem is not sloved
here, when i mouse over on the image the size is not increased

this is what i used

echo '<td class="dual_size" width="15px" height="25px" id="img1" name="img1">
<a href="javscript:void(0)"><img src="' . $cimage . '"/></a></td>';

and the style sheet is

<style type="text/css">
td.dual_size a img
{
width: 170px;
height: 100px;
}

td.dual_size a:hover img
{
width: 250px;
height: 300px;
}
</style>

and i also tried like this
here the problem is, the cells in the table are not fixed at one position they are increased when i mouse over on the images

this is what i used

echo '<td border="1" width="15px" height="25px" id="img1" name="img1">
<img onmouseover="this.style.width=250;this.style.height=200"
onmouseout="this.style.width=170;this.style.height=100" width="170px" height="100px" src="' . $cimage . '"/></td>';

the main thing i need is it should Zoom In(increase) the images at the X and Y co-ordinates but the cells should not get disturbed

hope u understood my problem

waiting for the reply

[edited by: coopster at 1:17 pm (utc) on Dec. 1, 2008]
[edit reason] removed url per TOS [webmasterworld.com] [/edit]

enigma1

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3792958 posted 7:57 pm on Dec 1, 2008 (gmt 0)

Yes I understand in which case you supply another element outside, to preallocate the overall/maximum width/height needed. (btw you do not need to specify the width/height of the td because it is set by the dual size class).

eg:
echo '<td height="300" width="300"><table width="100%" border="0" cellpadding="0" cellspacing="0">' . "\n";
echo '<tr>' . "\n";
echo '<td class="dual_size" border="1"><a href="javscript:void(0)"><img src="' . $cimage . '" /></a></td>';
echo '</tr>' . "\n";
echo '</table></td>' . "\n";

As you see a 300x300 is set to the outside element which is enough to cover for the max width/height. Then the inner html should show as fixed because it does not overlap the width or height.

ravii

5+ Year Member



 
Msg#: 3792958 posted 5:55 am on Dec 2, 2008 (gmt 0)

hello enigma

what wrong am i doing still i am facing the trouble with this

don't know why it is not increasing the image size

please help me

i tried as u said above and when i hover on the image it is not increased (Zoom In)

echo '<table border="1" align="center" width="55%" height="60%" BORDERCOLOR="#C6C6C6" >';
for($r=1;$r<=3;$r++)
{
echo '<tr>';
for($d=1;$d<=3;$d++)
{
$obj=mysql_fetch_object($result);
$imageSrc=$obj->path;
$cimage="/images/".$obj->path;
echo '<td class="dual_size" border="1"><a href="javscript:void(0)"><img src="' . $cimage . '" /></a></td>';

}
echo '</tr>';
}
echo'</table>';

and the style sheet is

<style type="text/css">
td.dual_size a img
{
width: 170px;
height: 100px;
}

td.dual_size a:hover img
{
width: 250px;
height: 300px;
}
</style>

and one thing i didn't understand what is this
<a href="javscript:void(0)"> why are u using this please tell me

enigma1

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3792958 posted 9:53 am on Dec 2, 2008 (gmt 0)

ravii, I tested the html here and works as I explained. In your last post I do not see the outer element. But you should see the zoom effect.

You need to enclose each of the images in another element to take care of the max width/height if it is to use the zoom inline. Currently the loop that presents the images in a row uses just a <td> which means the image that zooms in, will push the adjacent images.

The <a> element is used because of the hover property. You need the hover property to perform the zoom right? The <img> element does not have a hover property.

The usual implementation for this though, is to create a popup like window instead the implementation is similar but you don't have to worry about the adjacent images because the hovered image pops up. The javascript:void(0) is like a placeholder it does nothing, you could had put a label #something and is just so the element to be html compliant.

If you want to use a css popup instead here is a sample that could help you. Create a new page test it first and finally integrate it. It does not use tables, just divs.

/* Styles */
<style type="text/css">
#zoom {
position:relative;
width:75px;
}
#zoom a.dual_class {
display:block;
width:75px;
height:75px;
}
#zoom a .zoomin {
display:block;
position:absolute;
width:0;
height:0;
}
#zoom a.dual_class:hover .zoomin {
display:block;
position:absolute;
width:300px;
height:300px;
}
</style>

/* PHP/HTML */
<?php
echo '<div id="zoom">' . "\n";
echo '<a class="dual_class" href="javscript:void(0)" title="my image"><img src="sample_image.gif" alt="No Zoom" border="0" /><img class="zoomin" src="sample_image.gif" alt="Zoom In" border="0" /></a>' . "\n";
echo '</div>' . "\n";
?>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved