ayuda con codigo js y htm css

alex20 · #1 (**permalink**) 22/06/2010, 22:53

hola amigos quisiera poner un anuncio encima de un reproductor de video, para lo cual tengo este codigo:

Cita:

<!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>television - musica</title>
<style type="text/css">

</style>
</head>

<body>
<embed width="490" height="400" autostart="true" enablecontextmenu="0" src="rtsp://flashtv01.zapto.org/envivo_03" type="video/x-ms-wmv">
<div class="c2" id="floatLayer2">
aqui va el codigo de adsense
<div class="c1"><a href="javascript:void(0);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','http://img517.imageshack.us/img517/4240/closel.gif',1)"><img onmouseup="document.getElementById('floatLayer2'). style.display='none'" src="http://img517.imageshack.us/img517/4240/closel.gif" name="Image1" width="65" height="13" border="0" id="Image1" alt="" /></a></div>
</div>

<h1 style="font-size:1px; color:#000;">television - dedicated server - hosting - dominio - travel - turismo - viajes - machu picchu - cusco - tv - celular - mp3 - internet</h1>
</body>
</html>


<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>

<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>

asi con este codigo, deberia de salirme el anuncio encima del reproductor pero me sale el anuncio debajo del reproductor, cuando quito el reproductor
<embed width="490" height="400" autostart="true" enablecontextmenu="0" src="rtsp://flashtv01.zapto.org/envivo_03" type="video/x-ms-wmv">
se ve el anuncio
como podria hacer para que me muestre el anuncio encima del reproductor, espero me puedan ayudar en el codigo que les pase, gracias de antemano
Saludos

Malenko · #2 (**permalink**) 23/06/2010, 03:44

Metes el código de adsense debajo del <embed> asi que es normal que los anuncios te salgan debajo.

Si quieres que te salgan arriba del reproductor mueve el código de adsense a encima de la etiqueta <embed>

Ealexander19 · #3 (**permalink**) 23/06/2010, 10:09

me interesa ese codigo, espero alguien te ayude

alex20 · #4 (**permalink**) 23/06/2010, 10:14

si lo pongo como dices osea asi

Cita:

<div class="c2" id="floatLayer2">
codigo adsense

<embed width="490" height="400" autostart="true" enablecontextmenu="0" src="rtsp://flashtv01.zapto.org/envivo_03" type="video/x-ms-wmv">

me sale por separado es decir el anuncio arriba y mas abajo el reproductor es decir por separado, lo que quiero es que me salga el anuncio encima del reproductor, espero alguien mas me pueda ayudar, gracias de antemano
Saludos

Malenko · #5 (**permalink**) 23/06/2010, 10:32

Vale, tu no lo quieres encima del reproductor, sino superpuesto a él, como youtube. Es asi?
En ese caso solo lo puedes hacer con tus videos de Youtube y mediante tu cuenta de adsense.

Aqui tienes unos video tutoriales:
http://www.youtube.com/watch?v=CqXDziUCVWY
http://www.youtube.com/watch?v=N5rVKl0ODEQ

alex20 · #6 (**permalink**) 23/06/2010, 10:53

hola al parecer no me entiendes, lo que quiero es hacer asi como esta en esta pagina
http://radioelectronica.uni.cc/te13.php?canal=atv
copie todo su codigo, pero el reproductor no aparece porque se fue la señal pero deberia de estar debajo del anuncio
para que te des una idea mira esta otra web
http://www.futbolesp.com/ en el post Ver Corea del Sur VS Nigeria Online, muestra el reproductor debajo del anuncio, espero me entiendas con eso
te dejo otro ejemplo mas en esta web mira su reproductor
http://www.mundial2010endirecto.com/
encima salen los anuncios con un boton que dice cerrar, eso quisiera hacer
espero me puedas ayudar, gracias de antemano
Saludos

all-ill · #7 (**permalink**) 23/06/2010, 14:04

Se trata de combinar el parámetro wmode="transparent" o wmode="opaque" (quizá mejor usar opaque porque creo que hace trabajar menos a flash, por lo de no tener que interpretar el canal alpha...) de flash con la propiedad z-index de CSS.
Pongo un ejemplo que acabo de hacer (para otros ejemplos, por si me dejo algo, puedes buscar en Internet, creo que lo llaman css overlap):

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Ejemplo capa superpuesta sobre animaciones flash</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
    
</head>
<body>
    <div class="overlap">capa superpuesta</div>
    <div><object width="640" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/ziDeUbifKIM&hl=en_US&fs=1&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube-nocookie.com/v/ziDeUbifKIM&hl=en_US&fs=1&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385" wmode="transparent"></embed></object></div>
</body>
</html>

Código CSS:

Ver original.overlap{z-index:1000;height:200px; width:250px; background-color:black; position:absolute; left:500px; top:100px; color:white; text-align:center; font-size:2em;overflow:hidden;}

El primer punto importante es la propiedad z-index. La de la capa que quieras poner por encima de otras debe tener un z-index superior a las demás.
El otro punto a destacar es la inclusión del parámetro wmode en el código usado para cargar el archivo de flash. En el código que he copiado de youtube he añadido lo siguiente:
<param name="wmode" value="transparent"></param>
y dentro de la etiqueta embed wmode="transparent"
Aunque en lugar de transparent se puede usar opaque.

Ver ejemplo (archivo html subido a mediafire)

alex20 · #8 (**permalink**) 23/06/2010, 15:58

hola amigo intente hacerlo a tu manera puse este codigo:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ejemplo capa superpuesta sobre animaciones flash</title>
<style type="text/css" media="screen">
/* <![CDATA[ */
.overlap{z-index:1000;height:250px; width:300px; background-color:black; position:absolute; left:500px; top:100px; color:white; text-align:center; font-size:2em;overflow:hidden;}
/* ]]> */
</style>
</head>
<body>
<div class="overlap">
<script type="text/javascript"><!--
mi codigo javascript
</script>
</div>
<div> <embed width="490" height="400" autostart="true" enablecontextmenu="0" wmode="transparent" src="rtsp://flashtv01.zapto.org/envivo_03" type="video/x-ms-wmv"></div>
</body>
</html>

pero me sale asi:

como ves en la imagen me sale en otra parte el anuncio cuando probe tu ejemplo salia encima un texto del video de youtube si taba bien, pero cuando lo probe con mis codigos naa, inclusive probe con los valores del z-index
lo que quiero hacer es como hacen en esta pagina
http://srilankalives.com/player%202.htm
espero me puedas ayudar
Saludos

alex20 · #9 (**permalink**) 23/06/2010, 16:45

hola alguien que me ayude con este tema, gracias de antemano
saludos

all-ill · #10 (**permalink**) 23/06/2010, 16:46

Debes ajustar tú mismo el tamaño y posición de la capa superpuesta, no utilices los mismos del ejemplo, adáptalos a tus necesidades. En el ejemplo yo lo he ubicado a x distancia respecto a la parte izquierda y superior del navegador, según cual sea tu caso puedes optar por ubicarlo respecto a la capa que contiene el vídeo. (Usando las propiedades position, left, top, float, etc.)

Código CSS:

Ver original.overlap{z-index:1000;height:250px; width:300px; background-color:red; position:absolute; left:100px; top:75px; overflow:hidden;}

¿Lo has probado únicamente en Internet Explorer o en otros navegadores (¡etiquetas object y embed!)?

alex20 · #11 (**permalink**) 23/06/2010, 17:06

hola ya me salio pero si quiero que me aparezca abajo del anuncio una imagen de un boton de cerrar como puedes ver en esta pagina, y al hacer click en cerra se cierer el anuncio y el boton mira asi como esta pagina ves un anuncio grande de 300 x 250 y mas abajo dice boton close
http://srilankalives.com/player%202.htm
espero me puedas ayudar
Saludos

all-ill · #12 (**permalink**) 23/06/2010, 17:31

En lo de wmode puedes probar opaque en lugar de transparent, a ver si también te funciona correctamente.
Para poner un enlace o botón que cierre la capa puedes recurrir a javascript para que modifique la propiedad display a none.

En lo página que indicas utilizan el siguiente código en una etiqueta span:

Código Javascript:

Ver originaldocument.getElementById('bannerfloat2').style.display='none'

alex20 · #13 (**permalink**) 23/06/2010, 18:12

hola lo hice asi

Cita:

me sale la imagen pa cerrar pero cuando paso el mouse por encima de la imagen deberia de activarse, para que cuando haga click se cierre todo
sabes que podria hacer?
gracias
Saludos

alex20 · #14 (**permalink**) 23/06/2010, 21:40

hola alguien me puede ayudar, gracias de antemano
Saludos

all-ill · #15 (**permalink**) 24/06/2010, 01:15

Si en la página sólo habrá 1 elemento "overlap" en el código css en lugar de .overlap utiliza #overlap (para usar un ID en lugar de una clase) y en el código html sustituye class="overlap" por id="overlap".
Puedes revisar la Wiki de forosdelweb para aprender un poco más sobre CSS, HTML y otros temas.

jupiter01 · #16 (**permalink**) 25/01/2011, 14:36

Hola amigo me puedes ayudar como poner el codigo de adsense encima de un video gracias ...