Have an image change with the date
Author: Peter H.
Visited 1565,
Followers 1,
Shared 0
Hi all this is just an idea but i think it may well get some movement if i can explain it well. We already have the snow that we can control by the date. I wanted to take that a little further with the idea of also having an image that can be swapped out with the date so as you can see in my attached picture our logo with santa hat on could be automatic and then after christmas an Easter one and so on. This i think would be a great feature when i an building for other people.
Posted on the
Hello Peter
This can easily be done with some JS and the <img> tag.
Here is an example that shows how many days until christmas :
<script>
var today=new Date();
var cmas=new Date(today.getFullYear(), 11, 25);
var oneDay=1000*60*60*24;
if (today.getMonth() < 11 || today.getDate() <= 25) {
document.write('<p style="text-align:center; color:purple; font-size:1.2em">' + Math.ceil((cmas.getTime()-today.getTime())/oneDay) + ' days left until Christmas!</p>');
}
</script>
Demo is here:
https://wsx5demo.afsoftware.fr/js-effects.html
You could try this:
------------
<img src="http://eksempelsite.dk/churches/images/bottle06.png"
onload="setImgByDate(this,holiday)">
<script type="text/javascript">
var holiday = [
[ "1015", "1101", "http://eksempelsite.dk/churches/images/bottle02.png" ],
[ "1210", "1226", "http://eksempelsite.dk/churches/images/bottle03.png" ],
[ "1227", "1231", "http://eksempelsite.dk/churches/images/bottle04.png" ],
[ "0101", "0102", "http://eksempelsite.dk/churches/images/bottle05.png" ]
];
function disable(){return false}
function setImgByDate(imgRef,dateList) {
imgRef.onload = disable;
var today = new Date();
var month = 1+today.getMonth();
if (month<10) month = "0"+month;
var date = today.getDate();
if (date<10) date = "0"+date;
var MMDD = ""+month+date;
for (var i=0; i<dateList.length; i++) {
if (MMDD>=dateList[i][0] && MMDD<=dateList[i][1]) {
imgRef.src = dateList[i][2];
return;
}
}
}
</script>
----------
The code between ---- you simply put (copy) into an html-object.
I have used the full path for images so that you can easily try it yourself.
In the first line you specify the default image you want to show.
Then in the array yoy specify the month+day interval for which you want to show another image.
You can specify height for the images but you could also upload the images in the size that fits your needs. I think you should give all images the same size.
Hope you have it to function.
Author
Hi everyone the sad thing is i like to design with X5 and i was thinking more about the X5 objects that can be installed. I have often put coding into websits and forgot about it or just plain overwritten it because i dont go back to them for a couple of years or so. but great responses though.
Hello peter
You could think of the html with code as an object. In fact it is. And it is very flexible. I think my last post has what you asked for. I am afraid that if you will wait for a dedicated non-flexible X5 object, then you could wait for a very long time.
Author
Hi John I think you are right. I will have a little play with this and see what i can come up with thank you very much :)