Change text colour when mouseover an image?

themitch2004
themitch2004 used Ask the Experts™
on
Hi

I have an image that, when the user moves over it, I'd like a peice of text elsewhere on the page to change colour ...

This is my code so far:

    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        <table cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td width="60"></td>
                                <td><a href="#" onMouseOver="ImageName1.src='images/Button_1_ROL.jpg'" onMouseOut="ImageName1.src='images/Button_1_NOR.jpg'"><img src="images/Button_1_NOR.jpg" name=ImageName1 border="0"></a></td>
                                <td width="5"></td>
                                <td><a href="#" onMouseOver="ImageName2.src='images/Button_2_ROL.jpg'" onMouseOut="ImageName2.src='images/Button_2_NOR.jpg'"><img src="images/Button_2_NOR.jpg" name=ImageName2 border="0"></a></td>
                                <td width="5"></td>
                                <td><a href="#" onMouseOver="ImageName3.src='images/Button_3_ROL.jpg'" onMouseOut="ImageName3.src='images/Button_3_NOR.jpg'"><img src="images/Button_3_NOR.jpg" name=ImageName3 border="0"></a></td>
                                <td width="5"></td>
                                <td><a href="#" onMouseOver="ImageNamei.src='images/Button_i_ROL.jpg'" onMouseOut="ImageNamei.src='images/Button_i_NOR.jpg'"><img src="images/Button_i_NOR.jpg" name=ImageNamei border="0"></a></td>
                            </tr>
                        </table>
                    </td>
                    <td width="25"></td>
                    <td valign="top" class="index">
                        hello, thank you for visiting lionfish design, your visit is<br>
                        important to us. please choose from the following options: <br>
                        for <font color="#5A717F">web design</font> please press 1, for <font color="#5A717F">print design</font> please<br>
                        press 2, for <font color="#5A717F">logo design</font> please press 3, for <font color="#5A717F">copywrting</font><br>
                        please press 4, for <font color="#5A717F">press releases</font> please press 5, for<br>
                        <font color="#5A717F">website hosting</font> please press 6, for all other services<br>
                        please press 0. please make selection now.<br>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

So, when the user moves over the first image, I'd like to light the words 'web design' up in orange ... how can I do this?

Thanks
M
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try this

<html>

<head>
</head>

<body>

<table>
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        <table cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td width="60"></td>
                                <td><a href="#" onMouseOver="ImageName1.src='images/Button_1_ROL.jpg';document.getElementById('spn1').style.color='orange';" onMouseOut="ImageName1.src='images/Button_1_NOR.jpg';document.getElementById('spn1').style.color='#5A717F';"><img src="images/Button_1_NOR.jpg" name=ImageName1 border="0"></a></td>
                                <td width="5"></td>
                                <td><a href="#" onMouseOver="ImageName2.src='images/Button_2_ROL.jpg'" onMouseOut="ImageName2.src='images/Button_2_NOR.jpg'"><img src="images/Button_2_NOR.jpg" name=ImageName2 border="0"></a></td>
                                <td width="5"></td>
                                <td><a href="#" onMouseOver="ImageName3.src='images/Button_3_ROL.jpg'" onMouseOut="ImageName3.src='images/Button_3_NOR.jpg'"><img src="images/Button_3_NOR.jpg" name=ImageName3 border="0"></a></td>
                                <td width="5"></td>
                                <td><a href="#" onMouseOver="ImageNamei.src='images/Button_i_ROL.jpg'" onMouseOut="ImageNamei.src='images/Button_i_NOR.jpg'"><img src="images/Button_i_NOR.jpg" name=ImageNamei border="0"></a></td>
                            </tr>
                        </table>
                    </td>
                    <td width="25"></td>
                    <td valign="top" class="index">
                        hello, thank you for visiting lionfish design, your visit is<br>
                        important to us. please choose from the following options: <br>
                        for <span id="spn1" color="#5A717F">web design</span> please press 1, for <font color="#5A717F">print design</font> please<br>
                        press 2, for <font color="#5A717F">logo design</font> please press 3, for <font color="#5A717F">copywrting</font><br>
                        please press 4, for <font color="#5A717F">press releases</font> please press 5, for<br>
                        <font color="#5A717F">website hosting</font> please press 6, for all other services<br>
                        please press 0. please make selection now.<br>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>

</html>


hongjun
Awarded 2006
Top Expert 2006
Commented:
Mine don't work?

Author

Commented:
Yours did work, but my editor told me that Span doesn't really support the color attribute? But thank you for replying so quickly.
Yes my fault.
It should have been like this

<span id="spn1" style="color:#5A717F">

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial