Solved

Change text colour when mouseover an image?

Posted on 2006-10-22
5
1,151 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
Comment Utility
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
Comment Utility
0
 
LVL 33

Expert Comment

by:hongjun
Comment Utility
Mine don't work?
0
 

Author Comment

by:themitch2004
Comment Utility
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
Comment Utility
Yes my fault.
It should have been like this

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

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now