Page 1 of 1

Image swap help

Posted: Mon Sep 26, 2005 2:58 pm
by Ennio
feyd | Please use

Code: Select all

and

Code: Select all

tags where appropriate when posting code. Read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url][/color]


I need to do an image swap but I'm not very fimiliar with PHP, and I would like some help.

I need to have, when the user put the mouse over the thumbs, display a bigger image on the side.
Here is my code.... my code is not working with the mouse over, but I can display the thumbs.

Code: Select all

<?php
//session_start(); 
//echo $_Session[$id];

//if($_SESSION["$id"]<>1)
//{
// header("Location: login.php?id=$id");
 // echo   "<meta HTTP-EQUIV='refresh' content=1;url='login.php?id=$id'>";
//}


 ?>
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function MM_swapImgRestore() {
	var i, x, a = document.MM_srl;
	for ( i = 0; a && i < a.length && ( x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
}

function MM_swapImage() { //v3.0
	var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i<(a.length-2); i+=3)
	if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body,td,th {
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
-->
</style></head>
<body>

<div align="center">
  <p>&nbsp;</p>
</div>
<table align="center" width="793" height="311" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="330" height="37" align="center" valign="top">
      <br>
		<?php
			//Category Title
			include "configure.php";
			$strsql = "Select cat_nm, cat_tl from tbl_category where id = $id";
			$myresult = mysql_query($strsql, $db);
			$myrow = mysql_fetch_row($myresult);
			$folder = $myrow[0];
			$title = $myrow[1];

			echo "<center><h1>$folder</h1></center>";
			echo "</td></tr><tr><td width='330' height='196' valign='top'>";
		
			//Display thumbns
			$dir = "../category/$folder/";
			$i = 0;
			if ($folder <> "") {
				if ($handle = opendir('../category/' . $folder . '/thumbnail')) {
					while (false !== ($file = readdir($handle))) {
						if ($file != "." && $file != "..") {
							$myarray[$i] = $file;
							$i++;
						}
					}
					closedir($handle);
				}
			displayimages($myarray, $folder, $title, $id);
			}
			
			function displayimages($image_array, $folder, $title, $id) {
				$imageinline = 4;
				$perpage = 12;
				$num_rows = count($image_array);
				$totalpages = ceil($num_rows/$perpage);
				$pageno = $_GET['pageno'];
				if (empty($pageno)) {
					$pageno = 1;
				}
				if ($pageno == "") {
					$start = 0;
					$end = $perpage;
				}
				else {
					$start = ($pageno * $perpage) - $perpage;
					$end = $perpage + $start;
				}
				for ($i = $start, $k = 0; $i < $end; $i++, $k++) {
					if (!empty($image_array[$i])) {
						//Display Thumbs
						echo "<img src='../category/$folder/thumbnail/$image_array[$i]' onmouseover='MM_swapImage('Image1', '', '../category/$folder/$image_array[0]' onmouseout'MM_swapImgRestore()' border = 0> &nbsp;&nbsp;";
					}
				}
				if ($pageno != 1) {
					$pageprev = $pageno -1;
					echo ("<br><a href=\"$PHP_SELF?id=$id&pageno=$pageprev\">Previous</a>&nbsp;&nbsp;");
				}
				for ($j = 1; $j <= $totalpages; $j++) {
					if ($j == $pageno) {
						echo ("<b>" . $j . "&nbsp;&nbsp;</b>");
					}
					else {
						echo ("<a href=\"$PHP_SELF?id=$id&pageno=$j\">$j</a>&nbsp;&nbsp;");
					}
				}
				if (($num_rows - ($perpage * $pageno)) > 0) {
					$pagenext = $pageno + 1;
					echo ("<a href=\"$PHP_SELF?id=$id&pageno=$pagenext\">Next</a>&nbsp;&nbsp;");
				}
			}
		?>	</td>
    <td height="311" width="463" rowspan="2" valign="top"><div align="center">
		<?php
			echo "<img src='../category/$folder/$image_array[0]' id='Image1' width='450' height='311'>";
		?>
		</div>
	</td>
  </tr>
</table>
<table align="center" width="793" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="793" height="12" valign="top"><div align="center"><br>
      <br>
      <br>
    <img src="../../images/contact.jpg" width="278" height="12"></div></td>
  </tr>
</table>
</body>

</html>

feyd | Please use [php] and

Code: Select all

tags where appropriate when posting code. Read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url][/color]

Posted: Mon Sep 26, 2005 11:36 pm
by ruchit
for images to change on mouseover... you'll need to implement it using javascript (client-side) b'cos php works on server and can't identify an event such as mouse-over which occurs on client's browser.... try searching for javascript resources on image swapping