Prima poor version ;(
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin:0px;
padding:0px
}
body {
text-align:center;
}
div#container {
margin: 0px auto;
width:700px;
border: 1px solid #CCCCCC;
text-align:left;
}
div#header {
height:80px;
}
div#menu_flash{
position: relative; top:10px;
}
div#menu_flash ul {
list-style-type: none; position:absolute;
left:50px; top:0px;
right:0px;
}
div#menu_flash ul a,a:hover {
background-color:#FFFFCC;line-height:50px;
text-align:center; display:block;
width:150px
}
img#fla {
border:0px solid #FFFFFF;
position:absolute; left:0px; top:0px
}
</style>
<script language="javascript" type="text/javascript">
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
};
function $(){
var elements = new Array();
for (var i = 0;i<arguments.length;i++){
var element = arguments[i];
if (typeof element == 'string'){
element = document.getElementById(element);
}
if (arguments.length == 1){
return element;
}
elements.push(element);
}
return elements;
};
function getMousePosition(e) {
if(typeof e == 'undefined') {var e = window.event};
this.y= e.clientY;
this.x= e.clientX;
}
function doMenu(e){
var topSpace= 90;
var contact= 50/2;
var start= 0;
var end= 250;//n tag*height-height
var mousePosition= new getMousePosition(e);
var img= $('fla');
var place= parseInt(mousePosition.y)-topSpace-contact;
if(place < start){
place=start;
}
if(place > end){
place=end;
}
img.style.top= place+'px';
}
function init(){
var img= $('fla');
var ulList= $('menu_flash').getElementsByTagName('ul')[0];
var aTags= ulList.getElementsByTagName('a');
for(var i=0;i<aTags.length;i++){
addEvent(aTags[i],'mouseover',doMenu,false);
}
}
addEvent(window,'load',init,false);
</script>
</head>
<body>
<div id="container">
<div id="header"><h1>Test</h1></div>
<div id="menu_flash">
[img]fla.gif[/img]
<ul>
[*][url="#"]Uno[/url]
[*][url="#"]Due[/url]
[*][url="#"]Tre[/url]
[*][url="#"]Quattro[/url]
[*][url="#"]Cinque[/url]
[*][url="#"]Sei[/url]
[/list]
</div>
</div>
</body>
</html>
Suggerimenti per migliorare il tutto