[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