html - php change image on time
Get the solution ↓↓↓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
Answer
Solution:
I would rename the images class to invisible to reflect what it is supposed to do better, like
.invisible {
display: none;
}
Let's create a PHP array with the times:
$images = [
"morning",
"afternoon",
"evening",
"night"
];
Make sure thatgetTime
returns the text and only the text:
function getTime() {
//Don't change the lines above the return statement
return $Moment;
}
This is how you can operate:
<div class="images">
<?php
$moment = getTime(); // Unfortunately getTime does some echoing, you will need to refactor it to separate representation from computation
?>
<img src="images/<?php echo $moment; ?>.png" alt="<?php echo $moment; ?>">
</div>
Code:
<!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
function getTime() {
//Don't change the lines above the return statement
return $Moment;
}
$images = [
"morning",
"afternoon",
"evening",
"night"
];
?>
<div class="images">
<?php
$moment = getTime(); // Unfortunately getTime does some echoing, you will need to refactor it to separate representation from computation
?>
<img src="images/<?php echo $moment; ?>.png" alt="<?php echo $moment; ?>">
</div>
</body>
</html>
EDIT
There are problems with getTime. We need to refactor it, as:
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;
}
EDIT2
Since the echo is no longer part ofgetTime
, let's implement something instead:
function getGreeting() {
return "Good ".getTime().", it is now {$time}";
}
and you canecho
it as
echo getGreeting();
EDIT3
We need both time and greeting, doing further improvement:
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];
}
ChangegetGreeting
to
function getGreeting() {
return "Good ".getTime()["moment"].", it is now ".getTime()["time"];
}
and change your images div to
<div class="images">
<?php
$moment = getTime()["moment"]; // Unfortunately getTime does some echoing, you will need to refactor it to separate representation from computation
?>
<img src="images/<?php echo $moment; ?>.png" alt="<?php echo $moment; ?>">
</div>
EDIT4
<!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>
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: warning: a non-numeric value encountered in
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.