Question

I’m trying to develop a plugin that shows website screenshot, when a user clicks on the name of the comment’s author.
All works when there is just one comment, but when are more than one comment the script doesn’t work.
I think the problem is in the name of the variable called and posted for each comment.
But I don’t know how to dynamically change the name of the JS variable and how to dynamically call it.

This is the code for mouseover (in the header)

    <script type="text/javascript">
function MOver(picimage)
{
Picture_Over = eval(picimage +"On.src")
document[picimage].src = Picture_Over
}
function MOut(picimage)
{
Picture_Out = eval(picimage +"Off.src")
document[picimage].src = Picture_Out
}
-->
</script>

Then this is the code to show the mouseover:

    <script type="text/javascript"><!--

var Img2On = new Image();
Img2On.src = "<?php echo $urlnohttp;?>";
var Img2Off = new Image();
Img2Off.src = "<?php bloginfo('url');?>/wp-content/plugins/[...]/control_play.png";

</script>
<a href="<?php echo $commenturl ?>" onMouseOver="MOver('Img2')" onMouseOut = "MOut('Img2')" ><?php echo $author ?> <img src="<?php bloginfo('url');?>/wp-content/plugins/[...]/control_play.png" border="0" name="Img2"></img></a> 

I think the problem is in the “Img2” name that isn’t unique.

Answer 1

I am moving most of my comment over to this answer:

To dynamically call a variable, change the function to look like this:

function MouseChange( img , imageSrc ) // img will be the tag name, and imageSrc will be the URL of the image
{
    document[img].src = imageSrc;
}

To call this you will do this:

<?php $blogPostID = ???;// I don't know how to get blog post ID of the top of my head ?>
<script type="text/javascript"><!--
    var Img<?= $blogPostID ?>On = new Image();
    Img<?= $blogPostID ?>On.src = "<?php echo $urlnohttp;?>";
    var Img<?= $blogPostID ?>Off = new Image();
    Img<?= $blogPostID ?>Off.src = "<?php bloginfo('url');?>/wp-content/plugins/[...]/control_play.png";
// this closes the HTML comment: --></script>

<a href="<?php echo $commenturl ?>" onMouseOver="MouseChange( 'Img<?= $blogPostID ?>' , Img<?= $blogPostID ?>On.src )" onMouseOut = "MouseChange( 'Img<?= $blogPostID ?>' , Img<?= $blogPostID ?>Off.src )" ><?php echo $author ?>
    <img src="<?php bloginfo('url');?>/wp-content/plugins/[...]/control_play.png" border="0" name="Img<?= $blogPostID ?>" />
</a>

So what I did was replace all the numbers with the blog post ID, then you can be [relatively] sure it is unique, as long as no other parts of the page makes things called “Img#”.