[thelist] javascript multiple events

Ken Snyder kendsnyder at gmail.com
Tue Jul 10 10:31:49 CDT 2007


Bruce Gilbert wrote:
> Hello,
>
> I am still trying to figure out the best way to code an effect I am trying
> to achieve with JavaScript. I will have a table with three table cells. The
> middle cell will have a menu with rollover effects. This part, I am familiar
> with, but I also want synchronous events in the left and right cells. In the
> left cell, I want a picture that changes when you rollover a related menu
> item in the center cell, and in the right cell, some associative text will
> display.
> ...
>   
Below is a very simple function-based example.  It will switch the css 
property "background-image" for the "Context" table cell and change the 
innerHTML of the "Description" table cell when mousing over a menu 
item.  The code is untested, but should give you some idea.

- Ken Snyder


<script>
function SetContextPicture(image, description) {
  document.getElementById('Context').style.backgroundImage = 
'url(/images/' + image + ')';
  document.getElementById('Description').innerHTML = description;
}
</script>

<table>
  <tr>
    <td id="Context">
      ...
    </td>
    <td id="Menu">
      <ul>
        <li onmouseover="SetContextPicture('Apples.gif', 'We sell 
chocolate and caramel apples')">Apples</li>
        <li onmouseover="SetContextPicture('Oranges.gif', 'We sell 
chocolate orange wedges')">Oranges</li>
      </ul>
    </td>
    <td id="Description"></td>
  </tr>
</table>




More information about the thelist mailing list