www.webdeveloper.com
Results 1 to 4 of 4

Thread: onmouseover underline

  1. #1
    Join Date
    May 2009
    Posts
    3

    onmouseover underline

    total js noob here. What i'm trying to do is underline the first letter of a link when it's hovered on. can you tell me why this doesn't work?

    Code:
    <script type="text/javascript">
    function underlineFirst() {
    	this.innerHTML[0].style.textDecoration='underline';
    }
    </script>
    
    ...
    
    <a href="www.url.com" onmouseover="underlineFirst()" >Link text</a>

  2. #2
    Join Date
    Jul 2009
    Posts
    45
    First, the innerHTML method returns the text within the tag.
    Second, style.method is only used with tags, not text.
    So putting a style under text does not work because it's not a tag element.

    If you want to manipulate the text, then you have to put HTML tags or a class within it.
    HTML Code:
    this.innerHTML = "<u>" + this.innerHTML + "</u>";
    This following underlines the first character in the text.
    HTML Code:
    var text = this.innerHTML;
    this.innerHTML = "<u>" + text[0] + "<u>" + text.substring( 1, text.length);
    However, note that the <u> is deprecated in HTML 4.01. So it would because to use a class. But the above will still work.

    For onmouseout
    HTML Code:
    text = this.innerHTML
    this.innerHTML  = text[ x ] + text.substring( x, x );
    // fill in the correct numbers that are suppose to be there. 
    // Hint: the first one is 3.

  3. #3
    Join Date
    May 2009
    Posts
    3
    hmm, it still isn't working. I changed it to exactly how you said:
    Code:
    <script type="text/javascript">
    function underlineFirst() {
    	var text=this.innerHTML;
    	this.innerHTML='<u>'+text[0]+'</u>'+text.substring(1,text.length);
    }
    </script>
    ... but still nothing. Edit: i threw in an alert box with the var text as the value, and apparently it's undefined. Also I can't hit return in this post form, wtf?
    Last edited by evanct; 07-16-2009 at 11:04 PM.

  4. #4
    Join Date
    Jul 2009
    Posts
    45
    Ok this is what you want to do.
    First you have to turn off the underline for links, and make a class for underlining.
    HTML Code:
    /* CSS */
    a{
    	text-decoration: none;
    }
    .underLine{
    	text-decoration: underline;
    }
    Then you have to make a hover condition.
    Hover is onmouseover and onmouseout.
    Also, it's easier to just pass the obj through the arguments.
    this refers to the element that called the event.
    HTML Code:
    <a href="www.url.com" onmouseover="underlineFirst(this, true);" onmouseout="underlineFirst( this, false);" >Link text</a>
    OK. Don't use the u tag because it's deprecated. So what you have to do is use a class.
    All you want to do is add a class to the first element and turn it on and off for the hover events.
    HTML Code:
    // Javascript
    function underlineFirst( id, mouseOver ) {
    	var text= id.innerHTML; //Gets the HTML.
    	if( text[0] != "<" ){ //Checks to see if it's already been tagged.
    		text='<span class = "underLine">'+text[0]+'</span>'+text.substring(1,text.length);	
    If not then attach a span to only the first letter.
    	}
    // The hover event.
    	if( mouseOver ){
    		text = text.replace( "noUnderLine", "underLine" );
    	}
    	else{
    		text = text.replace( "underLine", "noUnderLine" );
    	}
    // Finally replace the text.
    	id.innerHTML = text;
    }
    
    Hoped that helped. 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles