I made a post about this: php time based image wont change right right now i got the time working but still need the 4 images to change correctly.
i made a div with the 4 images in it but now the images need to change on specific times. i gave all the images the class"images" and set the display to none in the css however the images will still show up.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="Site.css">
<title>PHP time based page</title>
</head>
<body>
<?php
date_default_timezone_set("Europe/Amsterdam");
function getTime() {
$Time = explode(" ", date('h:i A'));
$time = $Time[0];
if (($Time[1] === "PM") && ($time !== "00:00")) {
$temp = explode(":", $time);
$temp[0] = ((int)$temp[0]) + 12;
$time = implode(":", $temp);
}
$Moment = "";
if (($time >= "06:00") && ($time < "12:00")) {
$Moment = $Moment . "morning";
define("TIME", "Goodmorning!");
}
else if(($time >= "12:00") && ($time < "18:00")){
$Moment = $Moment . "afternoon";
define("TIME", "Goodafternoon!");
}
else if(($time >= "18:00") && ($time < "24:00")){
$Moment = $Moment . "evening";
define("TIME", "Goodevening!");
}
else {
$Moment = $Moment . "night";
define("TIME", "Goodnight!");
}
return ["moment" => $Moment, "time" => $time];
}
function getGreeting() {
return "Good ".getTime()["moment"].", it is now ".getTime()["time"];
}
$images = [
"morning",
"afternoon",
"evening",
"night"
];
?>
<p><?php echo getGreeting(); ?></p>
<div class="images">
<?php
$moment = getTime()["moment"];
?>
<img src="images/<?php echo $moment; ?>.png" alt="<?php echo $moment; ?>">
</div>
</body>
</html>
css
body{
padding: 0%;
margin: 0%;
color: white;
height: 700px;
}
.invisible{
display: none;
}
so if this is the page, the text should be something like this and the images need to change
My Answer:
"image" and added a unique id to each image. Here's the code to change the image based on time:
html
Change Image on Time
In this code, we first hide all the images by setting their display property to none using CSS. Then, we get the current hour using `new Date().getHours()` and based on the current time, we display the corresponding image by setting its display property to block.
You can adjust the time ranges and image sources as needed.
Rate this post
4 of 5 based on 3653 votesComments