How do I display images at different times on webpage

Question

Hello,

I'm supposed to display images at certain times of the day on the webpage, Please can anyone tell me how to go about it

Answer 1

You could make a Date object in javascript. Check the current time and depending on the time, you set the img src to whatever image you want for that time of day :) or hide the image through myimg.style.visibility = "hidden" if you dont want to display an image at that moment.

Answer 2

The safest way is to do this on the server side, do not do this on the client side using javascript because clients may have different timezones.

for instance in PHP:

<style type="text/css"> #someimage{ position:absolute;left:200px;top:100px; }</style>  

<?php
   $h = intval(date('h'));
   $m = intval(date('m'));
   if($h==12 && $m==00){
      echo '<img src="someimage.gif" id="someimg"/>';
   }
?>

in python:

#!/usr/bin/python
import time

localtime = time.localtime(time.time())
h = localtime[3]
m = localtime[4]
if h==12 and m==0: print "<img src='some.gif' id='someimg'/>"

Answer 3

You'll need a template tag which checks the time of day and outputs the relevant HTML. How you do that depends on how you want to determine which image is for what time of day. For example, you could have a model which records a change_time and an image path, and the tag would get the image with the most recent change_time.

For instance:

import datetime

@register.simple_tag
def image_change_by_time():
    now = datetime.datetime.now().time()
    image = Images.objects.filter(change_time__lte=now).order_by('-change_time')[0]
    return mark_safe('<img src="%s">' % image.url.path)

Answer 4

If you need to change the image before a page refresh, you could use jquery ajax call to get the correct image. jquery has some interval functionality which would allow this.