Background-Image

[Daniel - Fatec 0]

Pessoal,

 

tenho uma div que tem a seguinte regra CSS:

height: 160px;width: 263px;margin-left: 4px;margin-top: 6px;background: #CCC url(../_img/bkgDetalhes.jpg) repeat-y;

Eu gostaria de saber como eu faço para quando o usuário passar com o mouse sobre a div, eu mudar a imagem de background da div. Será que alguém pode me ajudar?

 

Obrigado.

[naiani 0]

Oi Daniel.

 

Pra você mudar o fundo da DIV qdo o usuario passa o mouse em cima dela, eh soh você adicionar uma regra

div:hover {	background-image: url(outrobg.jpg);}

Li que o IE6- tem problemas em interpretar o :hover qdo nao eh relacionado ao <a>. Tem um arquivo chamado csshover.htc, AQUI, com as explicacoes necessarias, pra contornar esse problema.

[Daniel - Fatec 0]

Muito obrigado Naiani, a net aqui na empresa é bloqueada para vários sites, não consegui abrir o link, é muito grande pra você colocar aqui no tópico?. Tentei fazer mas por enquanto não funcionou, estou tentando achar onde estou errando.

[naiani 0]

A versao mais nova do csshover.htc eh essa:

<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>

Você tem que copiar esse texto, colar em um arquivo em branco e salvar como csshover.htc no diretorio do seu site. Depois, pra usar, eh soh botar como hack no <head> da sua pagina:

<!--[if IE]>	<style type="text/css">		body {			behavior: url(csshover.htc);		}	</style><![endif]-->

Quanto ao background mudar com o hover, veja se nao eh algum detalhe como falta de ; ou ortografia, sei lah. Se puder postar o codigo, eh melhor pra poder te ajudar. =)

 

*Esqueci de perguntar: que browser você tah usando pra testar o codigo?

[webflex 0]

Olá,

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Boa informação essa do js. Terei em conta isto ;).

 

Cumps \o/

[Daniel - Fatec 0]

Muito obrigado Naiani, foi de grande ajuda.