Insertar imagen en el sitio según la hora con javascript

Insertar imagen en el sitio según la hora con javascript

...

Semejante a la referencia del post “Insertar saludo en el sitio según la hora con javascript”, puedes utilizar un código algo similar para presentar una imagen en el sitio según la hora.

Por ejemplo, habrás notado que en la línea inicial de esta entrada te estoy saludando, pero ahora estoy usando una imagen (Buenos días, Buenas tardes o Buenas noches).   No obstante, tú puedes insertar el código donde lo requieras y disponer la imagen que desees.

Además, puede aprovecharse la disposición de la imagen para poder definir un vínculo a otro sitio de la web.   

El código es el siguiente:

<div style="text-align: center;"> <script> datenow = new Date(); timenow = datenow.getTime(); datenow.setTime(timenow); hournow = datenow.getHours(); if (hournow >= 18) { image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsX_0O9HwDgc76eVrvKFkUNqLYiaJyh7fS2h4z23eSvjdx5EfIiJFVhpRHYCHwhxBzF85AqruWSXSqX7bO-moO_qs8JwUtTNkXHCkzFWCGIaux9KVh5dHO3vb-zyZvtn6L6hThLtPps3ON/w140-h80-p/buenas+noches.png"; url = "url_de_enlace_de_la_imagen"; } else if (hournow >= 12) { image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgMfd8dRPY00KTr-Rcsrp3QZSUr1Vn4QGPgGHNIlLHpbP0KZUuddZHA_2V6vH-8sV01uzkx34SA5Lp1VYJIq8vDgaj2j5wEgXgGzeHEMM4wfQuYBUGf_hJztKWUXb59USpGktC_hsRLDa/w140-h79-p/buenas+tardes.png"; url = "url_de_enlace_de_la_imagen"; } else { image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabmVeqiS7TMmFoKoNqmxFI0nJJZjSR1RmJEuUYrhx0plDXgu1mpgMonKsVFa5R12VKHJIkUX-BqqRcr7YP_9SgP7is6aAePvMKALC-9n2vj3evph9BFvqYdAqFiwG5ghJE9GZpEEptble/w140-h86-p/buenos+dias.png"; url = "url_de_enlace_de_la_imagen"; } document.write("<a href='" + url + "' target=''><img alt='' src='" + image + "' style='border-width:0; width:220px; height:100px'></a>"); </script> </div>

Reemplaza la dirección origen de la imagen y las de su vinculo (url) según tu requerimiento.
image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabmVeqiS7TMmFoKoNqmxFI0nJJZjSR1RmJEuUYrhx0plDXgu1mpgMonKsVFa5R12VKHJIkUX-BqqRcr7YP_9SgP7is6aAePvMKALC-9n2vj3evph9BFvqYdAqFiwG5ghJE9GZpEEptble/w140-h86-p/buenos+dias.png";

url = "url_de_enlace_de_la_imagen";

Puedes configurar el tamaño de presentación de las imágenes y el ancho del borde, modificando la línea que esta casi al final de código:

document.write("<a href='" + url + "' target=''><img alt='' src='" + image + "' style='border-width:0; width:300px; height:100px'></a>");

Lo que si debes considerar es que las imágenes se vean correctamente y al gusto según el tamaño que dispongas.

Quizás también te interese:

Cómo ver el Tiempo como título en la pestaña de tu explorador de internet