Foros del Web » Creando para Internet » HTML »

Tablas que al pasar por encima cambian de color..?

Estas en el tema de Tablas que al pasar por encima cambian de color..? en el foro de HTML en Foros del Web. buenas, no se si este es el post adecuado, o si deberia estar en javascript. a ver si alguien me puede ayuda. tengo un listado ...
  #1 (permalink)  
Antiguo 18/04/2008, 03:45
 
Fecha de Ingreso: enero-2002
Mensajes: 1.872
Antigüedad: 15 años, 11 meses
Puntos: 3
Tablas que al pasar por encima cambian de color..?

buenas,

no se si este es el post adecuado, o si deberia estar en javascript. a ver si alguien me puede ayuda. tengo un listado que obtengo de una base de datos, y que muestro en una tabla.

quiero que al pasar el raton por la fila cambie el color. alguien sabe como hacerlo?

saludos
  #2 (permalink)  
Antiguo 18/04/2008, 03:57
Avatar de Eleazan  
Fecha de Ingreso: abril-2008
Ubicación: Ibiza
Mensajes: 1.879
Antigüedad: 9 años, 8 meses
Puntos: 325
Re: Tablas que al pasar por encima cambian de color..?

es con javascript....

seria con el evento "onMouseOver", no sé si el tr lo tiene o tndria q ser en los td ^^

y seria algo asi como document.getElementById("nombre").style.background Color="#FFFFFF";

y OnMouseOut creo recordar:
document.getElementById("nombre").style.background Color="#000000";

Má o menos, algo así seria :)

Edit: prueba con esto!
Código HTML:
<script language="javascript">
function cambiarcolor(elemento,color) {
elemento.style.backgroundColor=color;
}

</script>
<table width="100%">
<tr  onMouseOver="cambiarcolor(this,'#000000');" onMouseOut="cambiarcolor(this,'#FFFFFF');">
<td>1 1</td><td>1 2</td><td>1 3</td><td>1 4</td>
</tr>
<tr  onMouseOver="cambiarcolor(this,'#000000');" onMouseOut="cambiarcolor(this,'#FFFFFF');">
<td>2 1</td><td>2 2</td><td>2 3</td><td>2 4</td>
</tr>
<tr onMouseOver="cambiarcolor(this,'#000000');" onMouseOut="cambiarcolor(this,'#FFFFFF');">
<td>3 1</td><td>3 2</td><td>3 3</td><td>3 4</td>
</tr>
</table> 

Última edición por Eleazan; 18/04/2008 a las 04:04
  #3 (permalink)  
Antiguo 18/04/2008, 05:41
Avatar de mgusdl  
Fecha de Ingreso: abril-2007
Ubicación: Malaga, España
Mensajes: 190
Antigüedad: 10 años, 7 meses
Puntos: 5
Re: Tablas que al pasar por encima cambian de color..?

Yo antes lo hacia con javascript pero es mucho mas sencillo con CSS
Código HTML:
<style>
table#mitabla tr { background:#00F; }
table#mitabla tr:hover { background:#CCC; }
</style>
<table id="mitabla">
...
</table> 
Lo unico que debes cargar un pequeño parche para que IE soporte el hover sobre todos los elementos y no unicamente en los enlaces. Aqui te pongo el contenido del fichero csshover.htc
Código HTML:
<attach event="ondocumentready" handler="parseStylesheets" />
<script>
<!--
/**
 *	Whatever:hover - V2.02.060206 - hover, active & focus
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'},
	onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active|unknown).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
-->
</script> 
Y en la cabecera del documento:
Código HTML:
<head>
<!--[if IE]>
<style type="text/css" media="screen">
body { behavior: url(csshover.htc); }
</style>
<![endif]-->
</head> 

Última edición por mgusdl; 18/04/2008 a las 05:49
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:02.