html - How to highlight in-text citations and endnote references after linking to them within a page -
i link citations endnotes , endnotes bibliography in following manner:
<h1>title</h1> <hr /> <p>this citation "[1]" links "↑" in endnotes , vice-versa.<a id="citation1" href="#endnote1"><sup>[1]</sup></a></p> <h1>endnotes</h1> <hr /> <ol> <li><a id="endnote1" href="#citation1">↑</a>this endnote <a href="#short title of reference"><i>short title of reference</i></a> links entire <i>reference</i> in bibliography.</li> </ol> <h1>bibliography</h1> <hr /> <ul> <li><a id="short title of reference">here goes entire <i>reference</i>.</a></li> </ul>
which yields:
title
this citation "[1]" links "↑" in endnotes , vice-versa.[1]
endnotes
- ↑this endnote short title of reference links entire reference in bibliography.
bibliography
- here goes entire reference.
now want item [1], ↑ , short title of reference links to, highlighted when corresponding link takes me it. how can 1 achieve this?
this how:
<h1>title</h1> <hr/> <p>this citation.<sup><a id="citation_1" href="#endnote_1" onfocus="highlight(this)" onblur="dehighlight(this)">[1]</a></sup></p> <h1>endnotes</h1> <hr/> <ol> <li><a id="endnote_1" href="#citation_1" onfocus="highlight(endnote_1content)" onblur="dehighlight(endnote_1content)">↑</a><span id="endnote_1content">this endnote citing <abbr title="full book title"><a href="#bibliography_1">short title</a></abbr> book.</span></li> </ol> <h1>bibliography</h1> <hr /> <ul> <li><a id="bibliography_1" href="#" onfocus="highlight(bibliography_1content)" onblur="dehighlight(bibliography_1content)"></a><span id="bibliography_1content">this reference entire book.</span></li> </ul> <script> function highlight(x) { x.style.background = "lightgrey"; } function dehighlight(x) { x.style.background = ""; } </script>
Comments
Post a Comment