Solved

Change text colour when mouseover an image?

Posted on 2006-10-22
5
1,156 Views
Last Modified: 2009-07-29
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
0
Comment
Question by:themitch2004
  • 3
5 Comments
 
LVL 33

Expert Comment

by:hongjun
ID: 17783710
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
0
 
LVL 30

Accepted Solution

by:
callrs earned 500 total points
ID: 17783722
0
 
LVL 33

Expert Comment

by:hongjun
ID: 17783770
Mine don't work?
0
 

Author Comment

by:themitch2004
ID: 17783771
Yours did work, but my editor told me that Span doesn't really support the color attribute? But thank you for replying so quickly.
0
 
LVL 33

Expert Comment

by:hongjun
ID: 17783779
Yes my fault.
It should have been like this

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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question