i'm working on reference project tooltip notes throughout text, , i'd text affected note highlighted when tooltip displayed. current code has bug displaying first note highlights correct text, displaying subsequent note highlights text first note, not own. i'm new javascript it's made rookie mistake, think problem i'm using getelementbyid can work once, if should using getelementsbyclassname instead, how tell node when? know getelementsbyclassname returns whole array, , need way return 1 node @ time. haven't yet been able figure out myself appreciated. below pared-down example of code demonstrates problem. help!
<!doctype html> <html> <head> <style> mark { background-color: white } /* <mark> effective @ discretion */ sup { vertical-align: text-top; font-style: italic } a:link { text-decoration: none } a:visited { color: blue } a:hover { text-decoration: underline } /* these describe appearance , behavior of tooltips */ a.tooltips { position: relative; display: inline } a.tooltips span { position: absolute; width: 70px; color: #ffffff; background: #000000; height: 25px; line-height: 25px; text-align: center; visibility: hidden; } a:hover.tooltips span { visibility: visible; font-size: 0.8em; top: 22px; left: 50%; margin-left: -43px; z-index: 999; } a.tooltips span:after { content: ''; position: absolute; bottom: 100%; left: 50%; width: 0; height: 0; border-bottom: 8px solid #000000; border-right: 8px solid transparent; border-left: 8px solid transparent; } </style> <script> function seenote() // <mark> activated { document.getelementbyid("note").style.backgroundcolor = "yellow" } function hidenote() // <mark> deactivated { document.getelementbyid("note").style.backgroundcolor = "white" } </script> <title>bug demonstration</title> </head> <body> mousing on note <i>a</i> highlights <a class="tooltips" href="#"><sup onmouseover="seenote()" onmouseout="hidenote()">a</sup><span>note <i>a</i></span></a> <mark id="note">affected text</mark> intended, <br> mousing on note <i>b</i> highlights <a class="tooltips" href="#"><sup onmouseover="seenote()" onmouseout="hidenote()">b</sup><span>note <i>b</i></span></a> <mark id="note">note <i>a</i>'s text</mark> instead of note <i>b</i>'s text. </body> </html>
problem solved! saw similar intended effect done on website , looked @ source; turns out there's way without scripting @ all! whole effect can accomplished merely styling of <a> elements in css, so:
a. delete javascript
b. delete <mark> tags , css , move each </a> replace each </mark>
c. delete href="#" <a> tags
d. insert code css:
/* affected text highlighted... */ a:hover.tooltips { background-color: yellow; } /* ...but not superscript letter */ a:hover.tooltips sup { background-color: white; }
Comments
Post a Comment