Page 1 of 1

MouseOver with loop?

Posted: Wed Jul 14, 2004 3:21 pm
by Joe
I have a code written which shows a row of 6 images per column from the database. I was wondering if it was possible to use a mouseover effect on the images much like: http://www.racresearch.com. I know how I can do this in javascript but because I have made a loop im not sure how I would go about doing it. My script go's like:

Code: Select all

<?php
$link = mysql_connect($DBHost, $DBUser, $DBPass);
mysql_select_db($DBName) or die("Could not connect!" . mysql_error());
$sql = "SELECT * FROM images WHERE tag = '0'";
$result = mysql_query($sql) or die("Error!");

while ($row = mysql_fetch_array($result))
{
 if ($row == false) break;
 $images[] = $row['image'];
}

for($x = 0, $y = count($images); $x < $y; $x++)
{
  if($x % 6 == 0)
  echo '<tr>';

  echo '<td><A href="viewtopic.php?ID='.$images[$x].'"><img src="'.$images[$x].'" border=0 /></A></td>&nbsp;&nbsp;';

  if($x % 6 == 5)
  echo '</tr>';
}

$y = ($y + 5) % 6;

if($y != 5)
echo '<td colspan=".($y+1)."> </td></tr>';

$sql = "SELECT * FROM images WHERE tag = '1' AND name = 'Contact'";
$result = mysql_query($sql) or die("Error!");
$row = mysql_fetch_assoc($result);
$image = $row['image'];

echo '<tr>';
echo '<td><A href="contact.php"><img src="'.$image.'" border=0 /></A></td>&nbsp;&nbsp;';
echo '</tr>';
mysql_close($link);
?>
Any help appreciated.


Joe 8)

Posted: Wed Jul 14, 2004 3:45 pm
by feyd
you may need to combine the rollover and rollout images together into an array (javascript), then reference that through the onmouseover/onmouseout calls.

Posted: Wed Jul 14, 2004 3:46 pm
by johnperkins21
If I'm reading this right, you're looking for a rollover effect to change the image? I wrote a quick little rollover function that accepts the variables of the replacement image, and the image name, like so:

Code: Select all

function menuhover(url,name) &#123;

	if (document.images) &#123; // only if the browser recognizes document.images
		document.images&#1111;name].src = "images/" + url;
	&#125;

&#125;
And then call it like so:

Code: Select all

&lt;a href="products.html"&gt;
&lt;img src="images/menu_products.gif" border="0" name="Products" onMouseOver="menuhover('menu_products_hover.gif','Products')" onMouseOut="menuhover('menu_products.gif','Products')"&gt;
&lt;/a&gt;
So you could use it like so:

Code: Select all

<?php
<?php
$link = mysql_connect($DBHost, $DBUser, $DBPass);
mysql_select_db($DBName) or die("Could not connect!" . mysql_error());
$sql = "SELECT * FROM images WHERE tag = '0'";
$result = mysql_query($sql) or die("Error!");

while ($row = mysql_fetch_array($result))
{
if ($row == false) break;
$images[] = $row['image'];
}

for($x = 0, $y = count($images); $x < $y; $x++)
{
  if($x % 6 == 0)
  echo '<tr>';

 echo "<td><A href="viewtopic.php?ID=".$images[$x].""><img src='".$images[$x]."' border=0 name='".$images[$x]."' onMouseOver="menuhover('".$images[$x]."2','".$images[$x]."')" onMouseOut="menuhover('".$images[$x]."','".$images[$x]."')"/></A></td>";

  if($x % 6 == 5)
  echo '</tr>';
}

$y = ($y + 5) % 6;

if($y != 5)
echo '<td colspan=".($y+1)."> </td></tr>';

$sql = "SELECT * FROM images WHERE tag = '1' AND name = 'Contact'";
$result = mysql_query($sql) or die("Error!");
$row = mysql_fetch_assoc($result);
$image = $row['image'];

echo '<tr>';
echo '<td><A href="contact.php"><img src="'.$image.'" border=0 /></A></td>  ';
echo '</tr>';
mysql_close($link);
?>

?>
That should at least get you in the right direction.

Posted: Wed Jul 14, 2004 4:09 pm
by Joe
When I try your code johnperkins I get a javascript error. I do not use javascript but I know a fair bit therefore I am slightly struggling here. Just to note in the image column of the database the full URL's are held. That is http://mysite.com/images/home_01.gif.

When you have menuhover('".$images[$x]."2','" does this mean that the image when I rollover has to end with a number 2?

Regards


Joe 8)

Posted: Wed Jul 14, 2004 4:19 pm
by johnperkins21
Yes, basically $images[$x] is your main image like image.gif, and then you would create image2.gif as your rollover image. You could change it to _rollover or whatever you want, but it would be the same image name with '2' or 'b' or '_rollover' or whatever. You might have to work with it to get it working for you, but the javascript definitley works for me. You can see an example of my use of it here:

http://www.mutedsound.com/cs152/ <-- It's just a class project, but I use that javascript there.

Posted: Wed Jul 14, 2004 4:24 pm
by Joe
OK thanks a bunch johnperkins21. I saw your code works great but I am now left wondering whether I should change the database links http://mysite.com/images/home_01.gif to just the image or /images/home_01.gif?

Any suggestions? Thanks

Posted: Wed Jul 14, 2004 4:34 pm
by johnperkins21
I normally just use relational links like "image/home_o1.gif" simply because you can transfer code easier. Someone with more experience than I might have a better reason, but I think relational is the way to go.

And if you're storing it in a database, why not just the image name? If you change the directory structure, all the links in your dbase are useless.