more popout notes for iBooks with Javascript

The previous post showed how to expose a concealed note as white on gray. Here's a related technique to show the note as black on white.

XHTML:

<p onclick="popoutblack(this)"><span class="inlinenote" style="color: transparent;">some text for the note</span>some text for the paragraph</p>

CSS:

span.inlinenote {

display: block;

height: 0; /* default overflow is "visible", but 'invisible' since transparent */

}

javascript:

function popoutblack(obj) { //switch transparencies

  switch (obj.style.color) {

case "": { //case no inline style defined for <p>

 obj.style.color = "transparent";

 obj.firstChild.style.color = "black"; // otherwise color (now transparent) is inherited

}

break;

default: { // restore to original conditions

 obj.style.color = "";

 obj.firstChild.style.color ="transparent";

}

};

}