14 marzo 2013 ~ Comentarios desactivados en Código CSS y JavaScript para ocultar imagen

Código CSS y JavaScript para ocultar imagen

En el día de hoy hablaremos de un código de programación que hemos encontrado mediante el cual podrán ocultar una determinada imagen, para luego mostrarla con hacer clic en un sencillo botón. Uno de los aspectos positivos que podremos lograr con la ayuda de este código, es el hecho de que si lo aplicamos a nuestro sitio web las personas que nos visiten podrán cargar el sitio sin muchos problemas, ya que reducirá considerablemente la cantidad de elementos que tienen que cargar una vez que una persona accede a cualquier sección de nuestro sitio web.

cssblog

Navegando por el CSSBlog, un sitio dedicado a publicar artículos de recursos CSS, novedades y demás, hemos encontrado un fantástico tutorial en donde nos enseña paso a paso cómo realizar este elemento, el cual podremos aplicar a nuestros sitios, ya sea un blog o un foro, ya que son las principales plataformas las cuales utilizan como medio las imágenes multimedia para adornar o instruir a sus lectores frecuentes.

Recomendamos probar este código primero con un programa de desarrollo web, ya que al aplicarlo en nuestros sitios será mucho más difícil debido a que deberemos colocarlo por cada imagen que quiciéramos ocultar, ya que sistematizarlo será un trabajo mucho más difícil.

Primeramente tendremos que colocar el código en HTML con el cual montaremos la imagen, acompañada de una etiqueta DIV la cual utilizaremos para llamar desde nuestra plantilla de estilos y de las funcioens que llamemos con JavaScript.

<div id="myimageDiv" style="display:none"> <img id="myimage1" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/76194_462978404054_4560169_n.jpg" alt="" /> </div>

El segundo paso es el colocar el código JavaScript en la plantilla de funciones de nuestro sitio web, en donde normalmente están colocados los scripts de nuestro sitio web:

<script type="text/javascript"> <!-- function showHide(){ //create an object reference to the div containing images var oImageDiv=document.getElementById('myimageDiv') //set display to inline if currently none, otherwise to none oImageDiv.style.display=(oImageDiv.style.display=='none')?'inline':'none' } //--> </script>

Recomendamos leer el artículo original de CSSBlog en donde explica más detalladamente cómo ocultar una determinada imagen y mostrarla con un botón. Además el sitio publica un ejemplo desde el cual podremos ver el funcionamiento de este elemento en una sección del sitio, además también podremos descargar los archivos con los cuales podremos sin problemas ocultar imágenes.

Social Share Counters
Tags: ,

Comments are closed.