Chat LIVE With Programming Experts! There Are 23 Online Right Now...

Welcome to Dream.In.Code
Become a PHP Expert!

Join 244,282 PHP Programmers for FREE! Get instant access to thousands of PHP experts, tutorials, code snippets, and more! There are 1,150 people online right now. Registration is fast and FREE... Join Now!




how increase the size of the images when mouseover and mouseout event

 
Reply to this topicStart new topic

how increase the size of the images when mouseover and mouseout event

swetha123
30 Nov, 2008 - 11:55 PM
Post #1

New D.I.C Head
*

Joined: 30 Nov, 2008
Posts: 5

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 in java script [font=Times New Roman][size=2][size=5][size=5][size=7][size=2]

please help me out how to do this

here is my code


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>
</head>

<?php
           function connect()
           {
                 $dbhost='aaa';
              $dbuser='aa';
              $dbpass='aaaa';
              $conn= mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'.mysql_error());
              $dbname='aaaaa';
              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> </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="java script:;" 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="java script:;" 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">
<img onmouseover="mover(img1)" onmouseout="mout(img1)" width="170px" height="100px" src='.$cimage.'>

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



thanks in advance

This post has been edited by Martyr2: 1 Dec, 2008 - 11:53 AM

User is offlineProfile CardPM
+Quote Post


Martyr2
RE: How Increase The Size Of The Images When Mouseover And Mouseout Event
1 Dec, 2008 - 11:53 AM
Post #2

Programming Theoretician
Group Icon

Joined: 18 Apr, 2007
Posts: 6,656



Thanked: 613 times
Expert In: C/C++, Java, VB, VB.NET, C#, PHP, Web Development, HTML & CSS, Javascript

My Contributions
First of all this is not a PHP question, this is a javascript question. Anything that is done on the client side (such as with the mouse or making something immediately respond because of the user's own actions) is accomplished through javascript or CSS. I also see there you have a few functions that attempt to adjust the size of the image on mouse over and mouse out. How is that working out for you? Is it adjusting the size at all for "img1"? Through javascript you may want to go with document.getElementById(nameofid).style.width = 'sizehere';. That is, going through the style to adjust the width which is the proper way.

The mover and mout functions should also be written to be more generic so that you can pass it any image name and it will adjust the target image. That way you don't need to hardcode "img1" into the document.getElementById statements. That way through each rollover you can pass the appropriate ID to the functions to trigger the size adjusting.

Oh and lastly, use code tags please. Makes for nicer and more readable posts. Helps us debug your problems too. Thanks a bunch! smile.gif
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 7/4/09 02:18PM

Live PHP Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

PHP Tutorials

Reference Sheets

PHP Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month