Image rollover - 2 ways

JavaScript
1

Hello all.
I have 75% of my idea working here…but am lost on the last step.

Here is an example of what is done so far.
inspirationsartgallery.com/beta/hover.php

When you mouse over the b&w images you will see the image change to color.
When you mouse over the links on the left they will have a rollover and also
change the image on the right to color.

What I would also like is mouseover the image to change the rollover state
of the link on the left.

Here is my code so far…

<style type="text/css">
<!--
/*  =================================  */
/*  ====== Subject Matter Rollovers ======  */

#menuButton1{

height: 41px;
width: 133px;
overflow: hidden;
background: url(images/content/buttons/subjectmatter.png) top left no-repeat;
display: block;
text-decoration:none;
line-height:2.5em;
color:#000000;

}
 
#menuButton1:hover{

color:#FFFF00;
line-height:2.5em;
background-position: bottom left;

}

#link2{

height: 50px;
width: 250px;
overflow: hidden;
background: url(images/content/buttons/link2.png) top left no-repeat;
display: block;
text-decoration:none;
line-height:2.5em;
color:#000000;

}
 
#link2:hover{

color:#FFFF00;
line-height:2.5em;
background-position: bottom left;

}
<!-- Image mouseover to change link rollover-->
#menu_hover{
background: url(images/content/buttons/link2.png);
text-decoration:none;
line-height:2.5em;
color:#000000;
background-position: bottom left;

}

-->
</style>

<?PHP

echo '<table align="center" border="0" cellspacing="0" cellpadding="20" bgcolor="#777777">';
echo '<tr>';
echo '<td valign="top" align="center">';
echo '<a href="hover.php" onmouseover="MyImage1.src=\\'images/items/1265209482-1.jpg\\';" onmouseout="MyImage1.src=\\'images/items/1265209482-g.jpg\\';" id="menuButton1">Link 1</a>';
echo '<br />';
echo '<a href="hover.php" onmouseover="MyImage2.src=\\'images/items/1265205798-1.jpg\\';" onmouseout="MyImage2.src=\\'images/items/1265205798-g.jpg\\';" id="link2">&nbsp;</a>';
echo '<br />';
echo '</td>';
echo '<td  width="266" valign="top" align="left">';
echo '<a href="hover.php" onMouseOver="document.MyImage1.src=\\'images/items/1265209482-1.jpg\\';" onMouseOut="document.MyImage1.src=\\'images/items/1265209482-g.jpg\\';" title="Link 1"><img src="images/items/1265209482-g.jpg" name="MyImage1"  height="414" width="500" border="0"></a>';
echo '<a href="hover.php" onMouseOver="document.MyImage2.src=\\'images/items/1265205798-1.jpg\\';document.getElementById(\\'link2\\').class=\\'menu_hover\\';" onMouseOut="document.MyImage2.src=\\'images/items/1265205798-g.jpg\\';" title="Link 2"><img src="images/items/1265205798-g.jpg" name="MyImage2"  height="398" width="500" border="0"></a>';
echo '</td>';
echo '</tr>';
echo '</table>';

?>

I thought the following might work (2nd image)

document.getElementById(\\'link2\\').class=\\'menu_hover\\';

But as you see no it does not.

Thank you in advance for any help

2 
document.getElementById(\\'link2\\').class[B]Name[/B]=\\'menu_hover\\';
3

I did try className too and it was a no go.

Thanks for your reply though

4

Check this out…

http://dfizz.com/roll

It uses jQuery and you can see it can accomplished with a few lines.

5

Wow, how generous. Thank you.
I will copy the code asap.

6

I see one problem now.
The Images on the right need to be links also.
This is a major part of what needs to be accomplished.

I’m not sure I will be able to fix it up…but I shall try.

**Scratch that…I fixed it :slight_smile: