mouseovers.js

function imgMouseOverEvents( outString, overString, selector )

handles hover states for images.  Producers simply author all their images to have an on version and an off version with same naming conventions, then call this function with those conventions and a css selector.  All images that match that selector will get the mouseover behavior applied to them automatically.

Example

<img src="myimg_off.gif" class="autoMouseOver">
assuming that my hover image is the same path with _off
   substituted with _on; so: myimg_on.gif is the hover version
<script>
    imgMouseOverEvents('_off', '_on', 'img.autoMouseOver');
</script>

You can call this function as soon as the DOM is ready.

Note

The default instance of this function is included in this library.  If producers name their on/off state files with “_on” and “_off” in the file names and give their images the class “autoMouseOver” then they don’t have to write any javascript.  This also works for inputs.

Automatically executed versions

Arguments

See Also: tabMouseOvers

function tabMouseOvers( cssOn, cssOff, selector, subselector, applyToBoth )

tabMouseOvers are almost identical to imgMouseOverEvents. this function will swap out one css class for another when the user mouses over a dom element (doesn’t have to be a tab layout) You also have the option of having the class of the DOM element change when the user mouses over a child of the DOM element that’s supposed to toggle (for instance, if your tab has a link in it, you can have the tab change when the user mouses over the anchor instead of the whole tab).

pass in the css class for the ‘on’ and ‘off states, as well as the css selector for the DOM element, and, optionally, the selector for the sub elements for the mouseover action.

you can also optionally set applyToBoth to set the mouseover to both the selector and the subselector if you like

Arguments

example

<ul id="myTabs">
   <li><a href="1">one</a></li>
   <li><a href="2">two</a></li>
   <li><a href="3">three</a></li>
</ul>
<script>
   tabMouseOvers('on', 'off', '#myTabs li", "a", false);
</script>

now, when the user mouses over the anchor tags, the parent li object will get the class “on” added to it.

note that those last two, the subselector and the applyToBoth are optional