/*
JavaScript Bible, Fourth Edition
by Danny Goodman
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/
TextRectangle Object
// 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
}
TextRectangle Object
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.
Lorem ipsum dolor sit amet,
incididunt ut labore et dolore
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit involuptate velit esse cillum
dolore eu fugiat nulla pariatur.