title: multiple onmouseover events
body: <p>I have a bunch of rollovers that display numbers above the bullets as you roll over them. I want the numbers to disappear onmouseout but remain on onmousedown until the next onmousedown. Is there an easier way of doing this than giving each number its own id and toggling it on and off? I hope this makes sense?!?12</p>
  
  <p>Thanks!</p>
  
  <p>CSS</p>
  
  <pre><code>#numbers1, #numbers2, #numbers3, #numbers4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #6e6965;
  margin: -10px 0 0 2px;
  position: absolute;
  display:none;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;span onmouseover="document.rollimg.src=image1.src; document.getElementById('numbers1').style.display = 'inline';"&gt;
  &lt;a class="bullet"&gt;&lt;div id="numbers1"&gt;1&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;
  
  &lt;span onmouseover="document.rollimg.src=image2.src; document.getElementById('numbers2').style.display = 'inline';" 
  &lt;a class="bullet"&gt;&lt;div id="numbers2"&gt;2&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;
  
  &lt;span onmouseover="document.rollimg.src=image3.src; document.getElementById('numbers3').style.display = 'inline';" 
  &lt;a class="bullet"&gt;&lt;div id="numbers3"&gt;3&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;
  
  &lt;span onmouseover="document.rollimg.src=image4.src; document.getElementById('numbers4').style.display = 'inline';" 
  &lt;a class="bullet"&gt;&lt;div id="numbers4"&gt;4&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;
  </code></pre>