WebSite X5Help Center

 
Peter H.
Peter H.
User

Have an image change with the date  en

Автор: Peter H.
Просмотрено 1567, Подписчики 1, Размещенный 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.

Размещено
6 Ответы
John S.
John S.
User

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>

Читать больше
Размещено От John S.
John S.
John S.
User

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.

Читать больше
Размещено От John S.
Peter H.
Peter H.
User
Автор

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. 

Читать больше
Размещено От Peter H.
John S.
John S.
User

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.

Читать больше
Размещено От John S.
Peter H.
Peter H.
User
Автор

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 :)

Читать больше
Размещено От Peter H.