Iniciar gif al hacer click en cualkier lado

Ureta · #1 (**permalink**) 24/11/2005, 17:18

Wenas, me gustaria saber si se puede hacer y en tal caso como para que al hacer click en cualkier parte de nuestra pagina web se active un gif o cualkier otra forma para animar una imagen justo donde hemos hecho click.

A ver si me expliko bien, hay algunos scripts q cuando haces click salen confetis y cosas asi pues en vez de eso iniciar una animacion ahi.

Se que con flash lo puedes hacer haciendo toda la web en flah pero no es una opcion que puedo aplicar, gracias.

A ver que se os ocurre, thanks

Ureta · #2 (**permalink**) 26/11/2005, 11:54

tras fusilar un codigo "parecido" q no se parece en nada a lo k kiero me encuentro con el problema: la imagen se situa delante de cualkier enlace y no puedo hacer click en el enlace ademas del problema q se crea cuando das varios clicks seguidos. el codigo es este, no hacen falta las imagenes el efecto se ve sin ellas.

<HTML>
<span onmousedown='return false'; oncontextmenu='return false;' ondragstart='return false';>
<script>
document.onselectstart=new Function ('return false');
</script>

<HEAD>
<script language="JavaScript">
function disableselect(e)
{
return false
}
function reEnable()
{
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar)
{
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

<SCRIPT LANGUAGE="JavaScript1.2">

var ver = navigator.appVersion;
var dom = document.getElementById ? 1 : 0;
var ie5 = (ver.indexOf("MSIE 5") > -1 && dom) ? 1 : 0;
var n = (document.layers);
var ie = (document.all);

var sparksAflyin = 0;
var totalSparks = 0;
var sparksOn = 1;
var k = 0;
function initMouseEvents() {

document.onmousedown = mouseDown;
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
}
function mouseDown(e) {

if (sparksOn) {
var mousex = (n) ? e.pageX : event.x+document.body.scrollLeft;
var mousey = (n) ? e.pageY : event.y+document.body.scrollTop;
if (!sparksAflyin) {
k = Math.random() * 8;
k = Math.round(k);
eval('SHOW("sDiv'+k+'")');

for(i = 0;i <= 9; i++)
eval('moveTo('+i+',0,'+mousex+','+mousey+')');
}
}

}
function moveTo(i,j, mousex, mousey){
if (j < eval('anim_'+i+'_x.length') ){
var tempx = eval('-50+mousex');
var tempy = eval('-50+mousey');
if (ie) {
if(tempy+30 > (document.body.offsetHeight+document.body.scrollTo p))
tempy = document.body.offsetHeight+document.body.scrollTop-30;
if(tempx+30 > (document.body.offsetWidth+document.body.scrollLef t))
tempx = document.body.offsetWidth+document.body.scrollLeft-30;
eval('document.all.sDiv'+i+'.style.left = tempx;');
eval('document.all.sDiv'+i+'.style.top = tempy;');
}
if (n) {
eval('document.layers.sDiv'+i+'.left = tempx;');
eval('document.layers.sDiv'+i+'.top = tempy;');
}
j++;
// timeout: 50 = fireworks speed, larger number = slower speed

setTimeout("moveTo("+i+","+j+","+mousex+","+mousey +")",50)
}
else {
eval('HIDE("sDiv'+i+'")');
totalSparks++;
}
if (totalSparks == 10) {
sparksAflyin = 0;
totalSparks = 0;
}

}
function SHOW(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "visible";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "visible";');
}
function HIDE(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "hidden";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "hide";');
}
anim_0_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_0_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_1_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_1_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_2_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_2_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_3_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_3_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_4_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_4_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_5_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_5_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_6_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_6_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_7_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_7_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_8_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_8_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_9_x=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
anim_9_y=new Array(-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50,-50);
// End -->
</script>

</HEAD>
<body OnLoad="initMouseEvents()">
<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue"><img src=triste1.gif></font></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow"><img src=triste2.gif></font></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue"><img src=triste3.gif></font></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red"><img src=triste4.gif></font></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange"><img src=triste5.gif></font></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue"><img src=triste6.gif></font></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="green"><img src=triste7.gif></font></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue"><img src=triste8.gif></font></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow"><img src=triste9.gif></font></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue"><img src=triste.gif></font></div>
</div>

<a href="http://www.google.es">google</a>

</BODY>
</span>

</HTML>

-=ArgoN=- · #3 (**permalink**) 26/11/2005, 13:03

La leche

Ese gif de que hablas tienes que pasarlo a pelicula flash, de lo contrario no podras aplicarle ningun tipo de control. Sugiero que pegues tu gif en un documento flash y en un boton situado en la linia de tiempo principal pongas un script parecido a este:

Código:

tu_gif_dentro_de_un_MC.onPress = function() {
	this.gotoAndPlay(2);
};

Donde: tu_gif_dentro_de_un_MC es la instancia que tienes que colocarle al clip de pelicula que contendra los fotogramas de tu gif. Debes colocarle un stop al principio y un stop al final de la linia de tiempo de este clip.

Suerte,

ArgoN

Ureta · #4 (**permalink**) 26/11/2005, 14:44

Pero yo al gif no le kiero controlar.. hasta ahi se ejecuta bien, al hacer click el gif animado funciona y cuando acaba se oculta, los 2 problemas principales de ese codigo son:

- se ejecuta tan pronto la animacion del gif que no detecta que has pulsado sobre un hipervinculo o boton, para lo que creo yo q retrasando la animacion un poco podria valer ( no justamente al hacer click) creo q es con un SetTimeOut pero nuse dnd tendria q ponerlo pq ya lo e provado en varios sitios.

- el otro es que si haces varios clicks el javascript se vuelve loco ya que entran varios datos mientras se estan ejecutando, y en este no se me ocurre como podria solucionarlo, ya que lo interesante seria q se pudiesen hacer varios clicks y que se estuviesen ejecutando varios gifs a la vez sin problemas.

lo del flash lo e intentado y, o soy muy torpe y no me sale o no lo e entendido bien.

Graciasssssss

Ureta · #5 (**permalink**) 26/11/2005, 18:42

Creo q e la primera vez en mi vida q me kedo un sabado por la noxe en casa haciendo cosas :S weno ya q estamos os pongo, para el primer problema q tenia efectivamente se solucionaba poniendole un minimo retraso a la animacion despues del click, lo q pasa esk de javascript no domino nada y me e acabado liando un poco con el codigo y tengo que unir dos partes que tengo.... saco las coordenadas del puntero en una funcion

function mouseMove(e)
{
var x = (document.layers)? e.pageX : event.x+document.body.scrollLeft
var y = (document.layers)? e.pageY : event.y+document.body.scrollTop
status = "x:"+x+" y:"+y

return true
}

y tengo q conseguir meter las coordenadas en otra funcion

function mouseDownn(e) {

if (sparksOn) {
var xx = 40 //aki e metido valores fijos
var yy = 40 //aki e metido valores fijos
if (!sparksAflyin) {
k = Math.random() * 8;
k = Math.round(k);
eval('SHOW("sDiv'+k+'")');

for(i = 0;i <= 9; i++)
eval('moveTo('+i+',0,'+xx+','+yy+')'); //aki las necesito
}
}
}

pero no se como tengo que hacer para poder hacer las variables x y de las coordenadas globales para utilizarlas en esta funcion.

para el otro problema toavia no tengo idea de como solucionarlo...a ver si me ayudais un poco.PLEASEEEEE

-=ArgoN=- · #6 (**permalink**) 26/11/2005, 22:40

Podrias preguntar en el apartado de Java a ver si alguien que sepa mas java te lo soluciona...

Saludos