Using the TextRectangle Object Properties
/* JavaScript Bible, Fourth Edition by Danny Goodman Publisher: John Wiley & Sons CopyRight 2001 ISBN: 0764533428 */ <HTML> <HEAD> <TITLE>TextRectangle Object</TITLE> <SCRIPT LANGUAGE="JavaScript"> // preserve reference to last clicked elem so resize can re-use it var lastElem // TextRectangle left tends to be out of registration by a couple of pixels var rectLeftCorrection = 2 // process mouse click function handleClick() { var elem = event.srcElement if (elem.className && elem.className == "sample") { // set hiliter element only on a subset of elements lastElem = elem setHiliter() } else { // otherwise, hide the hiliter hideHiliter() } } function setHiliter() { if (lastElem) { var textRect = lastElem.getBoundingClientRect() hiliter.style.pixelTop = textRect.top + document.body.scrollTop hiliter.style.pixelLeft = textRect.left + document.body.scrollLeft - rectLeftCorrection hiliter.style.pixelHeight = textRect.bottom - textRect.top hiliter.style.pixelWidth = textRect.right - textRect.left hiliter.style.visibility = "visible" } } function hideHiliter() { hiliter.style.visibility = "hidden" lastElem = null } </SCRIPT> </HEAD> <BODY onClick="handleClick()" onResize="setHiliter()"> <H1>TextRectangle Object</H1> <HR> <P>Click on any of the four colored elements in the paragraph below and watch the highlight rectangle adjust itself to the element's TextRectangle object. <P CLASS="sample">Lorem ipsum dolor sit amet, <SPAN CLASS="sample" STYLE="color:red">consectetaur adipisicing elit</SPAN>, sed do eiusmod tempor <SPAN CLASS="sample" STYLE="color:green">incididunt ut labore et dolore <SPAN CLASS="sample" STYLE="color:blue">magna aliqua</SPAN>. Ut enim adminim veniam, quis nostrud exercitation ullamco</SPAN> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur.</P> <DIV ID="hiliter" STYLE="position:absolute; background-color:salmon; z-index:-1; visibility:hidden"></DIV> </BODY> </HTML> Related examples in the same category
