Debido a que llevo más de año y medio y casi 20 posts en Taringa y aún soy novato, me decidí a hacer
este post con algunos trucos en HTML y CSS (a ver si ahora sí lo logro ).
Los cuales tuve que aprender mientras luchaba por hacer de mi Myspace, un lugar algo decente
(según mi punto de vista); cosa nada sencilla..!! peor aún, con el nuevo Beta 3.0; una real porquería.
Fueron horas y horas y HORAS de busqueda y experimentación; prueba/error, modificar, reinventar,
redescubrir, recopilar, mezclar, desencriptar y desenterrar algunos obscuros secretos del HTML
(HiperText Markup Language) y CSS (Cascade Style Sheets); claro que no inventé nada, pero créanlo:
era poco menos que imposible encontrar algo decente en internet.
Ojalá el tiempo en realizar este post, no sea tanto como fué aprenderlo
Este post no contiene ni una gota de Javascript, pues además de que hay muchos sitios y hostings que
no lo permiten, o no lo soportan, me he topado con decenas de posts, aquí en T! que contienen
trucos HTML y CSS que en realidad es Javascript
Y como se comentaba en uno de estos post sobre el tema: el JavaScript no tiene trucos, es
Javascript y punto.
NECESITAREMOS:
Bloc de notas.
Navegador de Internet (IExplorer, Opera, Chrome, Firefox, Safari, Netscape, etc.)
Mente despejada.
Ojos bien abiertos (cualquier letra, punto o coma mal puestos, dará mal resultado.)
Ir al baño antes de empezar
APRENDEREMOS:
1.- Cambiar texto por otro
2.- Cambiar imagen por otra
3.- Cambiar texto por imagen
4.- Cambiar imagen por texto
5.- Cambiar texto invisible (transparente) por texto visible
6.- Cambiar texto invisible (transparente) por imagen
7.- Imagen (invisible transparente) a texto/imagen
8.- Cuandro de texto o imagen emergente:
9.- 7 enlaces distintos con una sola imagen:
10.- Barra deslizante en imagen, texto, segmento, tabla etc.:
11.- Cambiar de tamaño videos de Youtube y Slideshow de fotos:
12.- Imagen de fondo a un Slideshow:
13.- Colocar varios videos de Youtube en un DIV con barra deslizante:
14.- Amigos y comentarios Myspace en div con barra deslizante (solo perfiles 1.0 y 2.0):
15.- Colocar reproductor (es) Myspace-Music completo (s):
NOTA:
Como aquí en el foro no podemos insertar HTML, mucho menos CSS, no podremos ver las pruebas de
los codigos aquí escritos; y crear ejemplos en páginas externas, es algo complejo y casi innecesario
(aunque si alguien lo pide, no me es imposible hacerlo). Por eso será más agil, si queremos probar
alguno, que los copiemos en el Bloc de notas, guardemos ese documento con extensión .html y lo
abramos con nuestro navegador.
EJEMPLO:
ARCHIVO > GUARDAR > seleccionamos abajo, donde dice "Documento de texto (*.txt)": TODOS LOS
ARCHIVOS (*.*) > ESCRIBIMOS: prueba-de-codigos.html o el nombre que decidan. > GUARDAMOS >
ABRIMOS con doble click para que se abra con el navegador predeterminado, o click derecho y
elegimos con cual lo queremos abrir.
RE-NOTA:
Todos los nombres que yo utilíce dentro de <style>.....</style> y en los elementos CLASS="" NAME=""
etc. del HTML que no reconozcas, son solo de ejemplo; tú puedes colocar el nombre que quieras, de
acuerdo a como quieras reconocerlo en tus hojas de estilos o codigos HTML.
Solo las etiquetas HTML tienen su nombre real; el cual hay que respetar al pie de la letra..
ANTES DE INICIAR:
Cabe recordar que cuando se usa estilo en HTML, hay dos formas genericas de hacerlo (además de la
que enlaza a una hoja externa): entre las etiquetas <style>...</style> que para fines practicos
llamaremos CSS; las cuales se colocan de preferencia entre las etiquetas <head>.....</head> (aunque
he llegado a colocarlas dentro del BODY )
EJEMPLO:
<html>
<head>
<title>Título de la página</title>
<style>.....</style>
</head>
La segunda, llamada "Estilo en linea" que llamaremos ESTILO(S) EN LINEA, es dentro de la misma
etiqueta a la que queremos aplicarle el estilo, utilizando el elemento STYLE, el signo = y entre
comillas, el estilo a insertar: ATRIBUTO : VALOR ;.
EJEMPLOS:
1.- <body style="text-align:center;"> Centra el texto en todo el BODY.
2.- <table style="background-color:#000;border:2px;"> Coloca fondo negro a la tabla, y la bordea a 2
pixeles.
3.- <span style="color:transparent;border:none;"> Invisibiliza esa parte del texto, imagen, o segmento
de algo.
4.- <a style="color:red;background-color:black;"> Coloréa un enlace con rojo y fondo negro.
5.- <div style="width:800px;position:absolute;top:0px;left:50%;margin-left:-400px;"> Centra de forma
absoluta un DIV, y lo coloca al principio aunque haya algo más debajo.
INICIO:
1.- Cambiar texto por otro:
En este ejemplo substituiremos un texto por otro, al pasar el mouse (efecto Hover). Hay que poner
especial atención a esta explicación, pues es el metodo que utilizaremos en varios de los siguientes
ejemplos. Para esto crearemos un DIV con 2 lineas de texto, solo que solo se verá una a la vez; y
aunque estará una debajo de la otra, aplicaremos el valor de "none" al atributo "display", para que
cuando una aparezca, la otra nó, y así estarán alternativamente en el mismo lugar; tambien
aplicaremos estilo en linea al DIV, para centrar el texto, recuerdan..?? Para nuestro proposito,
utilizaremos 2 etiquetas válidas en HTML: BIG y SPAN, y color rojo y azul respectivamente,
para diferenciar el estilo entre una y otra linea.
Tecnicamente serán 2 enlaces, así que como queremos que sea como texto plano, daremos estilo
para que NO aparezcan SUBRAYADOS. Y como no queremos que nos envíe a otra página dejaremos
vacío el espacio donde debiera ir la dirección del enlace, de esta forma, si se dá click por error, nos
abrirá nuevamente la misma página (tambien podrían poner un link, aunque ahora la idea es solo
cambiar texto) Tambien será de suma importancia colocar el atributo BACKGROUND-COLOR y el valor
TRANSPARENT a ".cambiar a:hover span", para evitar que aparezca algún color de fondo al pasar el
mouse, y DISPLAY:INLINE; para que el hover sea solo sobre la imagen o el texto; nó en bloque; es
decir, que el link no ocupe todo el ancho del DIV o página, aunque hayamos especificado el ancho;
detallitos, pero importantes en demasía.
Y solo para fines de buena visibilidad, colocaremos al texto entre etiquetas de negrita <b>, para que
lo veamos un poco mejor; aunque tambien se puede definir el tamaño; en caso de utilizar
encabezados (h1,h2,h3, etc), por default el DISPLAY pasará a BLOCK (en bloque).
Por último: recuerda que no es necesario que armes el documento HTML completo (aunque bien
puedes hacerlo), solo copia y pega el codigo que ves (CSS y HTML juntos), tal como está completo al
final de cada ejemplo; y guardalo como .html
Primero en CSS (lo que iría entre <style>....</style>:
.cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color: #0000CC;display:block;text-decoration:none;
background-color:transparent;}
.cambiar a:hover big {display:none;text-decoration:none;}
Después, en HTML (lo que vá dentro de <body>:
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<b>Este será el primer texto que aparezca; sí, primero.</b>
</big>
<span>
<b>Esta será la segunda linea de texto; sí, la segunda</b>
</span>
</a>
</div>
Listo: el codigo completo sería:
<style>
.cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC; font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color: #0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<b>Este será el primer texto que aparezca; sí, primero.</b>
</big>
<span>
<b>Esta será la segunda linea de texto; sí, la segunda.</b>
</span>
</a>
</div>
Copia y pega en tu Bloc de notas, guardalo con extensión .html abrelo, y pasa el mouse sobre la linea
que ves, la primera; cambiará de texto y color.
Todo bien...., sorprendente, nó..?? y es solo el principio. Seguimos...
2.- Cambiar imagen por otra:
Este ejemplo es tecnicamente identico al anterior; al CSS será más breve, pues requiere menos
atributos/valores.
El cambio sustancial será en el HTML; aunque solo substituiremos las lineas de texto por imágenes y
aplicaremos estilos en la misma etiqueta; las cuales deberan ser alojarlas entre su respectiva etiqueta:
<img src="IMAGEN"/> y a las que solo bordearemos y definiremos su tamaño (con WIDTH y HEIGHT) en
caso de ser diferente, pues si el alto no es el mismo, nos empujará momentaneamente hacia abajo,
lo que este "Abajo"; lo mismo con el ancho Esto lo haremos, repito: en la misma etiqueta
(Estilos en linea); procedamos:
<style>
.cambiar big { text-decoration:none;display:inline;}
.cambiar a { text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {text-decoration:none;background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg"
width="300px" border="3px"/>
</big>
<span>
<img src="http://s1.***/imagen/1820816taringa-fc.png" width="300px" border="3px"/>
</span>
</a>
</div>
Resultó..?? Muy bien; vamos con lo que sigue..!!
Pero antes:
Cabe mencionar que se puede utilizar el mismo CSS para imágenes y texto; solo es cosa de colocar
los atributos y valores necesarios para los dos casos. Para aplicar estos 2 ejemplos juntos, solo sería
cuestión de agregar el estilo especificado en el segundo, al CSS del primer ejemplo, en caso de
distintos atributos/valores.
En este caso no cambiamos practicamente nada, pues el estilo de las imágenes lo aplicamos en linea
(aunque bien pudo ser en la zona de CSS), solo utilizamos el CSS indispensable, para darle a la imagen
el comportamiento de enlace (s), como en el caso del texto así que solo unimos el HTML de los 2 con
el mismo CSS de el primer ejemplo.
Solo como prueba; sería así:
<style>
.cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color: #0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<b>Este será el primer texto que aparezca; sí, primero.</b>
</big>
<span>
<b>Esta será la segunda linea de texto; sí, la segunda.</b>
</span>
</a>
</div>
<br /><!--eso es un salto de linea; o punto y aparte-->
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg"
width="300px" border="3px"/>
</big>
<span>
<img src="http://s1.***/imagen/1820816taringa-fc.png" width="300px" border="3px"/>
</span>
</a>
</div>
Prueba superada..?? Ahora sí; lo que sigue:
3.- Cambiar texto por imagen:
Procedimiento: usemos el primer CSS, y armaremos un HTML "Mixto", por llamarlo así, con un texto
con saltos de linea, e imagen sin borde; solo daremos ancho de 300px.
El resultado sería este:
<style>
.cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color:#0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<b>Este es el texto que servirá<br /><br />
de referencia hacia la<br /><br />
imagen azul que<br /><br />
pondremos como<br /><br />
efecto HOVER</b>
</big>
<span>
<img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg"
width="300px"/>
</span>
</a>
</div>
Todo bien..?? Siguiente:
4.- Cambiar imagen por texto:
Lo mismo, pero diferente
Quise decir que es el mismo procedimiento, pero a la inversa; el mismo CSS y al HTML anterior le
colocamos el texto donde ahora está la imagen´y la imagen donde ahora está el texto. Espero que no
te estes haciendo muchas bolas; recuerda que es solo para fines practicos; si prefieres ir armando
cada uno de los CSS y HTML, es muy bueno como ejercicio, aunque si aún se te complica memorizar
todo, mejor copia y pega; eso sí, cuidando que sea solo lo que se va indicando, si nó, se revolverá.
Ovbio si te parece, ve cambiando de imagen o texto (enunciados), como mejor te parezca..
Ahora quedaría así:
<style>
.cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color:#0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg"
width="300px"/>
</big>
<span>
<b>Este es el texto que ahora<br /><br />
substituye a la imagen<br /><br />
que ahora ya no<br /> <br />
ves; esa, la de el<br /><br />
cuadrito con la T!, que parece<br /><br />
la de algún foro, recuerdas..??<br /><br />
será.....T........??</b>
</span>
</a>
</div>
Excelente..!! Ya diste click, solo para ver que pasa..?? Animo; confía en mí
Bueno, allá tú; continuemos:
5.- Cambiar texto invisible (transparente) por texto visible:
Ya sé que parezco perezoso por seguir utilizando el COPY/PASTE, pero créanme, es para fines
practicos y de memorización; ya habrá tiempo y astucia para que empiecen a experimentar por su
cuenta; hay que pensar en todos los visitantes por ahora. Ahora tomemos el primer ejemplo
completo, y lo unico que haremos extra será darle estilo en linea, tambien posible en CSS, dentro de
la etiqueta <b>, para que nuestra primera linea sea texto color transparente (vale, tambien
cambiaremos algunas palabrillas).
Recuerda que si quieres verificar que se encuentra ahí, solo arrastra el mouse desde arriba de la
página y aparecerá tu texto invisible, ahora visible en color blanco.
Esto sería a las de acá:
<style>
.cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color:#0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<b style="color:transparent">Este será el primer texto que aparezca;<br />
sí, primero. <br />
Peeero, ahora será invisible;<br />
puedes creérlo..??.</b>
</big>
<span>
<b>Esta será la segunda linea de texto; sí, la segunda<br />
esta si podras verla.<br />
Peeeero, solo al pasar<br />
el mouse encima.</b>
</span>
</a>
</div>
Lo encontraste..?? Jajaja. Listo; ahora veamos como se transparenta en CSS; será rapido; algo así:
Adivinaste, solo se cambia el #CC0000 (Rojo), por el TRANSPARENT (transparente), en la primera
linea; en ".cambiar big".
<style>
.cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color:#0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<b>Este será el primer texto que aparezca;<br />
sí, primero. <br />
Peeero, ahora será invisible;<br />
puedes creérlo..??.</b>
</big>
<span>
<b>Esta será la segunda linea de texto; sí, la segunda<br />
esta si podras verla.<br />
Peeeero, solo al pasar<br />
el mouse encima.</b>
</span>
</a>
</div>
6.- Cambiar texto invisible (transparente) por imagen:
Lo siento; otra vez COPY/PASTE ahora al ANTERIOR (ya sea invisivilizado via "en linea", o el de
".cambiar big" ). Solo insertamos una imagen, con su etiqueta correspondiente, y digamos: 250 pixeles
de ancho y un borde de 10px..!! en lugar de el segundo enunciado (texto).
Veamos:
<style>
.cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal
;text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color:#0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<b>Este será el primer texto que aparezca; sí, primero. <br />
Peeero, ahora será invisible;<br />
imagéname....</b>
</big>
<span>
<img src="http://i76.photobucket.com/albums/j26/alixrose23/gwyneth-paltrow-iron-man-premieres.png"
width="250px" border="10px" />
</span>
</a>
</div>
Te funcionó..??
Que tal con la imagen...., creiste que nunca la cambiaría..?? Jajaja.
Un respiro......, y continuemos.
7.- Imagen (invisible transparente) a texto/imagen:
Ahora haremos lo que en el ejemplo anterior, pero en lugar de texto invisible, utilizaremos imagen
invisible. Ya se que parece que estamos haciendo como operaciones tipo A+B, C+D, A+D, C+B, D+B,
etc, pero habrá quien no sepa o no imagine, que lo que se hace en el primer o segundo ejemplo, es
posible hacerlo con otros elementos, o a la inversa, etc. Manos a la obra:
Esta vez utilizaremos una imagen GIF transparente (sin borde, claro), de 16x21 pixeles la cual
agrandaremos mediante WIDTH para que abarque algo así como 150x200 (nada difícil), alojada en un
servidor mío; el cual es para uso publico, por cierto. Esta imagen y el proceso, será utilizado en el
siguiente ejemplo; nó, no es a la inversa; será algo un poco más complejo; bueno, procedamos:
Recuerda que para verificar que está ahí, puedes arrastrar el mouse desde arriba de la página, hacia
abajo al centro de la página; la imagen estará ahí.
<style>
.cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color:#0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" />
</big>
<span>
<b>Este texto aparecerá<br />
al pasar el mouse sobre la<br />
imagen que no se vé; es decír,<br />
que es transparente.</b>
</a>
</div>
Ahora imagen transparente por imagen visible:
<style>
.cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color:#0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" />
</big>
<span>
<img src="http://www.lapastillaroja.net/archives/Firefox_T-Shirt.jpg" width="150px" />
</a>
</div>
8.- Cuandro de texto o imagen emergente:
Esto será un poco más complejo, a pesar de que vamos a utilizar algunos de los codigos que ya
tenemos arriba.
Crearemos un DIV con una imagen como fondo, con 4 monitos a los que haremos que al pasar el
mouse sobre cada uno de ellos, aparezca un texto emergente; de pronto haríamos una prueba para
substituir el texto por alguna imagen, pero el punto medular será como hacer aparecer texto;
por ejemplo: sus datos.
Lo primero será crear un DIV, y colocarle via CSS, una imagen de fondo, a la cual, deberemos darle
de antemano, las dimensiones requeridas, pues sabemos que las imágenes de fondo, no podemos
redimensionarlas vía HTML o CSS; así que usaremos una que previamente dimensionamos; 800x600,
vale..?? Y para que no nos quede desfasada, le daremos CSS, con BACKGROUND-POSITION:CENTER; así
la centrará de forma absoluta en el DIV; y NO-REPEAT, por si las dudas, para que no la repita; y bueno,
ya entrados, un borde de 5 pixeles en color rojo.
Despues le insertaremos una imagen transparente, de 24x18 pixeles con su etiqueta, y las mismas
medidas del DIV, y la imagen de fondo (la imagen insertada, si nos permite redimensionarla), esto es
para que el DIV nos abra, (y a la vez, nos deje ver el fondo con los monitos), pues como no tiene
contenido visible, solo el fondo, aparecería el puro borde cerrado; la insertamos así:
<img src="IMAGEN" WIDTH="800" HEIGHT="600"/>.
Al DIV podemos darle esas medidas, aunque por default, se extiende al tamaño de la imagen.
Tambien le daremos la identificación que hemos usado; "CAMBIAR", para que nos invisibilice lo que le
ordenemos. Luego, crearemos cuatro DIV, uno para cada monito, que es de donde emergerá el texto;
para esto usaremos el ejemplo 7, "imagen invisible a texto", y les daremos estilo vía CSS, para
moverlos hacia arriba del flujo HTML, y colocarlos sobre el torso de los monitos; esto con los
ATRIBUTO/VALOR: POSITION:ABSOLUTE;. Al aplicar estos elementos, no tendremos el problema de
que nos quede el espacio vacío que dejarían los DIV, pues los ubicaremos de forma absoluta; esto será
algunos pixeles abajo del principio del DIV, que será el TOP; y claro, tambien a derecha o izquierda,
con los elementos: LEFT,MARGIN-LEFT, etc.
Ok; vayamos ubicandonos: al DIV principal, lo llamaremos: PRINCIPAL, que original, nó?; a los otros
cuatro, les daremos el nombre de los monitos: BETO, MAX, ITZEL y LALO. Cada uno de los cuatro
tendrá estilo propio, vía CSS. La imagen transparente que usaremos, será la misma que en los
ejemplos 6 y 7.
Casi lo olvido; como no queremos que el texto que emerga, aparezca justamente en la posición que
dejaría la imagen (pues taparía la cara a los monitos), le colocaremos algunos saltos de linea antes
del texto, para que lo empuje hacia abajo; así no daríamos estilo extra al texto; tambien, para que no
se pierda el texto en la imagen de fondo, le colocaremos fondo negro, claro, con excepción de los
saltos de linea, pues nos daría el mismo resultado que no queremos; tapar la cara de los monitos;
esto será con el CLASS="FONDOTEXTO", color blanco con #FFFFFF, tamaño de 12pt, y centrado con
CENTER, por si acaso.
Esto quedaría así (un poco largo..):
<style>
.cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:12pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:12pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color:#FFFFFF;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
.principal {width:800px;height:600px;position:absolute;top:0px;left:50%;margin-left:-400px;
background-image:url(http://maxhurbano.byethost7.com/?di=1112901246378);
background-repeat:no-repeat;background-position:top center;border: 5px solid; color:red;}
.beto {position:absolute;top:150px;left:50%;margin-left:-280px}
.max {position:absolute;top:50px;left:50%;margin-left:-140px}
.itzel {position:absolute;top:110px;left:50%;margin-left:65px}
.lalo {position:absolute;top:50px;left:50%;margin-left:230px}
.fondotexto {background-color:000000;}
</style>
<div class="principal">
<img src="http://maxhurbano.byethost7.com/?di=312905621531" width="800px" height="600px" />
<div class="beto">
<div class="cambiar">
<a href=""><big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/>
</big>
<span>
<center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Roberto Noriega L.<br />
(Beto Lira)<br />
Bajo.<br />
<br />
5861-4076<br />
cel. 04455 1536-2287<br />
cel. 04455 3976-4346<br />
[email protected]</div></center></span></a>
</div>
</div>
<div class="max">
<div class="cambiar">
<a href=""><big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/>
</big>
<span>
<center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Marcelino Pedraza V.<br />
(Max Hurbano)<br />
Batería y Voz.<br />
<br />
5877-6215<br />
2602-8375<br />
cel. 04455 2555-4485<br />
[email protected]</div></center></span></a>
</div>
</div>
<div class="itzel">
<div class="cambiar">
<a href=""><big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/>
</big>
<span>
<center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Itzel Anaid<br />
(Chela)<br />
Guitarra.<br>
<br />
[email protected]</div></center></span></a>
</div>
</div>
<div class="lalo">
<div class="cambiar">
<a href=""><big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/>
</big>
<span>
<center><br /><br /><br /><br /><br /><br /><div class="fondotexto">E. Eduardo Carreón<br />
(Huevo)<br />
Guitarra leader.<br />
<br />
5877-5410<br />
cel. 04455 2989-7393<br />
cel. 04455 3507-7908<br />
[email protected]</div></center></span></a>
</div>
</div>
Funcionó..?? Vamos muy bien.
Recuerden que centramos el PRINCIPAL de forma absoluta, para que no nos quede en la esquina
superior, sino al centro, y para que los otros DIVs nos queden exactamente donde queremos, y para
que no se extienda el borde en toda la página. Tambien cabe tener en cuenta que puede no quedar
hasta arriba, pues si ya tenemos elementos colocados en el flujo HTML, desearemos bajarlo un poco,
o mucho; depende de tí.
Haremos esto, y cambiaremos el texto del primer monito, por una imagen, vale? es todo lo que
cambiaremos; lo demás será igual; solo por ocio... bajaremos el DIV 100 pixeles con: TOP:100PX, y
colocaremos la imagen como en el ejemplo 2; imagen por imagen, la segunda con saltos, recuerdas?.
Quedaría así:
<style>
.cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:12pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:12pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color:#FFFFFF;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
.principal {width:800px;height:600px;position:absolute;top:100px;left:50%;margin-left:-400px;
background-image:url(http://maxhurbano.byethost7.com/?di=1112901246378);
background-repeat:no-repeat;background-position:top center;border: 5px solid; color:red;}
.beto {position:absolute;top:150px;left:50%;margin-left:-280px}
.max {position:absolute;top:50px;left:50%;margin-left:-140px}
.itzel {position:absolute;top:110px;left:50%;margin-left:65px}
.lalo {position:absolute;top:50px;left:50%;margin-left:230px}
.fondotexto {background-color:000000;}
</style>
<div class="principal">
<img src="http://maxhurbano.byethost7.com/?di=312905621531" width="800px" height="600px" />
<div class="beto">
<div class="cambiar">
<a href=""><big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/>
</big>
<span>
<center><br /><br /><br /><br /><br /><br /><div class="fondotexto">
<img src="http://maxhurbano.byethost7.com/?di=1129253397116" width="150px" height"200px"/>
</div></center></span></a>
</div>
</div>
<div class="max">
<div class="cambiar">
<a href=""><big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/>
</big>
<span>
<center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Marcelino Pedraza V.<br />
(Max Hurbano)<br />
Batería y Voz.<br />
<br />
5877-6215<br />
2602-8375<br />
cel. 04455 2555-4485<br />
[email protected]</div></center></span></a>
</div>
</div>
<div class="itzel">
<div class="cambiar">
<a href=""><big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/>
</big>
<span>
<center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Itzel Anaid<br />
(Chela)<br />
Guitarra.<br>
<br />
[email protected]</div></center></span></a>
</div>
</div>
<div class="lalo">
<div class="cambiar">
<a href=""><big>
<img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/>
</big>
<span>
<center><br /><br /><br /><br /><br /><br /><div class="fondotexto">E. Eduardo Carreón<br />
(Huevo)<br />
Guitarra leader.<br />
<br />
5877-5410<br />
cel. 04455 2989-7393<br />
cel. 04455 3507-7908<br />
[email protected]</div></center></span></a>
</div>
</div>
Listo..!! Todo claro? Podemos seguir adelante.
9.- 7 enlaces distintos (o más, o menos, segun necesidad), con una sola imagen:
Veamos: esto se puede hacer con imagen con transparencia (entre un ícono y otro), o con fondo de
color. Lo haremos igual que en el ejemplo anterior, solo que en lugar de DIV, usaremos un TABLE
(tabla), y le colocaremos de fondo la imagen GIF con los 7 íconos, a los cuales asignaremos un enlace
a cada uno. Se usará una tabla, para que nos permita separar el espacio que dedicaremos a cada
ícono en TDs (celdas) de igual tamaño, dentro de una misma TR (columna).
Para esto no necesitaremos posicionar las TDs, pues la tabla se encarga de colocar las celdas en
perfecta linea; en caso de ser una imagen con íconos no alineados, podemos usar DIVs, como
anteriormente vimos; en lugar de usar el elemento CAMBIAR, solo se le asigna un enlace a la imagen
"invisible" que estará (en lugar del texto del link) sobre cada uno de los íconos; recuerdas?.
La tabla sí la posicionaremos, de forma absoluta, para que no nos quede en la esquina superior;
usando: POSITION:ABSOLUTE TOP, LEFT, y MARGIN-LEFT; ahora lo haremos todo con "EN LINEA"; es
decir, dentro de la misma etiqueta TABLE. Como decíamos, la imagen de fondo no se puede
redimensionar; tambien usaremos una pre-dimensionada, y la centraremos tambien dentro de la tabla.
Usaremos tambien, una imagen transparente, ahora de 16x16 pixeles, pues nuestros íconos serán
regulares en sus lados; aunque dependiendo de tus íconos, podrías variar el tamaño.
*si en tusejercicios requieres alguna medida extra de imagen, escribeme y te la subo a mi servidor, y
te mando el link.*
Cabe mencionar que si bien esto no se usaría mucho, es util cuando quieres colocar varios íconos
como enlaces, pero no quieres sobrecargar tu página con tantas imágenes, capicci? Atención
especial a la etiqueta CENTER; es para asegurar que nada se nos mueva a su antojo...
**En caso de tener ya un DIV o TABLE contenedor de todos nuestros elementos, como sucede en
Myspace, y muchos sitios gratuitos, no es tan necesario posicionar absolutamente, pues todo el
contenido de la página, estaría dentro de el contenedor; normalmente (o casi),
con 800 pixeles de ancho**
Menos bla bla bla; más accion; así estaría la cosa:
<table style="position:absolute;top:300px;left:50%;margin-left:-260px;
background-image:url(http://maxhurbano.byethost7.com/?di=912905844974);
background-repeat:no-repeat;background-position:center center;">
<center><tr><td width="74px" height="67px">
<a href="http://www.myspace.com/maxhurbano">
<img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a>
</td>
<td width="74px" height="67px">
<a href="http://www.sonico.com/maxhurbano">
<img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a>
</td>
<td width="74px" height="67px">
<a href="http://www.twitter.com/maxhurbano">
<img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a>
</td>
<td width="74px" height="67px">
<a href="http://www.hi5.com/friend/p228519705--Max_Hurbano--html">
<img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a>
</td>
<td width="74px" height="67px">
<a href="http://www.facebook.com/profile.php?id=100000705331834">
<img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a>
</td>
<td width="74px" height="67px">
<a href="http://cid-25640446dc80d9c0.profile.live.com/">
<img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a>
</td>
<td width="74px" height="67px">
<a href="http://www.youtube.com/user/maxhurbano">
<img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a>
</td>
</tr></center>
</table>
Listo..!! Solo basta dar los clicks necesarios para ver si funcionan los enlaces..!! Y para que no se nos
olvide que las imágenes "invisibles" están ahí, podemos arrastrar el mouse desde arriba a abajo de la
página, y las veremos; azules, pero estarán; esto es bueno para verificar que esten en su lugar exacto.
10.- Barra deslizante en imagen, texto, segmento, tabla etc.:
Bueno, esto es un poco más sencillo; veamoslo en un texto amplio. Necesitaremos crear un DIV con
las dimensiones que necesitamos; obviamente, mayores al espacio que ocupará el texto, de otra
forma, no sería necesario; y mediante ESTILO EN LINEA, darle el atributo OVERFLOW, para que nos
aparezca la barra deslizante, y así no nos ocupe tanto, y aún así, podamos leér todo de alguna forma;
tambien centraremos el texto, colocaremos fondo amarillo, y borde de 3 pixeles, negro; todo esto,
dentro de la misma etiqueta; verdad que es más practico? pero no siempre es lo mejor, jejeje.
Cabe mencionar que la barra deslizante, podemos ponerla por default, abajo y a la derecha
(OVERFLOW:VISIBLE; ), o de forma automatica; solo si fuera necesario: (OVERFLOW:AUTO; ), y tambien
se puede especificar si quieres que no aparezca (OVERFLOW:HIDDEN; ), o especificar cual aparecerá
(VISIBLE) y cual nó (HIDDEN), mediante los sub-atributos "X" e "Y".
EJEMPLO:
El DIV que haremos, solo tendrá barra a la izquierda, pues por default el texto hace sus propios saltos
de linea, pero en caso de que fuera una imagen, daríamos la orden de que solo apareciera a la
derecha: OVERFLOW-Y:VISIBLE; o AUTO y OVERFLOW-X:HIDDEN; aunque esto está condicionados a la
versión de CSS; al parecer funciona bien solo en CSS3; bueno, para texto nos irá bien.
El texto lo extraeremos de la página de una banda de rock en México, desconocidos, pero son amigos,
que caray..!!
La cosa sería de esta manera:
<div style="overflow: auto; width: 400px; height: 150px; text-align:center;
background-color:gold; border: 3px solid #000000;">
Tabacco Blues nace en el año 2002, formado, en aquel entonces, por: Ivan Martin Carreón
(talivan)/bateria. Edgar Eduardo Carreón (huevo)/guitarra lider. y Alejandro Sanchez (chore)/voz y
guitarra. De ahí hasta mediados de el 2005 se mantuvo esta base tocando principalmente covers, en
fiestas y cotorreos particulares. A finales de ese año, tras la salida de El Chore, se integra Daniel
Martín moreno (kukin). A principios de el 2006 se ausenta El Huevo, se integra Edgar Hernandez, y
por ahi de abril llega Max Hurbano, integrando por primera vez, el Bajo al grupo. Solo unos meses
despues, sale de la banda El Kukin, para formar su propio grupo, y con algunos dias de diferencia,
Edgar hernandez. A partir de ahí, Max Hurbano pasa a ser voz y guitarra de el grupo,(y el que va por
las chelas); regresa Edgar Eduardo, al requinto, y comienza la nueva era de Tabacco Blues, con
musica original de el grupo, y temas propios y fusiles recreados por Max Hurbano, quien venia de ser
bajista de Jendell, y baterista de La Falsa Sociedad, y La Dualidad. Despues de mucho tiempo esfuerzo
y desvelos logran terminar lo que es su primera produccion discografica; algo totalmente sencillo y
casero, pero con mucho empeño, cariño y respeto para toda la banda que le late no solo el buen
Rock, sino tambien la letra con mensaje, con sentido, con "Feeling" La mala... es que al ser
produccion casera, solo algunos podran tenerlo en su coleccion de discos, pues no hay distribucion.
Pero en ésta pagina habrá actualizaciones periodicas, para alternar todas y cada una de las canciones
de ésta singular y rara banda. Ahora con nuevos elementos a bordo: Beto Lira (ex-Jendell, y ex-La
Dualidad) en el bajo, (la separación de el "Talivan" ), y la más reciente adicción de Itzel Anaíd (Chela)
en la lira, y Azucena (Azúcar) en los coros, ahora Max Hurbano pasa a ser baterísta y voz(y el de las
chelas), en espera de que algun Batako aparezca; y con la firme propuesta de mejorar lo yá hecho),
y esperando lo que venga, Tabacco Blues es una banda de Rock-R&B, sin complejos de ningun tipo.
</div>
Sí, ya se que nos quedó en la esquina, pero lo bueno que ya sabemos moverlo al centro; ok, lo
haremos, pero tambien aprovecharemos para cambiar el texto por una imagen, vale; una enorme,
una con 4 monitos, recuerdas? para que nos aparezcan las dos barras.
Recuerda que si solo queremos una, sabemos ya como hacerlo.
Esto sería así:
<div style="position:absolute;top:200px;left:50%;margin-left:-200;overflow: auto; width: 400px; height: 150px; text-align:center;background-color:gold; border: 3px solid #000000;">
<img src="http://maxhurbano.byethost7.com/?di=1112901246378"/>
</div>
Listo; fué sencillo. Y bueno, para una página completa, se usa <BODY STYLE="OVERFLOW:AUTO;">, y
para un segmento de HTML, solo arma tu DIV con OVERFLOW, y mete ahí todo lo que quieras, antes
de la etiqueta correspondiente de cierre: </DIV>. Y luego...., vamos a lo que sigue; falta menos.
11.- Cambiar de tamaño videos de Youtube y Slideshow de fotos:
Para este ejemplo, usaremos un video de Youtube, copiaremos el codigo que nos facilita, y
modificaremos su tamaño; tambien lo centraremos, pues como sabemos, no hay contenedor y se nos
irá a la esquina; lo haremos tambien "EN LINEA", dentro de <OBJECT STYLE=".
No esta de más decir que será el mismo proceso con algun Slideshow de fotos, lo unico que hay que
hacer, es buscar los elementos WIDTH y HEIGHT dentro del codigo del video o el Slide, y modificarlos
a como mejor nos parezca; cabe mencionar que estos elementos, aparecen 2 veces en los videos y
hasta 4 veces en algunos Slides; así que habrá que buscar bien, y cambiar los valores, tambien toma
en cuenta que no siempre el orden es WIDTH HEIGHT; a veces es contrario en el primer codigo, o en
el segundo, OJO con eso, solo para que no pongamos valores cambiados; no es tan grave; a fin de
cuentas, todo tiene remedio. El codigo del video original, será este; puedes pegarlo en tu documento
para ver su tamaño original, y luego ya modificado, verás la diferencia; por cierto, el video es un
post aparte; te podría servir. Veamos:
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&
hl=es_ES&rel=0&color1=0x5d1719&color2=0xcd311b">
</param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&hl=es_ES&rel=0&
color1=0x5d1719&color2=0xcd311b"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425"
height="344"></embed></object>
Bien; ahora a centrarlo (esto tal vez no lo necesites, recuerdas?), y darle un tamaño de, digamos...,
800x600 pixeles, manos a la obra:
<object style="position:absolute;top:100px;left:50%;margin-left:-400px;" width="800"
height="600"><param name="movie"
value="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&hl=es_ES&rel=0&
color1=0x5d1719&color2=0xcd311b">
</param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&hl=es_ES&rel=0&
color1=0x5d1719&color2=0xcd311b"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800"
height="600"></embed></object>
Que tal.., lo ves casi igual..?? prueba con 1200x900..!! Verdad que se nota..??
12.- Imagen de fondo a un Slideshow:
Bueno, pues le llego su momento al SlideShow; como recordarán, no experimentamos con él en el
anterior ejemplo; recuerdenme cambiar de tamaño el original que tomemos, para ver que tambien se
rinde ante nuestro ESTILO. Vamos por el codigo.
Ya lo tenemos; es este:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="290" width="395"
style="width:395px;height:290px" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://widget-be.slide.com/widgets/slideticker.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="l" />
<param name="flashvars" value="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal"
src="http://widget-be.slide.com/widgets/slideticker.swf" height="290" width="395"
style="width:395px;height:290px"
align="middle" wmode="transparent" quality="high" scale="noscale" salign="l"
flashvars="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" />
</object>
Ya lo viste? son los monitos otra vez..!! bueno; igual nos servirá; pues aunque hay millones de videos
y Slides, prefiero hacerle publicidad a quien conozca... Lo primero que haremos, será centrarlo;
odio que quede esquinado, aunque como ya dijimos, eso no pasaría en una página ya armada; otra
vez lo haremos "EN LINEA" con STYLE=" en la etiqueta TABLE; despues, redimensionaremos a 800x700
pixeles, e insertaremos una imagen; como es para fondo, con el tamaño adecuado; en este caso
utilizaremos una que tiene una imagen de base negra, y encima otra con pequeñas imágenes al
centro; esto es para que no sobresalga cuando se visualice una foto que no llene horizontal o
verticalmente el cuadro del Slide; no tiene fondo negro nuestro slide; sino transparente; eso lo
definimos al momento de crearlo; en www.slide.com por ejemplo.
Ahora quedaría así:
<table background="http://maxhurbano.byethost7.com/?di=8129059237412"
style="position:absolute;top:50px;left:50%;margin-left:-400px;"><tr><td width="800px" height="700">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="700" width="800"
style="width:800px;height:700px" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://widget-be.slide.com/widgets/slideticker.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="l" />
<param name="flashvars" value="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal"
src="http://widget-be.slide.com/widgets/slideticker.swf" height="700" width="800"
style="width:800px;height:700px"
align="middle" wmode="transparent" quality="high" scale="noscale" salign="l"
flashvars="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" />
</object>
</td></tr></table>
Y bueno, como aquí no importa que se repita la imagen de fondo, pondremos una pequeña, y
dejaremos que se repita; a ver que pasa:
<table background="http://maxhurbano.byethost7.com/?di=512880683889"
style="position:absolute;top:50px;left:50%;margin-left:-400px;"><tr><td width="800px" height="700">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="700" width="800"
style="width:800px;height:700px" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://widget-be.slide.com/widgets/slideticker.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="l" />
<param name="flashvars" value="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal"
src="http://widget-be.slide.com/widgets/slideticker.swf" height="700" width="800"
style="width:800px;height:700px"
align="middle" wmode="transparent" quality="high" scale="noscale" salign="l"
flashvars="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" />
</object>
</td></tr></table>
Que tal..?? Ahora si sobresale; igual que si fuera una imagen grande sin base, camo la anterior.
Pueden colocarla de la forma que más les guste.
Vamos a lo que sigue.
Se me acabó el espacio; solo faltaban tres; ok, haré la 2a parte sobre los puntos 13, 14 y 15.
Y lo que vaya saliendo......
Este es el link de la segunda parte:
PARTE 2
Si aún con todos estos ejemplos, sigues teniendo alguna duda, no te preocupes; para que son los
amigos..?? Puedes mandar un MP con tus dudas, o escribir a [email protected] o comentar
abajo, y haremos hasta lo imposible por solucionarlas; no lo dúdes.
Y si además logro ser NFU: dormiré tranquilo al fin...
Hablando de estilo; comentar habla bien de tí..!!