sábado, 14 de abril de 2018

Cambiar imagen según el día de la semana

Hoy os traigo como cambiar imagen o texto para que semuestre diferente cada día de la semana.
Podemos utilizarlo para mostrar que día es hoy, que aunque parezca obvio, ay veces que no sabemos en qué día estamos.




El código es muy parecido al que vimos en el post de "Mensaje según la hora del dia" comenzamos:



  1.        var a = new Date ();
  2.        var dia = a.getDay();
  3.      if(dia == 0) document.write("Domingo");
  4.      if(dia == 1) document.write("Lunes");
  5.      if(dia == 2) document.write("Martes");
  6.      if(dia == 3) document.write("Miercoles");
  7.      if(dia == 4) document.write("Jueves");
  8.      if(dia == 5) document.write("Viernes");
  9.      if(dia == 6) document.write("Sabado");


Se vería así:


Evidentemente, a esto luego habría que darle estilos css para personalizarlo.

y si queremos que se muestren imágenes en lugar de texto, el código quedaría de la siguiente manera:



  1.       var a = new Date ();
  2.       var dia = a.getDay();
  3.      if(dia == 0) document.write("<img src='aqui_la_imagen_del_domingo.gif'/>");
  4.      if(dia == 1) document.write("<img src='aqui_la_imagen_del_lunes.gif'/>");
  5.      if(dia == 2) document.write("<img src='aqui_la_imagen_del_martes.gif'/>");
  6.      if(dia == 3) document.write("<img src='aqui_la_imagen_del_miercoles'/>");
  7.      if(dia == 4) document.write("<img src='aqui_la_imagen_del_jueves'/>");
  8.      if(dia == 5) document.write("<img src='aqui_la_imagen_del_viernes'/>");
  9.      if(dia == 6) document.write("<img src='aqui_la_imagen_del_sabado'/>");





Tendríamos que cambiar  "aqui_la_imagen_del_XXXX" por la url de la imagen que queramos mostrar, como veis se puede modificar el código a vuestras necesidades.




Espero que os haya sido útil, si tenéis dudas consultar.



Un saludo.

viernes, 13 de abril de 2018

Cambiar mensaje según la hora del día con javascript

Hoy os voy a enseñar a hacer algo que quedará visualmente bien en la web, saludar al visitante de diferente manera según la hora del día.

Si viene por la mañana: buenos días

Por la tarde: buenas tardes


Y por la noche: buenas noches.

El código es muy sencillo y no tiene mayor complicación.Digamos que queremos saludar con el texto "Buenos días" de 4:00  a 14:00, con el texto "Buenas Tardes" de 14:00 a 20:00 y con el texto "Buenas Noches" de 20:00 a 4:00, lo haríamos colocando el siguiente código:

  1. var a = new Date();
  2. var hora = a.getHours();
  3. if(hora >= 1 && hora<= 3){document.write("Buenas Noches")};
  4. if(hora >= 4 && hora<= 14){document.write("Buenos D&iacute;as")};
  5. if(hora >= 15 && hora<= 19){document.write("Buenas Tardes")};
  6. if(hora >= 20 && hora<= 24){document.write("Buenas Noches")};



Cambiaremos las horas a nuestro gusto para adaptar el saludo a nuestras necesidades.
El código se veía así:


Teniendo en cuenta que este código podríamos utilizarlo entre otros usos para poner el horario de atención al público y decirle al visitante si estamos abierto o cerrado.
El código quedaría de la siguiente manera:


  1. var a = new Date();
  2. var hora = a.getHours();
  3. if(hora >= 1 && hora<= 9){document.write("Cerrado")};
  4. if(hora >= 10 && hora<= 14){document.write("Abierto")};
  5. if(hora >= 15 && hora<= 16){document.write("Cerrado")};
  6. if(hora >= 17 && hora<= 20){document.write("Abierto")};
  7. if(hora >= 21 && hora<= 24){document.write("Cerrado")}; 


Y se veía así:



Pudiendo poner imagen en lugar de texto modificando lo siguiente:



  1. var a = new Date();
  2. var hora = a.getHours();
  3. if(hora >= 1 && hora<= 9){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};
  4. if(hora >= 10 && hora<= 14){document.write("<img border='0' src='aqui_la_imagen_abierto.png' width='XXX' height='xxx'/>")};
  5. if(hora >= 15 && hora<= 16){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};
  6. if(hora >= 17 && hora<= 20){document.write("<img border='0' src='aqui_la_imagen_abierto.png' width='XXX' height='xxx'/>")};
  7. if(hora >= 21 && hora<= 24){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};

Y como podéis ver, modificando el código podemos utilizarlo para muchas otras cosas.



Espero que os haya sido útil, cualquier duda consultar.


Un saludo.

martes, 10 de abril de 2018

Crear un enlace a un punto de nuestra web

Hoy vamos a ver como poner enlaces internos o externos que nos lleven a un punto en concreto de la web, esto puede ser muy útil cuando queremos llevar al lector de nuestra web a un punto exacto y no tenga que estar buscando por toda la página, pues cuanto mas fácil se lo pongamos al lector mejor será su experiencia en nuestra web.


Es muy útil cuando tenemos mucho texto y queremos indicar al visitante un punto en concreto de la pagina, con el ancla lo llevaremos directamente.

Para conseguir este efecto es muy simple lo que tenemos que hacer, pondremos el atributo "id" al elemento  donde queramos enlazar, supongamos que queremos llevar al visitante a un contenedor "div" seria esto:


  1. <div>Aquí lo que queramos enseñar>/div>

Tendriamos que añadir al div el atributo id, quedando así:


  1. <div id="aquielid">Aquí lo que queramos enseñar>/div>


y para llamarlo crearemos un enlace que puede ser de varias formas:

poniendo toda la url del sitio y al final ponerle "#aquielid"



  1. ejemplo: http://blog.joason.com/2018/04/crear-un-enlace-un-punto-de-nuestra-web.html#aquielid


  2. ejemplo practico: <a href="http://blog.joason.com/2018/04/crear-un-enlace-un-punto-de-nuestra-web.html#aquielid">aquielmensaje</a>


Si lo vamos ha hacer internamente, otra forma seria solo poner en el enlace "#aquielid"


  1. ejemplo: #aquielid

  2. ejemplo practico:  <a href="#aquielid">aquielmensaje</a>


Recordar que este ultimo enlace solo funcionará si lo estamos haciendo dentro de nuestra web, para hacer anclas hacia otras web´s tendremos que utilizar el enlace completo.






Esto ha sido todo, espero que os sea útil, cualquier duda consultarla.

Un saludo.

miércoles, 4 de abril de 2018

Al pasar el ratón la imagen se agranda

Hoy os traigo un efecto visual que al pasar el ratón por encima de una imagen, está se hace más grande.




El código es muy sencillo, lo haríamos de la siguiente manera:


  1. <img src="aquí la url de la imagen" onmouseover="this.width=x0;this.height=x0;" onmouseout="this.width=x1;this.height=x1;" width="x2" height="x2" alt="agrandar imagen al pasar el ratón" /> 

Pondremos el ancho(width) y el alto(height) de la imagen a nuestro gusto, modificaremos los siguientes parámetros:

x0 = pondremos los px de imagen, tanto ancho como alto, este será el tamaño de imagen cuando esté el ratón encima.

x1 = pondremos los px de la imagen para cuando salgamos con el ratón fuera de la imagen.

x2 = pondremos los px de la imagen que se mostrará en primer lugar.



Y se veía así(Lo he exagerado para que se aprecie bien el cambio):



agrandar imagen al pasar el raton




Espero que os sea de utilidad, si tenéis dudas, consultar.


Un saludo.

martes, 3 de abril de 2018

Modificar el tamaño de la papelera

Hoy os voy a enseñar a cambiar el tamaño de la papelera, pues windows suele utilizar por defecto mucho espacio, y si tenemos un disco duro de poca capacidad, pues nos interesa ganarle unos pocos megas.
Hay que saber que si eliminamos algo de mayor tamaño que el que tiene la papelera, nos lo eliminará directamente, nos avisará previamente de ello antes de eliminarlo.
Daremos click derecho sobre el icono de la papelera



Iremos a propiedades y se nos abrirá el menú de propiedades de la papelera




En este menú, como podéis ver, podemos configurar el tamaño individual de la papelera en cada disco duro que tengamos instalado, introduciremos el tamaño que deseemos reservar para la papelera de reciclaje en MB.



Como podéis ver, en este mismo menú, podemos configurar también el aviso de confirmación de eliminación, si queremos que lo muestre o no y también podemos (mucho cuidado con esto) inhabilitar la papelera para que los archivos se elimine definitivamente, con ello ganaremos espacio, solo podría ser aconsejable esto ultimo, si disponemos de un disco duro muy pequeño.



Espero que os sea de utilidad, si tenéis dudas, consultar.


Un saludo.

lunes, 2 de abril de 2018

Cambiar imagen al pasar el ratón

Hoy os cuento como hacer un efecto visual que puede quedar muy bien en nuestra página web, se trata de cambiar la imagen al pasar el ratón por encima de ella.
Este efecto lo podemos hacer para llamar la atención del visitante. 



El código es muy sencillo, lo haremos de la siguiente manera:


  1. <img alt="Cambiar imagen al pasar el raton" height="XX" width="XX" onmouseout="this.src='aquí la imagen1';" onmouseover="this.src='aquí la imagen 2';" src="aquí la imagen1" />

Y se vería así (pasa el ratón por la imagen):

Cambiar imagen al pasar el raton






Espero que os sea de utilidad.

Un saludo.