html - passing what my mouse over is to function - javascript -
i'm new javascript i'm not sure how can this. basically, in website have kind of tooltip, displays when hovering on input boxes. javascript:
function showtip () { firstnametip.style.display = "inline"; } function hidetip () { firstnametip.style.display = "none"; } /* link html elements corresponding event function */ function init () { /* link variables html elements */ firstnametip = document.getelementbyid("firstnametip"); firstname = document.getelementbyid("firstname"); /* assigns functions corresponding events */ firstname.onmouseover = showtip; /* mouse */ firstname.onmouseout = hidetip; firstname.onfocus = showtip; /* cursor on input field */ firstname.onblur = hidetip; /* cursor moving out */ } /* execute initialisation function once window*/ window.onload = init;
basically functionality if hover on "firstname", displays firstnametip, , on other things lastname (lastnametip), etc.
simple question i've tried many things , can't figure out. have ideas? thanks.
here's how i'd set up:
function showtip (tipelement) { return function () { tipelement.style.display = "inline"; }; } function hidetip (element, tipelement) { return function () { if (document.activeelement !== element) { tipelement.style.display = "none"; } }; } function init() { inittipevents("firstname", "firstnametip"); inittipevents("lastname", "lastnametip"); } function inittipevents(elementid, tipid) { var el = document.getelementbyid(elementid), tip = document.getelementbyid(tipid), showhandler = showtip(tip), hidehandler = hidetip(el, tip); el.onmouseover = showhandler; el.onfocus = showhandler; el.onmouseout = hidehandler; el.onblur = hidehandler; } window.onload = init;
demo: http://jsfiddle.net/lx2cb/
the inittipevents
binds necessary events, based on element's id
, tip's id
, reusing modified showtip
, hidetip
functions. added check hidetip
function make sure tip isn't hidden when mouse leaves input, yet still focused.
Comments
Post a Comment