2010-01-22 14 views
15

Quiero hacer que cuando haga clic en cualquier parte del elemento Flash incrustado, me lleve a una URL de destino.Agregue un enlace alrededor de un archivo Flash incrustado

Aquí está mi código actual, que no produce el efecto deseado:

<div class="contentdiv" style="margin:-72px 0 10px 0px; cursor:pointer;" onclick="location.href='http://example.com/';"> 

<object height="410" width="720"> 
<param name="movie" value="images/tri.swf"> 
<embed src="images/tri.swf" height="400" width="700"> 
</embed> 
</object> 

</div> 

En este momento se está realizando el espacio detrás del hacer clic en el archivo .swf para el enlace, pero el elemento Flash no se puede hacer clic.

Si lo correcto es editar el archivo .swf de alguna manera, házmelo saber. No me considero un desarrollador de Flash, pero ¿hay algún recurso sobre dónde comenzar o cómo hacer algo tan básico con un archivo .swf existente?

¡Cualquier sugerencia es muy apreciada!

Respuesta

6

Update después de realizar más investigaciones:

Esta pregunta se ha hecho antes, y el best answer es que usted tiene que crear el enlace dentro de flash.

Normalmente esto se hace dinámicamente pasando un parámetro (convencionalmente llamado clickTAG) al .swf para indicarle dónde vincularse.

En su caso (ya que otra persona proporciona los archivos SWF) Veo 2 opciones:

  1. Su .swf autor pueden ya han implementado el clickTAG method (se puede pedir a ellos, o simplemente probarlo en el .swf para ver si funciona.)
  2. Puede crear un archivo de contenedor flash que implemente clickTag y que cargue y muestre su archivo .swf. Sé que esto parece un truco, pero no puedo ver ninguna otra alternativa.

Hope this helps!


También he visto algo como esto usado [editar: ¡pero no puedo hacer que funcione! Google sugiere que no es posible]

<a href="http://example.com/" target="_blank"> 
<object height="410" width="720"><param name="movie" value="images/tri.swf"> 
<embed src="images/tri.swf" height="400" width="700"></embed> 
</object> 
</a> 

(Por ejemplo here)

+1

Intenté implementar esto y no funcionó. Además, su enlace va a una página del foro que parece no relacionada con este tema. – JWM

+0

El enlace es a una página con un anuncio de banner flash: mira la fuente de la página para ver cómo lo hicieron. –

3

Deja un .gif o .png transparente sobre el flash utilizando z-index y justo ancla que la imagen transparente con su dirección URL.

14

Tuve el mismo problema, encontré este hilo, pero terminé creando mi propia solución.

añadí elemento transparente para el enlace, y luego hizo que se superponen el swf embebido

<a href="http://example.com/" target="_blank"> 
    <object height="410" width="720"><param name="movie" value="http://www.theslap.com/swf/slap_logo.swf"> 
    <embed src="http://www.theslap.com/swf/slap_logo.swf" height="400" width="700"></embed> 
    </object> 
    <i style="display:block; height: 410px; width: 720px; position: relative; z-index: 9; margin-top: -410px;"></i> 
</a> 

Nota - probablemente debería incluir el CSS en un archivo separado para el código de producción.

+0

Gracias, esto es lo que hice, excepto que utilicé un 'div' en lugar de una etiqueta' i', y utilicé 'top' en lugar de' margin-top' en la etiqueta de estilo. Parece hacer justo lo que necesito que haga. Gracias de nuevo. – James

+0

También tuve que cambiar el modo Flash de la ventana a opaco agregando esto dentro de la etiqueta del objeto '' y este atributo de la etiqueta de inserción 'wmode =" opaque "'. –

1

Puede crear su propio swf (o hacer que alguien lo haga por usted) que tenga un botón editable con FlashVars sobre el escenario y que se cargue en el objeto por debajo de ese botón.

He creado uno para usted: Download.

sólo tiene que añadir dos variables de Flash cuando incrusta que:

  1. url - La URL que se visitó, si se hace clic en el archivo SWF.
  2. swf - El archivo swf para cargar.
0
<div id="logo" > 
    <div id="linklogo" style="position:absolute;"><a href="http://www.gogle.com"><img src="transparent.png"></a></div> 
    <div id="flashlogo" > 
    <object type='application/x-shockwave-flash' data='1.swf' width='200' height='86'>  <param name='flashvars' value='clickTag=&clickTarget=_self' /><param name='allowScriptAccess' value='always' /><param name='movie' value='1.swf' /><param name="wmode" value="transparent"></object> 
</div> 

duda elimina el problema en todos los casos

1

me enojé para resolver el problema .... He intentado varios trucos incluyendo jquery y javascript.

Definitivamente la SOLUCIÓN que funciona y funciona en TODOS los navegadores es la que está arriba de mi respuesta.

Gracias usuario user2628529

  <div class="containe"> 
       <div style="position:absolute;"> <a href="http://www.sample.com" target="_blank" > <img src="http://www.sample.it/banner/trasparent-190-505.png"> </a> </div> 
       <div > 
       <object type='application/x-shockwave-flash' data='http://www.sample.it/banner/banner-one.swf' width='190' height='505'> 
        <param name='flashvars' value='clickTag=&clickTarget=_self' /> 
        <param name='allowScriptAccess' value='always' /> 
        <param name='movie' value='banner-one.swf' /> 
        <param name='wmode' value='transparent' > 
       </object> 
       </div> 
      </div> 
+0

usted no necesita el png. un simple div vacío (con la misma dimensión) también funciona para mí. ¡pero gracias de cualquier manera! – xxxbence

1

Hay una mejor manera que tengo encontró

<div class="flash-wrap"> 
    <a class="flash-link" href="#"></a> 
    <object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220"> 
     <param name="wmode" value="opaque"> 
     <param name="movie" value="flash.swf" /> 
     <param name="quality" value="high" /> 
    </object> 
</div> 

 

.flash-wrap{ 
     position: relative; 
     } 

     .flash-link{ 
     position: absolute; top:0px; left:0px; 
     width:180px; /*Flash Size*/ 
     height:220px; 
     /*background: url('images/0.gif') no-repeat;*/ /*You should uncommented this line for support old IE version.*/ 
     } 

https://gist.github.com/m-pokrovskii/6558817

0

Esto funcionó para mí:

<a target="_blank" href="{{ entity.link }}"> 
    <object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;"> 
     <param name="quality" value="high"> 
     <param name="play" value="true"> 
     <param name="LOOP" value="false"> 
     <param name="wmode" value="transparent"> 
     <param name="allowScriptAccess" value="true"> 
    </object> 
</a> 
0

¡Gracias! ahora. Se trabajó

<div style="width: 400px; height: 100px;"> 
    <a href="http://www.sample.com" target="_blank"> 
    <object height="100" width="400"><param name="movie" value="1.swf"> 
     <embed src="1.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="400" height="100" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed> 
    </object> 
     <i style="display: block; height: 100px; width: 400px; position: relative;z-index: 9;margin-top: -102px;"></i> 
    </a> 
</div> 
0

No se puede agregar un enlace a un objeto flash, pero se puede superponer una imagen transparente con un enlace, sobre el objeto flash. Este es mi ejemplo:

<div style="position: relative;"> 
     <div style="position: absolute; 
     left: 250px; 
     top: 0px; 
     z-index: 9999;"> 
      <a href="http://terrazasmedicina.com.ar/hometerrazas.html"> 
<img src="logoLinkTR.png" width="504" height="103"></a> 
     </div> 
     <script type="text/javascript"> 
    AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1024','height','106','src','banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','banner'); //end AC code 
    </script></div> 

En mi caso, el objeto está embebido por un guión, pero debería funcionar de la misma.
Tienes que envoltura en un div relativa del objeto y un div con la imagen, y luego posición como absoluta el div con la imagen alineándola por izquierda, superior, derecha y propiedades inferiores, y asigning z-index propiedad para superponer la imagen.

Cuestiones relacionadas