Multiple rollover buttons

same images, repeated

[Murdoch]

So I have a PHP script that calls a bunch of options that make use of JavaScript rollover buttons, but the problem is that when there's more than one option on the page the button script conflicts with itself. How do I get the buttons to continue to make use of their rollover states without having to call multiple scripts?

If it was as simple as just a mouseover I would use CSS but I also have an onClick state as well.

Thanks,
-Doc

[Wolf_man]

could you post some sample code so that we might better understand your issue?

[rocknbil]

when there's more than one option on the page the button script conflicts with itself.

Code would clarify - but I am guessing it's because your buttons all have the same ID or name? Make sure they're unique.

[Murdoch]

Code would clarify - but I am guessing it's because your buttons all have the same ID or name? Make sure they're unique.

That's the problem really, the buttons displaying are based on code within PHP while loops, so naming them something different each time was a bit of a fuss, I just ended up placing the scripts within the while loops too, as so:

 <?php
 if (!$logged_in) { ?>
 <script language="javascript" type="text/javascript">
 normal_image_<?php echo $i;?> = new Image();
 normal_image_<?php echo $i;?>.src = "images/guest.gif";
 </script>
 <a href="http://www.example.com/forum/<?php echo $forurl;?>/" onMouseOver="normal_image_<?php echo $i;?>.src='images/guest-click.gif';" onMouseOut="normal_image_<?php echo $i;?>.src='images/guest.gif';" onmousedown="normal_image_<?php echo $i;?>.src='images/guest-hover.gif';"><img name="normal_image_<?php echo $i;?>" src="images/guest.gif" width="165" height="40" alt="Enter as Guest" /></a> <?php }
 elseif ($logged_in && $_GET['view'] != "signup") {
 if ($m < 1) { ?>
 <script language="javascript" type="text/javascript">
 normal_image_<?php echo $i;?> = new Image();
 normal_image_<?php echo $i;?>.src = "images/signup.gif";
 </script>
 <a href="http://www.example.com/forums.php?forum=<?php echo $fid;?>&view=signup" onMouseOver="normal_image_<?php echo $i;?>.src='images/signup-click.gif';" onMouseOut="normal_image_<?php echo $i;?>.src='images/signup.gif';" onmousedown="normal_image_<?php echo $i;?>.src='images/signup-hover.gif';"><img name="normal_image_<?php echo $i;?>" src="images/signup.gif" width="165" height="40" alt="Member Sign Up" /></a> <?php }
 else { ?> 
 <script language="javascript" type="text/javascript">
 normal_image_<?php echo $i;?> = new Image();
 normal_image_<?php echo $i;?>.src = "images/member.gif";
 </script>
 <a href="http://www.example.com/forum/<?php echo $forurl;?>/" onMouseOver="normal_image_<?php echo $i;?>.src='images/member-click.gif';" onMouseOut="normal_image_<?php echo $i;?>.src='images/member.gif';" onmousedown="normal_image_<?php echo $i;?>.src='images/member-hover.gif';"><img name="normal_image_<?php echo $i;?>" src="images/member.gif" width="165" height="40" alt="Member Log In" /></a>
 <?php } } ?>

And then there's a variable $i which increases with each run. A bit inefficient if you ask me, but it seems the only way I could do achieve the result I wanted...

Thanks though. If you have any better way of handling it I'd be interested.

<edited>Removed domain name</edited>

[edited by: Murdoch at 7:49 pm (utc) on May 16, 2008]