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
