onmouseout和onmouseover

Question

I am working on homework that involves working with javascript. Part of my homework assignment is to use the event handlers onmouseout and onmouseouver. What is supposed to happen when the user hovers over a specific div element, the font size grows by 25%, and when the user mouses out of the div element, the font size goes back to normal. My question is, is it possible to incorporate both an onmouseover function and an onmouseout function into one function? Somehow that is what my teacher wants us to do. I have this started so far.

function FontSize(x)
{
    x.style.fonstSize = large;
}

I'm also thinking this isnt the correct code to make the font 25% larger, but I'm not sure how to really incorporate an onmouseout in this function.

Answer 1

As a teacher myself, I am 99% sure that by "one function" the instructor means one general-purpose function to change the font size, not one function which uses conditional statements to work backwards and figure out whether it should be doing onmouseout or onmouseover.

Your script should contain:

function resize(elem, percent) { elem.style.fontSize = percent; }

Your HTML should contain:

<div onmouseover="resize(this, '125%')" onmouseout="resize(this, '100%')"
Text within div..
</div>

Note: Situations such as here, are exactly why JavaScript has the keyword "this"--to save us from needing to use complicated document.getElementById() statements.

Answer 2

You can use "%" property for controlling font-size as described here with the following code.

 document.getElementById("div1").onmouseover = function() {        
            document.getElementById("div1").style.fontSize  = "125%"
                        };

 document.getElementById("div1").onmouseout = function() {        
            document.getElementById("div1").style.fontSize  = "100%";
                        };

Here is the working jsfiddle : http://jsfiddle.net/LxhdU/

Answer 3

Yes you can. Call the same function on both events, and pass a parameter to indicate whether the fontsize should increase or decrease.

ChangeFontSize = function(element, shouldIncreaseFontsize)
{
    var small=14;
    var large = small * 1.25;

    if(shouldIncreaseFontsize) {
         element.style.fontSize = large + "px";
    }
    else {
         element.style.fontSize = small + "px";
    }

}

http://jsfiddle.net/TMHbW/1/

Answer 4

It is possible you do not need to call both the events on the element explicitly instead extension you create will do that.Extend the Element 's prototype. Jquery also does similar to this.

Ref Prototype

See Fiddle:- http://jsfiddle.net/4fs7V/

Element.prototype.hover= function( fnOver, fnOut ) {

    this.onmouseover=fnOver;
    this.onmouseout=fnOut || fnOver;
        return this;
    };


document.getElementById('test').hover(function(){
                                         //do your mouseover stuff
                                                },
                                     function(){
                                           //do your mouseout stuff
                                     });

Update

Same can be achieved with just one function too:-

Hover me

.largeFont {
    font-size:125%;
}

Element.prototype.hover = function (fnOver, fnOut) {
    this.onmouseover = fnOver;
    this.onmouseout = fnOut || fnOver;
    return this;
};

document.getElementById('test').hover(changeMe);

function changeMe()
{
    if(this.hasAttribute('class'))
    {
        this.removeAttribute('class');
    }
    else
    {
         this.setAttribute('class', 'largeFont');
    }
}

Answer 5

I'd do something simple like the following. The large and small values can be whatever you need them to be for the font size to work or they can be variables you've defined in prior code.

Demo: http://jsfiddle.net/lucuma/EAbYn/

 function doHover(e) {
    if (e.type=='mouseover') {
          this.style.fontSize = "large";   
    } else {

          this.style.fontSize = "small";  
    }
}

var el = document.getElementById('myelement')
el.onmouseout =doHover;
el.onmouseover=doHover;