Como hacer un rollover con estilos

Saludos! Aprovecho para preguntarte si sabes hacer rollovers con estilos: necesito hacer un rollover con una celda que cambie de color "on mose over".
Espero haber sido claro.
Gracias por tu interés

1 respuesta

Respuesta
1
Bueno a ver cuales de estos scripts te sirven
/////////////////////////////
Dentro del Head
////////////////////////////
<style>
#divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
#divMenu a{text-decoration:none;}
#divMenu a:hover{color:red;}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli @ www.bratta.com
This script is made by and copyrighted to Thomas Brattli 
This may be used freely as long as this msg is intact!
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
//These are the variables you have to set:
//How much of the layer do you wan't to be visible when it's in the out state?
lshow=60
//How many pixels should it move every step? 
var move=10;
//At what speed (in milliseconds, lower value is more speed)
menuSpeed=40
//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true
/********************************************************************************
You should't have to change anything below this.
********************************************************************************/
//Defining variables
var tim;
var ltop;
//Object constructor
function makeMenu(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'
    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')						
	this.state=1
	this.go=0
	this.width=n?this.css.document.width:eval(obj+'.offsetWidth')
	this.left=b_getleft
    this.obj = obj + "Object"; 	eval(this.obj + "=this")	
}
//Get's the top position.
function b_getleft(){
	var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);
	return gleft;
}
/********************************************************************************
Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
********************************************************************************/
function moveMenu(){
	if(!oMenu.state){
		clearTimeout(tim)
		mIn()	
	}else{
		clearTimeout(tim)
		mOut()
	}
}
//Menu in
function mIn(){
	if(oMenu.left()>-oMenu.width+lshow){
		oMenu.go=1
		oMenu.css.left=oMenu.left()-move
		tim=setTimeout("mIn()",menuSpeed)
	}else{
		oMenu.go=0
		oMenu.state=1
	}	
}
//Menu out
function mOut(){
	if(oMenu.left()<0){
		oMenu.go=1
		oMenu.css.left=oMenu.left()+move
		tim=setTimeout("mOut()",menuSpeed)
	}else{
		oMenu.go=0
		oMenu.state=0
	}	
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
	if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop
	if(n) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place, 
show it
********************************************************************************/
function menuInit(){
	oMenu=new makeMenu('divMenu')
	scrolled=n?"window.pageYOffset":"document.body.scrollTop"
	oMenu.css.left=-oMenu.width+lshow
	ltop=(n)?oMenu.css.top:oMenu.css.pixelTop;
	oMenu.css.visibility='visible'
	if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}
//Initing menu on pageload
onload=menuInit;
</script>

////////////////////////
Dentro del boby
////////////////////////
<div id="divMenu" style="position:absolute; top:250; left:30; width:200; visibility:hidden; background-color:F0F0F0">
<nobr>
	<a href="http://www.mundojavascript.com/">Mundo JavaScript</a> -
	<a href="http://www.cambiabanners.com">Cambia Banners</a> - 
	<a href="http://www.iaupa.com/">iaupa</a> - 
	<a href="javascript://" onclick="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a>
</nobr>
</div>

///////////////////////////
Otro Script
///////////////////////////
Vamos a hacer un navegador con un campo select para que nuestros visitantes puedan ir a una seccion de nuestra página simplemente seleccionando una de las opciones de la lista desplegable.
Haremos una sencilla funcion javascript para redireccionar el usuario a la página que indique la opcion seleccionada:
<script> 
function irA(url){ 
  location.href = url; 
} 
</script> 
Seguidamente haremos el menú desplegable que llamará a la funcion irA préviamente definida, cuando se dispare el evento onchange:
<select onchange="irA(this.value)"> 
<option selected>Menu 
<option value="index.htm">Indice 
<option value="download.htm">Download 
<option value="links.htm">Links 
<option value="contacto.htm">Contacto 
</select> 

Uniremos las dos partes de la siguiente manera y ya tendremos nuestro menú desplegable completamente listo:
<script> 
function irA(url){ 
  location.href = url; 
} 
</script> 
<select onchange="irA(this.value)"> 
<option selected>Menu 
<option value="index.htm">Indice 
<option value="download.htm">Download 
<option value="links.htm">Links 
<option value="contacto.htm">Contacto 
</select> 
/////////////////////////////

Bueno esos son los que me parecio que mejor cubrian tus necesidad si no te sirven avisame para ver que mas te consigo...
No olvides cerrar y valorar esta pregunta

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas