Mostrar "imagen, flash, gif...) al clicar una palbra.

AbdelioR · #1 (**permalink**) 07/10/2006, 12:20

Hola, me gustaria saber como podria hacer que en una zona de mi pagina se mostrar un flash o otro dependiendo de que palabra clicke el usuario.

Tengo una lista de palabras, y me gustaria hacer que encima de ellas en una tabla se mostrara la animacion relacionada con esa palabra. Es muy dificil?

Gracias de antemano por la ayuda.

crcbad · #2 (**permalink**) 09/10/2006, 06:58

Estén donde estén las palabras, puedes poner lo primero de todo un evento onClick para llamar a la función que se encargará de mostrar lo que queremos en función de la palabra seleccionada. Por ejemplo:

Código PHP:

  <span onClick="muestraResultado(0)">Imagen</span>
<span onClick="muestraResultado(1)">Flash</span>

En este caso, lo hemos puesto así, con esa función y con ese parámetro para distinguir sobre lo que se ha pulsado. Si tenemos una tabla sencillita donde mostrar el resultado con un ID identificativo como por ejemplo:

Código PHP:

  <table>
  <tr>
    <td id="miResultado">
      &nbsp;
    </td>
  </tr>
</table>

Ahora solo nos quedaría diseñar la función para que dibuje en esa celda según lo clickeado.

Código PHP:

  <script>
function muestraResultado(queMostrar)
{
  var objCelda = document.getElementById("miResultado");
 
  switch(queMostrar)
  {
    case 0: objCelda.innerHTML = "<img src=''laimagen.gif>"; break;
    case 1: objCelda.innerHTML = "<object classid="clsid:D27CD......."; break;
  }
}
</script>

No he probado el código, pero debería ser así :)

Saludos

AbdelioR · #3 (**permalink**) 09/10/2006, 11:10

Muchas gracias por la respuesta. He probado el codigo y funciona, pero solo consigo mostrar imagenes .png y .gif

A mi me interesaria mostrar un flash (.swf) pero la pagina no lo detecta...

A parte de esto, como podria hacer que saliera el dibujo de la mano para clickar encima de la palabra cuando pasas por ella? Ahora tal cual esta sale el cursor de escribir...

Muchas gracias again :p

crcbad · #4 (**permalink**) 10/10/2006, 01:00

Claro, el código del flash completo no te lo he puesto porque ocupaba mucho jejeje, haber te escribo la última parte del código para el flash:

Código PHP:

  <script>
function muestraResultado(queMostrar)
{
  var objCelda = document.getElementById("miResultado");
 
  switch(queMostrar)
  {
    case 0: objCelda.innerHTML = "<img src=''laimagen.gif>"; break;
    case 1: objCelda.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='32' height='32'>"+
  "<param name='movie' Value=''rutadel/swf/nombre.swf'>"+
  "<param name='quality' value='high'><embed src='rutadel/swf/nombre.swf' quality='high'"+
  "pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='32' height='32'></embed></object>;"break;
  }
}
</script>

Y para lo del cursor tienes quqe poner:

Código PHP:

  <span style="cursor: hand;" onClick="muestraResultado(0)">Imagen</span>
<span style="cursor: hand;" onClick="muestraResultado(1)">Flash</span>

AbdelioR · #5 (**permalink**) 10/10/2006, 02:32

MM... he probado el codigo pero sigue sin ir, he probado cambiando algunas cosillas tmb pero que va... nunca he tocado javascript.

Ese es mi switch:

switch(queMostrar)
{
case 0: objCelda.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='hachetetepe://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='32' height='32'>"+
"<param name='movie' Value='videos/arch.swf'>"+
"<param name='quality' value='high'><embed src='videos/arch.swf' quality='high'"+
"pluginspage='hachetetepe://vvvvvv.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='32' height='32'></embed></object>;" break;
}

la llamada a la funcion y el id de la tabla esta tal cual... >_<

crcbad · #6 (**permalink**) 10/10/2006, 03:01

Bueno, basta ya de decir las cosas de memorieta, te dejo un ejemplo que acabo de hacer y probar hace unos minutos que funciona correctamente, solo faltaría que lo adaptaras a tu imagen y a tu flash en concreto ;)

Código PHP:

  <html>
<head>
 <script>
  function queMostrar(tipo)
  {
   var cod = "";
  
   switch(tipo)
   {
    case 0: cod  = "<img src='1.png'>";
     break;
     
    case 1: cod  = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='468' height='60'>";
         cod += "<param name='movie' value='1.swf'><param name='quality' value='high'>";
         cod += "<embed src='1.swf' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='468' height='60'></embed></object>";
     break;
   }
   
   document.getElementById("contenido").innerHTML = cod;
  }
 </script>
</head>
<body>
<table>
 <tr>
  <td id="contenido">
   &nbsp;
  </td>
 </tr>
</table>
<span style="cursor:hand; color:blue;" onClick="queMostrar(0);"><u>Imagen</u></span>
<span style="cursor:hand; color:blue;" onClick="queMostrar(1);"><u>Flash</u></span>
</body>
</html>

djreficul · #7 (**permalink**) 10/10/2006, 03:16

Cita:

Iniciado por AbdelioR

MM... he probado el codigo pero sigue sin ir, he probado cambiando algunas cosillas tmb pero que va... nunca he tocado javascript.

Ese es mi switch:

switch(queMostrar)
{
case 0: objCelda.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='hachetetepe://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='32' height='32'>"+
"<param name='movie' Value='videos/arch.swf'>"+
"<param name='quality' value='high'><embed src='videos/arch.swf' quality='high'"+
"pluginspage='hachetetepe://vvvvvv.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='32' height='32'></embed></object>;" break;
}

la llamada a la funcion y el id de la tabla esta tal cual... >_<

El problema estaba principalmente en unas comillas simples y un ;

switch(queMostrar)
{
case 0: objCelda.innerHTML = "<img src='laimagen.gif'>"; break;
case 1: objCelda.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='hachetetepe://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='32' height='32'>"+
"<param name='movie' Value='videos/arch.swf'>"+
"<param name='quality' value='high'><embed src='videos/arch.swf' quality='high'"+
" pluginspage='hachetetepe://vvvvvv.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='32' height='32'></embed></object>"; break;
}

Con esos arreglitos debería funcionar.

Saludos.

AbdelioR · #8 (**permalink**) 10/10/2006, 10:52

Uff por fin va! muchas gracias :p solo keda una cosilla y es que el tamaño del flash no podria ser el que tubiera cada flash? ya que cada uno tiene tamaño variable y si lo defino antes me los corta o me deja espacios en blancos.

Hay alguna manera de solucionar esto?

Gracias!

djreficul · #9 (**permalink**) 10/10/2006, 10:55

No definas los tamaños en las etiquetas del flash. Debería pillar el tamaño original del objeto flash.

Saludos.

AbdelioR · #10 (**permalink**) 10/10/2006, 11:00

Lo he probado ya pero sale el flash en pekeñito Oo

Hay algun metodo o algo para obtener las medidas del objeto?

djreficul · #11 (**permalink**) 10/10/2006, 11:31

Y poniendo como width="100%" height="100%" tampoko?

Asegúrate q no se guardan los anteriores en caché.

Sé q x lenguaje de servidor, en mi caso uso PHP, puedes obtener las medidas. X javascript yo personalmente no tengo ni idea.

Saludos.

AbdelioR · #12 (**permalink**) 10/10/2006, 14:44

Tampoco va... yo tmb uso php desde hace pokillo, pero no habia tenido que usar javascript hasta ahora :P

djreficul · #13 (**permalink**) 11/10/2006, 02:12

Pues el conjunto de la función list con getimagesize podrás obtener el ancho y alto del archivo a abrir.

Saludos.