MouseOver with loop?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
Joe
Forum Regular
Posts: 939
Joined: Sun Feb 29, 2004 1:26 pm
Location: UK - Glasgow

MouseOver with loop?

Post 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)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post 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.
User avatar
Joe
Forum Regular
Posts: 939
Joined: Sun Feb 29, 2004 1:26 pm
Location: UK - Glasgow

Post 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)
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post 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.
User avatar
Joe
Forum Regular
Posts: 939
Joined: Sun Feb 29, 2004 1:26 pm
Location: UK - Glasgow

Post 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
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

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