473,785 Members | 2,137 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How can I use onmouseover to change text color

110 New Member
I want the text to change from gray to bright red when the mouse is moved over the name of our company. Here is the code that doesn't work. What do I need to change to make this work?

Expand|Select|Wrap|Line Numbers
  1. function mouseOver(){
  2.     document.getElementById('unitedBrokers').style.font="size='2' face='Arial color='#FF0000'";
  3. }// mouseOver()
  4.  
  5. function mouseOut(){
  6.     document.getElementById('unitedBrokers').style.font="size='2' face='Arial color='#808080'";
  7. }// mouseOut()
  8.  
  9. <a id="unitedBrokers" onmouseover="mouseOver()" onmouseout="mouseOut()" style="text-decoration: none">United Brokers Incorporated</a>
  10.  
Feb 17 '09 #1
19 16135
Dormilich
8,658 Recognized Expert Moderator Expert
your CSS declaration (syntax) is wrong.

you could avoid javascript (except for IE) by using the CSS pseudo-class :hover.
Expand|Select|Wrap|Line Numbers
  1. #unitedBrokers:hover {
  2.     font-family: Arial;
  3.     /* more settings go here */
  4. }
you can also enhance your code by using the "this" keyword:
Expand|Select|Wrap|Line Numbers
  1. <a id="unitedBrokers">United Brokers Incorporated</a>
  2. <script type="text/javascript">
  3. function mouseOver()
  4. {
  5.     this.style.font = "Arial";
  6. }
  7. function mouseOut()
  8. {
  9.     this.style.font = "Helvetica"; // just as example
  10. }
  11. var ub = document.getElementById('unitedBrokers');
  12. ub.addEventListener("mouseover", mouseOver, false);
  13. ub.addEventListener("mouseout", mouseOut, false);
  14. </script>
Feb 17 '09 #2
andersond
110 New Member
When I tried your second example I got the error "ub" is null or not an object.

Expand|Select|Wrap|Line Numbers
  1. ub.addEventListener("mouseover", mouseOver, false); 
  2.  
  3.  
Any idea what's wrong?
Here is exactly what I put in the header
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript"> 
  2. function mouseOver(){ 
  3.     this.style.font.color = "#FF0000"; 
  4. function mouseOut(){ 
  5.     this.style.font.color = "#808080";  
  6. var ub = document.getElementById('unitedBrokers'); 
  7. ub.addEventListener("mouseover", mouseOver, false); 
  8. ub.addEventListener("mouseout", mouseOut, false); 
  9. </script>
  10.  
Feb 18 '09 #3
Dormilich
8,658 Recognized Expert Moderator Expert
@andersond
yup, you tried to access an element, that was not yet loaded. you need to wait 'til the page finished loading.
Feb 18 '09 #4
andersond
110 New Member
How do I do wait until the page is loaded?
Feb 18 '09 #5
Dormilich
8,658 Recognized Expert Moderator Expert
@andersond
Expand|Select|Wrap|Line Numbers
  1. window.addEventListener("load", chainLoader, false);
  2. // chainLoader() (custom function) holds all functions executed at start-up
Feb 18 '09 #6
andersond
110 New Member
The error this time is "chainLoade r not defined.
Feb 18 '09 #7
Dormilich
8,658 Recognized Expert Moderator Expert
as said in the hint "(custom function)" you have to define chainLoader() yourself.
Feb 18 '09 #8
andersond
110 New Member
Woops! My brain is asleep
Feb 18 '09 #9
andersond
110 New Member
This line:
Expand|Select|Wrap|Line Numbers
  1. window.addEventListener("load", chainLoader, false);
  2.  
produced this error:
'object doesn't support this property or method'

Here is my chainLoader() function:
Expand|Select|Wrap|Line Numbers
  1. function chainLoader(){
  2.     mouseOver();
  3.     mouseOut();
  4.     document.screenOne.pState.focus();
  5. }            
  6.  
I placed it in the opening line of the body
Expand|Select|Wrap|Line Numbers
  1. <body topmargin="0" onLoad="chainLoader()" style="text-align: right">
  2.  
and this line
Expand|Select|Wrap|Line Numbers
  1.     this.style.font.color = "#FF0000"; 
  2.  
produced the error: 'this.style.fon t" is null or not an object
Feb 19 '09 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

4
17112
by: Tim | last post by:
Hope someone in the big wide world can help... What I want to do is have an image slideshow which automatically scrolls through a series of images very fast, then pauses when you move your mouse over the image. The images will flick through (at a rate of about 5 per second) then pause when the user onMouseOver's. Any help would be gratefully received. :o)
5
10901
by: CQMMAN | last post by:
Hello, I am trying to change a piece of text using onmouseover. I have tried a few things so far and nothing has really worked. I get get a new piece of text to appear but bastardizing someone elses code, but can't figure out how to hide the other one.... I sort of have the following but don't know if this is close to the best way of doing it really...
7
2279
by: Richard | last post by:
I know I can have like <a href="#" onclick="dothis" onmouseover="dothat"> But how do you properly code two mouseover's in one statement? <a href="#" onmousever="dothis" onmouseover="dothat"> As an example of use: Column A holds menu items. When a mouse over is performed, two actions take place instead of one. Action one sends an image to a division in column B, action two sends text to another division in column B.
12
12289
by: Epetruk | last post by:
Hi all, I want a page where the contents of a table cell are replaced with an image when the mouse moves over the cell, and the text is restored when the mouse moves out. Here's the html for the page: <HTML> <HEAD> <style type="text/css">
5
3510
by: Martin Chen | last post by:
I have a frame set (as per MS FrontPage 2000). It has a contents and a main frame. The contents frame has a menu bar written with with javascript (in the context of a table). In IE6.1 everything works fine as it also does in firefox if I call the contents frame directly (i.e. outside of its frameset). However, if I call my main page (index.html) which invokes the frame set, the contents frame javascript menubar onmouseover function...
3
3947
by: drjackk | last post by:
Hello, I'm trying to change the onmouseover event dynamically. This sets-up the initial onmouseover event: <a href="home.html"> <img border="0" id="img22" src="images/home1.jpg" height="15" width="85" alt="Home" onmouseover="FP_swapImg(1,0,/*id*/'img22',/*url*/'images/home2.jpg')"</a>
4
2135
by: Rob R. Ainscough | last post by:
I'm using .NET v1.1 with ASPX web page. I'm trying to have a RollOver hyperlink that will change images on an image control and update the text in a Label control. I've got the image swapping working, however I don't know how to get my Label control text to change with the onMouseOver event HTML... </asp:hyperlink><asp:hyperlink id="lnkImageS" style="Z-INDEX: 113; LEFT:
3
5876
by: Vear | last post by:
Hi, I'm looking to change the cssclass on a hyperlink with the onmouseover. I've tried the 3 syntax's below but to no success. Can someone point me in the right direction. Thanks HyperLink1.Attributes.Add("onmouseover", "this.ClassName='hover'") HyperLink1.Attributes.Add("onmouseover", "this.CssClass='hover'") HyperLink1.Attributes.Add("onmouseover", "this.Class='hover'")
1
18853
by: den2005 | last post by:
Hi everybody, I am confused and still looking why this codes is not working. Can anyone notice or know why this code is not working? Thanks in advance. Code working: <form id="form1" runat="server"> <div> &nbsp;</div> <div>
0
10356
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10162
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10100
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8988
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7509
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6744
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5528
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3665
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2893
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.