imagen oscura,normales

danistrein · #1 (**permalink**) 11/10/2009, 19:35

hola gente vengo a preguntarles algo sobre un js , que e buscado por todos lados y eh tratado de hacerlo solo con css pero no pude hacerlo, bueno les explico e visto en algunas paginas web imagenes oscuras que al señalarlas toman toman la forma original,es decir son imagenes normales pero con ayuda de js las vuelven oscuras, como podria hacer eso? espero que me entiendan

zerokilled · #2 (**permalink**) 11/10/2009, 19:44

¿podrias mostrar un ejemplo de alguna website? no estoy seguro en lo que quieras. me parece que es una animacion de la transparencia en mouse over.

danistrein · #3 (**permalink**) 11/10/2009, 19:55

explicandolo mas simple mira esta es la imagen original :

--------------------------------------------------------------------------------------------

bueno quiero que en la web aparesca asi y al señalarla se muestre como la original:

noce si notas que son las misma imagenes la diferencia que la otra gracias a js esta oscura pero se nota un poco a la original

Panino5001 · #4 (**permalink**) 11/10/2009, 21:01

Sólo se trata de encimarle a la imagen una capa traslúcida:

Código:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script>

function getElementPosition() {
		var offsetTrail = this;
		var offsetLeft = 0;
		var offsetTop = 0;
		while (offsetTrail) {
			offsetLeft += offsetTrail.offsetLeft;
			offsetTop += offsetTrail.offsetTop;
			offsetTrail = offsetTrail.offsetParent;
		}
		return {left:offsetLeft, top:offsetTop};
}

function solapar(e){
	var c=document.createElement('div');
	c.style.position='absolute';
	c.style.zIndex=this.style.zIndex+1;
	c.style.width=this.offsetWidth+'px';
	c.style.height=this.offsetHeight+'px';
	var pos=getElementPosition.call(this);
	c.style.top=pos.top+'px';
	c.style.left=pos.left+'px';
	c.style.backgroundColor='black';
	c.style.opacity = .5;
    c.style.MozOpacity = .5;
    c.style.KhtmlOpacity = .5;
    c.style.filter = 'alpha(opacity=50)';
    c.style.zoom=1;
	addEvent(c,desSolapar,'mouseout');
	document.body.appendChild(c);
	
}
function desSolapar(e){
		this.parentNode.removeChild(this);
}
function t(id){return document.getElementById(id);}
function addEvent(obj,fun,type){
    if(obj.addEventListener){
        obj.addEventListener(type,fun,false);
    }else if(obj.attachEvent){
        var f=function(){
            fun.call(obj,window.event);
        }
        obj.attachEvent('on'+type,f);
        obj[fun.toString()+type]=f;
    }else{
        obj['on'+type]=fun;
    }
}  
onload=function(){
	addEvent(t('i'),solapar,'mouseover');
}
</script>
</head>

<body>
<img id="i" src="23.jpg" />
</body>
</html>

danistrein · #5 (**permalink**) 11/10/2009, 21:10

muchisimas gracias eso justo lo que andaba buscando solo por un detalle xD , quiero que la imagen aparesca negra y al señalarla se aga la original, como podria modificar el code?

zerokilled · #6 (**permalink**) 11/10/2009, 21:19

no se cual es la idea de panino (

), creo que es ponerle una capa traslucida encima de la imagen. lo habia pensado de otra forma. tener la imagen con transparencia en elemento con fondo oscuro y con alguna libreria opacar la imagen. en este caso use mootools (effects) y modifique el demo que viene cuando descarga la libreria. asi me ha quedado,

index.htm

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript" src="demo.js"></script>
	<title>Effects Introduction</title>
</head>
<body>
	<p id="myElement" class="demoElement"><img src="http://climatelab.org/@api/deki/files/191/=Compact%20Fluorescent%20Light%20Bulb.jpg" /></p>
</body>
</html>

demo.css

Código:

p.demoElement {
	border: 1px solid black;
	background-color: #333;
	font-size: 12px;
	color: #000000;
	padding: 10px;
}

p.demoElement img{
opacity:.3;
}

demo.js

Código:

window.addEvent('domready', function() {
	var el = $('myElement').firstChild;
	
	// MooTools is able to handle effects without the use of a wrapper,
	// so you are able to do effects with just one easy line.
	// Long version
	el.addEvent('mouseover', function(e) {
		// You often will need to stop propagation of the event
		e.stop();
		el.fade(1);
	});
	
	el.addEvent('mouseout', function(e) {
		e.stop();
		el.fade(0.3);
	});
});

no me preguntes nada de mootools porque desconozco la libreria por completo.

danistrein · #7 (**permalink**) 12/10/2009, 04:42

xD muchas gracias