Du möchtest dir jQuery (http://jquery.com/) anschauen. Das ist für das, was du machen willst, geradezu prädestiniert.
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Simple plugin demo: Keep effect active until hovered over another element</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<!-- content should not be text/html -->
<!-- fix the FOUC -->
<script type="text/javascript"> </script>
<style type="text/css" media="screen">
.hoverstuff {
width: 50px;
height: 50px;
float: left;
border: 5px dotted yellow;
background-color: silver;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery.testlib.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// apply effect to all elements that have the class ".hoverstuff"
// let's set the default opacity to 0.5 and keep the duration at default
$(".hoverstuff").hoverstuff({visibility: 0.5})
});
</script>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>Simple plugin demo: Keep effect active until hovered over another element</h1>
<div class="hoverstuff">a</div>
<div class="hoverstuff">b</div>
<div class="hoverstuff">c</div>
<div class="hoverstuff">d</div>
<div class="hoverstuff">e</div>
<div class="hoverstuff">f</div>
</body>
</html>
//file jquery.testlib.js
(function($){
$.fn.hoverstuff = function(options) {
//these are our defaults
var defaults = {
visibility: 0.2,
duration: 1000
};
// apply defaults where options are not set.
var options = $.extend(defaults, options);
// the set of elements that this plugin is applied to
var elems = this;
// for each element in the set
return elems.each(function() {
// apply standard opacity
$(this).css("opacity", options.visibility);
// bind mouseOver Event
$(this).mouseover(function() {
// if we mouse over, we mark this element as active
// then make it fully visible
$(this).addClass("active").stop().animate({
opacity: 1
}, options.duration);
// all other elements in the set,
// that are currently not marked as active and hence
// not hovered, are returned to default state.
elems.each(function() {
if (!$(this).hasClass("active")) {
// only those that are not active right now
$(this).stop().animate({
// reset to default
opacity: options.visibility
}, options.duration);
}
});
});
// bind mouseOut event
$(this).mouseout(function() {
// when we mouse out, we remove the class
// so that it can be hidden when we hover
// over another element of the set
$(this).removeClass("active");
});
});
};
})(jQuery);