pues yo tengo un ejemplo que me encontre en internet espero y te funcione
creas uin archivo llamado funciones:
/******************************************************************/
/* AQUI COMIENZAN LAS FUNCIONES QUE MUEVEN LA TOOLSBAR FLOTANTE */
/******************************************************************/
document.onmousemove=function(e)
{
if (_IE_ )
{
e = window.event;
}
if (capa != null)
{
capa.style.top = (e.clientY-difY)+"px";
capa.style.left = (e.clientX-difX)+"px";
}
} // end document.onmousemove
var capa = null; // Almacena la capa que se mueve
var _IE_ = navigator.userAgent.indexOf("MSIE") != -1; // Si es IE
function liberaCapa()
{
capa = null;
} // endfunction liberaCapa
function clickCapa(e)
{
capa = document.all ? document.all("menuFlotante") : document.getElementById("menuFlotante");
// En IE y Opera se usa otra propiedad del evento y ademas hay variación en las coordenadas
if (_IE_)
{
difX = e.offsetX+14;
difY = e.offsetY+24;
}
else
{
difX = e.layerX;
difY = e.layerY;
}
} // endfunction clickCapa
function mueveCapa(e)
{
if (capa != null)
{
capa.style.top = (e.clientY-difY)+"px";
capa.style.left = (e.clientX-difX)+"px";
}
} // endfunction mueveCapa
/******************************************************************/
/* FIN DE LAS FUNCIONES QUE MUEVEN LA TOOLSBAR FLOTANTE */
/******************************************************************/
***********************************************************************************************************************************************************************
Despues en el codigo HTML organizas los div y las funciones necesarias
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ToolsBar con efecto Alfa</title>
<link href="estilos/special_layers.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #7b93a9;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script language="javascript" src="funciones.js"></script>
<script language="javascript">
function change_opacity(Xopacity)
{
var Xalpha = Xopacity*100;
var obj_menuFlotante = document.all ? document.all("menuFlotante") : document.getElementById("menuFlotante");
var obj_imgToolBar = document.all ? document.all("imgToolBar") : document.getElementById("imgToolBar");
document.all ? obj_menuFlotante.style.filter = "alpha(opacity="+Xalpha+");" : obj_menuFlotante.style.opacity = Xopacity;
if (Xopacity == 1)
obj_imgToolBar.src = "imagenes/icon_toolbar_color.gif";
else
obj_imgToolBar.src = "imagenes/icon_toolbar.gif";
} // endfunction
function accion(Xopc)
{
switch(Xopc)
{
case 1:
alert("Ha seleccionado todos los registros.");
break;
case 2:
alert("Se han grabado los cambios.");
break;
} // endswitch
}
</script>
</head>
<body>
<form name="forma1" action="" method="get" >
<!-- DEFINICIÓN DE LAYER PARA TOOLSBAR -->
<div id="menuFlotante" class="menuf" onclick="javascript:change_opacity(1);" onmouseover="javascript:change_opacity(1);" onmouseout="javascript:change_opacity(.3);">
<p class="menuf">
<img id="imgToolBar" src="imagenes/icon_toolbar.gif" width="45" height="45" alt="ToolBar" title="Haga doble click con el mouse para mover la Barra de Herramientas." style="cursor:move" ondblclick="clickCapa(event);" onmouseup="liberaCapa();" />
<br /><br />
<a href="javascript:accion(1);" title="Seleccionar."><img src="imagenes/tick.png" width="16" height="16" title="Seleccionar." /></a>
<img src="imagenes/separator_50x10.gif" width="50" height="10" />
<a href="javascript:accion(2);" title="Guardar."><img src="imagenes/disk.png" width="16" height="16" title="Guardar." /></a>
<img src="imagenes/separator_50x10.gif" width="50" height="10" />
<a href="javascript:window.print();" title="Imprimir esta ventana."><img src="imagenes/printer.png" width="16" height="16" title="Imprimir esta ventana." /></a>
<a href="javascript:window.location.reload();" title="Recargar esta ventana."><img src="imagenes/arrow_refresh.png" width="16" height="16" title="Recargar esta ventan." /></a>
<a href="javascript:alert('En construcción...');" title="Ayuda sobre esta ventana."><img src="imagenes/help.png" width="16" height="16" title="Ayuda sobre esta ventana." /></a>
<a href="javascript:window.close();" title="Cerrar esta ventana."><img src="imagenes/cancel.png" width="16" height="16" title="Cerrar esta ventana." /></a>
</p>
</div>
<!-- FIN DEL LAYER PARA TOOLSBAR -->
</form>
<h1>CREAR UN BARRA DE HERRAMIENTAS QUE PERMITA VER LO QUE HAY DEBAJO Y ADEMÁS PERMITA MOVELA DE LUGAR.
QUE AL PASAR EL APUNTADOR SOBRE LA BARRA SE HAGA SOLIDA.<br /><br />
Prueba moviendo la barra de herramientas haciendo doble click sobre este icono: <img src="imagenes/icon_toolbar_color.gif" width="45" height="45" />, suelta el mouse
y la toolbar se "pegará" al mouse, entonces múevelo para donde tú quieras y para "soltar" la toolbar simplemente haz un click.<br /><br />
Funciona para los navegadores IExplorer 6 en adelante, Netscape, Opera y cualquier Mozilla.
</h1>
<h2>Nota: En IExplorer 7 puede poner el aviso de si deseas ejecutar un control Activex, hay que permitirlo, para que funcione correctamente.</h2>
</body>
</html>
y eso es todo el codigo si deseas tener un aspecto mas agradable del la barra de erramientas nada mas es de implementar un hoja de estilos (CSS) y darle el diseño que prefieras.
espero y te funcione.
bye
Mostrar Mensajes
