Efecto Javascript En Imagen

damars · #1 (**permalink**) 31/08/2002, 06:02

Tengo en mi web www.orihuelaes.tk una página de fotos, y desearía ponerle un efecto a las imágenes.
El efecto que me gustaría es que al pasar el ratón por encima de la imágen, esta se oscureciera.
Agradecido al que me pueda indicar donde conseguir un javascript para mis imágenes.
Saludos.

JavierB · #2 (**permalink**) 31/08/2002, 06:10

Hola, damars.

En la página <a href='ir.asp?http://www.mundojavascript.com/' target='_blank'>http://www.mundojavascript.com/...</a> tienes varios efectos para imágenes.

Saludos,

damars · #3 (**permalink**) 01/09/2002, 03:35

Gracias JavierB pero esa página ya la he visitado y los efectos que hay no me sirven.
:( Yo quiero el efecto contrario, que es que la imágen se oscurezca cuando le pones el ratón encima.
salu2

KarlanKas · #4 (**permalink**) 01/09/2002, 04:42

Hola damars!

Dime si lo que quieres es algo así:

Código:

&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Juganfdo con el alpha&lt;/title&gt;
&lt;script&gt;
var a=100

//-----variables editables-------

var espera=10
var mayoropacidad=100
var menoropacidad=0
var paso=5

//----------------------

function apagar(imagen){
paso=-paso
minimo=menoropacidad
variante=1
imagen2=imagen
cambiar(imagen2)
}
function cambiar(imagen){
imagen.style.filter=&quot;alpha(opacity=&quot;+a+&quot;)&quot;;
if (a*variante&gt;minimo*variante){
imagen3=imagen
a=a+paso
window.setTimeout(&quot;cambiar(imagen3)&quot;,espera);}
}
function encender(imagen){
paso=-paso
minimo=mayoropacidad
variante=-1
imagen2=imagen
cambiar(imagen2);
}
&lt;/script&gt;	
&lt;/head&gt;

&lt;body&gt;
&lt;img src=&quot;http://www.klasic.org/img/violin.jpg&quot; onmouseover=&quot;apagar(this)&quot; onmouseout=&quot;encender(this)&quot;&gt;

&lt;/body&gt;
&lt;/html&gt;

Te explico un poco:

La variable espera son los milisegundos de retardo en el efecto. Paso marca cuanto se aumenta o disminuye la opacidad cada vez que se ejecuta la función y mayoropacidad y menoropacidad son los extremos de la opacidad de la imagen.

Si no entiendes algo o no se adapta del todo a lo que quieres pregunta y te contesto encantado.

Salu2

damars · #5 (**permalink**) 07/09/2002, 02:47

Gracias Karlanka,

me sirve el efecto java que me has hecho.
A las fotos les he puesto texto con alt="texto", pero como tu sabes la orden alt solo dura unos instantes, ¿habría alguna forma de mantener el texto fijo mientras este el ratón sobre la imágen? ;)
Gracias de antemano.

KarlanKas · #6 (**permalink**) 09/09/2002, 15:24

¿Qué te parece este ejemplo to.n.to?

Código:

&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Untitled&lt;/title&gt;
	&lt;script&gt;
	violin=&quot;Esto es un violin&quot;
	function ayudita(texto){
	document.getElementById('ayuda').innerHTML=texto;
	document.getElementById('ayuda').style.posTop=event.clientY;
	document.getElementById('ayuda').style.posLeft=event.clientX+10;
	document.getElementById('ayuda').style.visibility=&quot;visible&quot;;
	
	}
	
	&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div ID=pepe&gt;&lt;/div&gt;
&lt;div id=&quot;ayuda&quot; style=&quot;	visibility:hidden;
						position:absolute;
						width:100px;
						height:50px;
						background:#227700;
						font:normal 10px/10px verdana;
						color:white;
						text-align:justify;
						padding:10px 10px 10px 10px;
						&quot;&gt;&lt;/div&gt;
&lt;img onmousemove=&quot;ayudita(violin)&quot; src=&quot;http://www.klasic.org/img/violin.jpg&quot; onmouseout=&quot;document.getElementById('ayuda').style.visibility='hidden'&quot;;&gt;

&lt;/body&gt;
&lt;/html&gt;

Dudo que funcione en otro navegador que no sea IE, espero que aun así te resulte útil!

Si no lo entiendes pregunta!