<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>動かすぞぉ〜</title>
<style type="text/css">
#menu {
list-style-type: none;
margin: 1em;
padding: 0;
width:600px;
height:100px;
}
#menu li {
display: inline;
}
#menu li a img {
border: 0px none;
}
</style>
<ul id="menu">
<li><a href="#"><img src="./img/0.gif" width="100" height="100" alt="*"></a></li>
<li><a href="#"><img src="./img/1.gif" width="100" height="100" alt="*"></a></li>
<li><a href="#"><img src="./img/2.gif" width="100" height="100" alt="*"></a></li>
<li><a href="#"><img src="./img/3.gif" width="100" height="100" alt="*"></a></li>
<li><a href="#"><img src="./img/4.gif" width="100" height="100" alt="*"></a></li>
<li><a href="#"><img src="./img/6.gif" width="100" height="100" alt="*"></a></li>
<li><a href="#"><img src="./img/7.gif" width="100" height="100" alt="*"></a></li>
</ul>
<script type="text/javascript">
function Mover (targetUL, step, interval) {
var dc = document;
var ul = dc.getElementById( targetUL );
var li = ul.getElementsByTagName( 'LI' );
var ct, o, s, x, xm = 0;
with (ul.style) overflow = 'hidden', position = 'absolute';
for (ct = 0; o = li[ ct++ ]; ) {
s = o.style;
s.position = 'absolute';
s.left = xm + 'px';
xm += o.offsetWidth;
}
function LOOP () {
for (ct = 0; o = li[ ct ]; ct++) {
x = o.offsetLeft - step;
if (x + o.offsetWidth < 0) x= xm-o.offsetWidth;
o.style.left = x + 'px';
}
setTimeout( arguments.callee, interval );
}
LOOP();
}
Mover('menu', 1, 30);
document.addEventListener(
'mouseover', (function (get, m) {
return function (evt) {
var e = evt. target , p = get(e, 'id', 'menu');
var o, a, c, i;
if ( p && 'IMG' === e.nodeName ) {
m = i = p.getElementsByTagName( 'IMG' );
for (c = 0; o = i[c++]; ) {
a = o == e ? 10: 8;
o.style. opacity = a / 10 /*@end@*/;
}
} else {
if (m) {
for (c = 0; o = m[c++];) o.style. opacity = 1 ;
m = null;
}
}
};
})(
function (n, t, v) {
return n ? (v == n[t]) ? n: arguments.callee(n.parentNode, t, v): null;
}
), false);
</script>