Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Change text colour when mouseover an image?

Posted on 2006-10-22
5
Medium Priority
?
1,160 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

610 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