?
Solved

Change text colour when mouseover an image?

Posted on 2006-10-22
5
Medium Priority
?
1,159 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

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

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?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

762 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