css – Utilizar un loading o imagen de carga para indicar el progreso de download de las imagenes grandes by lawebera.es

Fuente: lawebera.es

Resumen: Como usar una imagen animada de carga para amenizar la espera de tus usuarios.

No hay nada mejor que hacer saber al usuario cuando está esperando algo para no impacientarlo, y aunque una animación simple no le informa del progreso exacto o del tiempo que tendrá que esperar, muchas veces es suficiente para retener al usuario en tu página y evitar que se marche pensando que el sitio web no funcionaba.

Una manera muy simple de indicar que una imagen o cualquier otro elemento aun no se cargó es colocar en su lugar una imagen de fondo animada que nos de la sensacion de que ese elemento está descargandose.

Para ello aquí un truco muy sencillo, poner de fondo del elemento una imagen animada muy ligera, para que no añada un exceso de carga a la página web, pero que indique al usuario que la página sigue funcionando.

El código necesario para hacer el loading es el siguiente:

img {
  background:transparent url(images/ajaxload.gif) center no-repeat;
}

Con este código la imagen animada (imagen de fondo) se mostraría en todas las imágenes que estén cargandose en tu web.
Eso es, así de sencillo, con este simple código a todas las imagenes del sitio le colocamos nuestra animación de fondo. Cuando la imagen principal se haya cargado dejará de ser visible, mientras se esté descargando le damos al usuario mayor sensación de continuidad, pareciendo más evidente que la página sigue activa.

Pero como esto puede resultar innecesario usarlo en todas las imágenes de una página web, ya que hay muchas imágenes pequeñas que cargan rápidamente, otra forma es crear una clase CSS que se podrá utilizar en las imagenes grandes (muy pesadas) que usemos en nuestra web, y para las que sí resulta útil añadir un efecto como este puesto que es posible que el usuario tenga que esperar unos segundos para ver la imagen:

.precarga {
    background:transparent url(images/ajaxload.gif) center no-repeat;
}

Y para que la imagen de fondo aparece como la queremos, tenemos que añadir la anchura (width) y la altura (height) de las propiedades de la imagen, mediante estilos CSS en un div que rodee la imagen:

<div style="width: 140px; height: 120px">
	<a href="tp://www.paginaweb.com/>
		<img src="http://www.paginaweb.com/" alt="texto descriptivo" border="0" />
	</a>
</div>

Para conseguir la imagen de fondo a mostrar mientras se carga la imagen de la web, hay páginas muy buenas que nos hacen el trabajo:

  • Ajax Load: esta herramienta online te permite crear imagenes de carga animadas, ya sea para el tema que estamos tratando o para el uso que se te ocurra. Te permite personalizar los colores y el tipo de animación. Muy recomendable. Un ejemplo:
    imagen de carga animada
  • Preloaders: esta otra herramienta hace lo mismo que la anterior, solo que te crea imágenes animadas en 3D. También puedes personalizar colores y tipo de animación. Un ejemplo:
    imagen de carga animada en 3D

También puedes usar Ajax para lograr este tipo de efecto.

Anuncios

Superponiendo cosas con CSS by vagabundia

Fuente: vagabundia.blogspot.com

Toda etiqueta es un rectángulo que se ubica ya sea uno al lado del otro o uno debajo del otro. Esto siempre es así salvo excepciones … como todo.

Justamente, esas excepciones son las que nos permite superponer los rectángulos y hacer que uno se muestre encima del otro. Básicamente, hay dos propiedades que controlan esos detalles:position y z-index.

Por defecto, la propiedad position, tiene el valor static pero, admite otros como relative yabsolute. Usando esos dos valores podemos ubicar cualquier cosa en un lugar preciso. Lo más simple es que el contenedor tenga el valor relative y el contendio el valor absolute:

<div style="position: relative;">
  <div style="position: absolute;"> HOLA </div>
</div>
Así como está, no parece haber diferencias, si le quitamos as propiedades, se verá igual porque nos falta algo más, agregarle las que nos permitirán ubicarlo con exactitud y estas son top, right,bottom y left que son las “coordenadas” cuyo punto de origen es el borde del contenedor asi que si ponemos left: 30px y top: 50px, el contenido bajará 50 pixeles (borde superior = cero) y se movera otros 30 a la izquierda (borde izquierdo = cero):
<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> HOLA </div>
</div>
Y si ponemos right: 30px y bottom: 50px, el contenido subirá 50 pixeles (borde inferior = cero) y se movera otros 30 a la derecha (borde derecho = cero):
<div style="position: relative;">
  <div style="position: absolute; right: 30px; bottom: 50px;"> HOLA </div>
</div>
De este modo, bien podríamos ubicar más de un contenido:
<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> CONTENIDO UNO </div>
  <div style="position: absolute; right: 30px; bottom: 50px;"> CONTENIDO DOS </div>
</div>
En el ejemplo, dadas las ubicaciones, el segundo se superpone al primero y aparece por encima ya que esa es la forma normal en que se muestran los rectángulos; a medida que los agregamos, se van “apilando” y la propiedad z-index permite cambiar ese orden natural.

Como no los hemos definido, basta ponerles un número, y el que tenga el número más alto, se mostrará por encima sin importar la forma en que esté escrito el código; en este ejemplo, el tercero no se muestra arriba de los otros porque forzamos a que sea el segundo el que esté arriba de todo, poniéndole un valor de z-index superior:

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> CONTENIDO UNO </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CONTENIDO DOS </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CONTENIDO TRES </div>
</div>
Hasta ahí son rectángulos de colores pero el contenido puede ser cualquier cosa; por ejemplo textos y si estos textos no tienen fondos de color, también se superpondrán
Mezclamos entonces varias propiedades y si es necesario, pueden verse algunas ideas básicas en webdesignerdepot.com.
<style>
#superponer {
  position: relative;
  text-align: center;}
#superponer h5 {
  color: #D0D9E1;
  font-family: Georgia;
  font-size: 140px;
  letter-spacing: -6px;
  margin: 0;
  opacity: .9;
  padding: 0;
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  -webkit-transform: skew(20deg);
}
#superponer h6 {
  color: #4682B4;
  font-family: Verdana;
  font-size: 60px;
  left: 120px;
  letter-spacing: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 20px;
}
#superponer h6 span {
  color: #F66;
  font-family: Times New Roman;
  font-size: 100px;
  font-style: italic;
  text-shadow: 3px 3px 1px #000;
}
#superponer:hover > h6 span {
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -webkit-transform: scale(2);zoom:2;
}
</style>

<div id="superponer">
  <h5> un título </h5>
  <h6> eje <span> m </span> plo </h6>
</div>

css: Div fijo en la parte inferior de la pantalla

Fuente: http://seembiosis.blogspot.com.es/2012/05/div-fijo-en-la-parte-inferior-de-la.html

a) Creamos el div o la section, lo que viene siendo el contenedor que queremos posicionar al pie de la página y le añadimos el id:  fixed-bar.

<div id=”fixed-bar”>
Aquí va el contenido
</div>

b) Añadir el siguiente css

    #fixed-bar {
bottom: 0;
        height: 34px;
        padding: 13px 0 4px;
        position: fixed;
        width: 100%;
        z-index: 5000;
}
Listo!

Efecto Hover sobre imágenes con CSS by ribosomatic

Fuente: http://www.ribosomatic.com/articulos/efecto-hover-sobre-imagenes-con-css/

Quizás lo hayan notado, nos referimos a un efecto que consiste en una serie de imágenes semi-transparentes que al pasar ó posar el cursor toman sus intensidad normal. Como pueden apreciar en esta imágen:

Hover efecto

Veamos como realizar esto con una estilos. Dentro de las etiquetas <head></head>colocamos el siguiente código:

<style type="text/css">
a.linkopacity img {
        filter:alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
        -khtml-opacity: 0.5;
}
 
a.linkopacity:hover img {
        filter:alpha(opacity=100);  
        -moz-opacity: 1.0;  
        opacity: 1.0;
        -khtml-opacity: 1.0; 
}
</style>

Ahora simplemente nos queda aplicarlo a nuestras imágenes. Dentro de las etiquetas <body></body> escribimos lo siguiente:

<a class="linkopacity" href="#" title="Enlace 1" >
<img src="http://mihost/img/img1.jpg" alt="Imagen 1"></a>
 
<a class="linkopacity" href="#" title="Enlace 2" >
<img src="http://mihost/img/img2.jpg" alt="Imagen 2"></a> 
 
<a class="linkopacity" href="#" title="Enlace 3" >
<img src="http://mihost/img/img2.jpg" alt="Imagen 3"></a>

Vía AbeOnTech

Resaltar Fila al pasar el puntero del Mouse by codigo caxa

Fuente : http://www.codigocaxa.net78.net/?p=13Resalta fila al pasar el puntero

Pues bien, la idea es resaltar(aplicar una regla de estilo CSS) toda una fila de una tabla al situar el mouse en dicha fila, tal y como se puede apreciar en la figura del costado.

La regla CSS a aplicar en nuestro ejemplo se llamará: resaltar, cuyo código es el siguiente:

tr.resaltar {
    background-color: #F5FFD7;
    cursor: pointer;
}

Veamos brevemente lo que contiene nuestra regla CSS. Primeramente con tr. estamos diciendo que solo es aplicable a las filas(<tr>)de una tabla. La propiedad background-color establece como color de fondo de la fila al valor hexadecimal #F5FFD7 (parecido al verde agua). Finalmente la propiedad cursor: pointer indica que el cursor se tiene que cambiar por la del icono de la manito.

Bueno, La forma clásica y usual de hacer el RESALTE es colocando manualmente en el evento onmouseover de la fila(<tr>) el estilo css que deseamos que obtenga al situarnos encima de dicha fila y en el evento onmouseout donde indicaremos que no se aplicará regla css alguna cuando el puntero del mouse salga de la fila. El Código sería el siguiente:

<tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null">
    <td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;amp;amp;oacute;n</td>
</tr>
<tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null">
    <td>Per&amp;amp;amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td>
</tr>

Esto es aceptable siempre y cuando la tabla conste de pocas filas, pero ¿Qué sucedería si la tabla consta de 20, 500 ó 1000 e incluso más filas?, ¿demasiado tedioso verdad?, pues la idóneo,en estos casos, es utilizar DHTML (HTML Dinámico) para hacerlo realidad con tan solo unas cuantas líneas de código.

¿Qué es DHTML?

DHTML (HTML Dinámico): No es un lenguaje de programacion nuevo; es más bien el uso combinado de HTML, Hojas de estilos CSS y JavaScript que me permitirá,luego de cargada la página, acceder a cada una de las etiquetas html y poder modificar sus atributos. Para aplicar DHTML necesitamos obligatoriamente conocer el DOM (Document Object Model).

¿Qué es DOM?

DOM (Document Object Model): Es el Modelo en Objetos para la representación de Documentos, es sobretodo otra forma de ver el contenido HTML de una Página Web. Este modelo es altamente gerarquizado y a través de él podemos acceder al contenido y estilo de cada etiqueta html del documento y modificarla de acuerdo a algún evento. DOM permite entonces insertar, borrar o modificar las etiquetas HTML y sobretodo sin recargar la pagína.

Pues bien, luego de estos conocimeintos previos ya podemos realizar la función JavaScript que permitirá realizar el resalte del manera rápida. El Código necesario es el siguiente:

function ResaltarFila(id_tabla){
    if (id_tabla == undefined)      // si no se le pasa parametro
        // recupera todas las filas de todas las tablas
        var filas = document.getElementsByTagName("tr");
    else{
        // recupera todas las filas de la tabla indicada en el parametro
        var tabla = document.getElementById(id_tabla);
        var filas = tabla.getElementsByTagName("tr");
    }
    // recorre cada una de las filas
    for(var i in filas) {
    	// si el puntero esta encima de la fila asigna la regla css: resaltar
        filas[i].onmouseover = function() {
            this.className = "resaltar";
        }
        // si el puntero salga de la fila asigna ninguna regla
        filas[i].onmouseout = function() {
            this.className = null;
        }
    }
}

Línea 04, Se utiliza la función: getElementsByTagName que provee DOM a través del objeto document retornando la referencia a todas las etiquetas(TagName) <tr>(filas de una tabla).

Línea 07: Si es que le he pasado el nombre de la tabla, recupera la referencia a la tabla cuyo nombre(id) sea igual al parámetro id_tabla mediante la función getElementsById y lo almcaenda en la variable tabla.

Linea 08: a diferencia de la línea 04 se almacena en la variable fila todas las referencia de todas las filas pero tan solo de la tabla almacenada en la variable tabla.

Linea 13,14: Agrega a la fila actual,observen que con el for de la linea 11 se recorre una a una las filas, el evento onmouseover e indica que cuando suceda esto le asigne a la fila la regla de estilo CSS llamada “resaltar“(this.className =”resaltar”;).

Línea 17,18: Agrega a la fila actual el evento onmouseout e indica que cuando suceda esto le asigne a la fila ninguna regla de estilo CSS (this.className =”null”;)”.

Listo!!!, eso es todo, lo que nos queda es llamar a la función luego que la carga de pagina haya sido completada (importante). el código sería el siguiente:

// resaltar fila de tabla cuyo nombre sea tabla_paises
ResaltarFila('tabla_paises');
// si queremos resaltar todas las tablas,
// no le pasamos parametro
ResaltarFila();

Les dejo ahora todo el codigo perteniente al archivo: resalta_fila.html.

<html>
<head>
    <title>Resaltar fila de una Tabla al pasar el Mouse</title>
    <script language="JavaScript" type="text/javascript">
    function ResaltarFila(id_tabla){
            if (id_tabla == undefined)      // si no se le pasa parametro
            // recupera todas las filas de todas las tablas
            var filas = document.getElementsByTagName("tr");
        else{
            // recupera todas las filas de la tabla indicada en el parametro
            var tabla = document.getElementById(id_tabla);
            var filas = tabla.getElementsByTagName("tr");
        }
        // recorre cada una de las filas
        for(var i in filas) {
            // cuando el puntero esta encima de la fila asigna la regla css: resaltar
            filas[i].onmouseover = function() {
                this.className = "resaltar";
            }
            // cuando el puntero salga de la fila asigna ninguna regla
            filas[i].onmouseout = function() {
                this.className = null;
            }
        }
    }
    </script>
    <style type="text/css">
    tr.resaltar {
        background-color: #F5FFD7;
        cursor: pointer;
    }
    </style>
</head>

<body>
<table id="tabla_paises">
<caption>Pa&amp;amp;amp;amp;amp;amp;amp;amp;iacute;ses Sudamericanos</caption>
<tr>
    <th width="180">Pa&amp;amp;amp;amp;amp;amp;amp;amp;iacute;s</th>
    <th width="120">Capital</th>
</tr>
<tr><td>Argentina</td><td>Buenos Aires</td></tr>
<tr><td>Bolivia</td><td>La Paz</td></tr>
<tr><td>Brasil</td><td>Brasilia</td></tr>
<tr><td>Chile</td><td>Santiago de Chile</td></tr>
<tr><td>Colombia</td><td>Bogot&amp;amp;amp;amp;amp;amp;amp;amp;aacute;</td></tr>
<tr><td>Ecuador</td><td>Quito</td></tr>
<tr><td>Guyana</td><td>Georgetown</td></tr>
<tr><td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;amp;oacute;n</td></tr>
<tr><td>Per&amp;amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td></tr>
<tr><td>Surinam</td><td>Paramaribo</td></tr>
<tr><td>Trinidad y Tobago</td><td>Puerto Espa&amp;amp;amp;amp;amp;amp;amp;amp;ntilde;a</td></tr>
<tr><td>Uruguay</td><td>Montevideo</td></tr>
<tr><td>Venezuela</td><td>Caracas</td></tr>
</table>
<br /><br />

<table id="tabla_libros">
<caption>Libros Programación</caption>
<tr>
    <th width="220">Nombre</th>
    <th width="80">P&amp;amp;amp;amp;amp;amp;amp;amp;aacute;ginas</th>
</tr>
<tr><td>PHP</td><td>650</td></tr>
<tr><td>JavaScrip</td><td>420</td></tr>
<tr><td>CSS</td><td>345</td></tr>
</table>

<script language="JavaScript" type="text/javascript">
    // resaltar fila de tabla cuyo nombre sea tabla_paises
    ResaltarFila('tabla_paises');
    // si queremos resaltar todas las tablas,
    // no le pasamos parametro
    ResaltarFila();
</script>
</body>
</html>

Bueno yo recomiendo tener el código Javascript en un archivo aparte, el Código CSS también en un archivo aparte para luego hacer en nuestro archivo html la llamada a esos archivos, esto permite generar codigo más limpio y entendible. En la demo he aplicado esto.

Ver Demo Online | Descargar Código Fuente

Biliografía : DHTML Ya, DOM

Pasar una variable de PHP a JavaScript

Es sencillo, simplemente es hacer la asignación respetando la sintaxis de JavaScript. El siguiente ejemplo lo ilustra de una forma sencilla:

<?php

echo ‘<head><title>’.$_SERVER[PHP_SELF].'</title></head>

<html>

<body>’;
$variable_php=”variable en php”;
echo ‘<script languaje=”JavaScript”>

var varjs=”‘.$variable_php.'”;

alert(varjs);

</script>’;
echo “<a href=$_SERVER[PHP_SELF]>Recargar la Página</a>”;

echo ‘</body>

</html>’;
?>

Fuente http://dns.bdat.net/trucos/faqphp-v1/x98.html