0

I've got a rotating image that changes daily and I'm trying to make this the background image of a DIV so I can have a menu over it. For some reason it just displays all the information inside the includes file instead of showing the daily image?

<div styles="background-image: url(<?php include('includes/promotions.php'); ?>)">MENU</div>

Inside the includes file:

<SCRIPT LANGUAGE="JavaScript">
today = new Date();
day = today.getDay();
arday = new Array("images/daily-offers/sunday.png", "images/daily-offers/monday.png", "images/daily-offers/tuesday.png", "images/daily-offers/wednesday.png", "images/daily-offers/thursday.png", "images/daily-offers/friday.png", "images/daily-offers/saturday.png");
document.write("<img src='"+arday[day]+"'>");
</script>`

I'm kind of new to this but I appreciate the help!

2
  • You are trying to put javascript into the style attribute of a div, this isn't possible. May 28, 2014 at 13:43
  • Just return by this include the path to the image. That's all.
    – SoftGuide
    May 28, 2014 at 13:44

4 Answers 4

1

You are trying to put javascript into the style attribute of a div, this isn't possible. Either you need to have php code come up with the filename instead of using an include, or you need to create the div give it an id the use javascript (outside the div's style) to change the background-image.

<div id='changeme'>Menu</div>

<SCRIPT LANGUAGE="JavaScript">
    today = new Date();
    day = today.getDay();
    arday = new Array("images/daily-offers/sunday.png", "images/daily-offers/monday.png", "images/daily-offers/tuesday.png", "images/daily-offers/wednesday.png", "images/daily-offers/thursday.png", "images/daily-offers/friday.png", "images/daily-offers/saturday.png");
    //ASSUMING YOU HAVE JQUERY
    $('#changeme').css('background-image',arday[day]);
</SCRIPT>

Or simply use php:

<?php
$arday = array("images/daily-offers/sunday.png", "images/daily-offers/monday.png", "images/daily-offers/tuesday.png", "images/daily-offers/wednesday.png", "images/daily-offers/thursday.png", "images/daily-offers/friday.png", "images/daily-offers/saturday.png");
$day = date('w');
?>
<div styles="background-image: url('<?php echo $arday[$day]; ?>')">MENU</div>

Or if the naming convention of the images is always the same you could simply do:

<div styles="background-image: url('images/daily-offers/<?php echo strtolower(date('l')); ?>.png')">MENU</div>
4
  • Hello thanks for the feedback. I've tried all three and I'm still not getting today's image to show? I've checked the source code and it seems to display the correct day for the image but it isn't showing the image. It'll probably be something simple but all three examples you've mentioned can be found here: alfieskitchen.co.uk/food.php May 29, 2014 at 12:16
  • I added a height in the CSS for the image so your number two answer works! I'm not sure why number 1 doesn't work? Number 3 doesn't work because of the capital letter for the image name it's getting from the server, any ideas how to make this letter lower-case? Thanks once again. May 29, 2014 at 12:49
  • Yeah just use strtolower() i'll update the answer. May 29, 2014 at 12:51
  • Cheers I went for the 3rd one in the end as it was less scripting and easier to work with. I've given you the vote, thanks once again! May 29, 2014 at 13:11
1

You can set the backgroundImage like this:

document.getElementById("mymenu").style.backgroundImage="url(...)";

Your code could go like this:

<div id="mymenu">MENU</div>

<SCRIPT LANGUAGE="JavaScript">
today = new Date();
day = today.getDay();
arday = new Array("images/daily-offers/sunday.png", ...);
document.getElementById("mymenu").style.backgroundImage="url('"+arday[day]+"')";
</script>`
1

You can't execute javascript inside an attribute like that.

You could try this - change the contents of your includes/promotions.php file to the following:

<?php
$day = strtolower(date('l'));
echo '<img src="images/daily-offers/' . $day . '.png">';
?>

Additionally, the attribute on your div should be style, not styles.

-2

I would not use PHP to do that. I would right the following javascript code at the page where you showing right now the div with the background.

<div id="bgdiv">MENU</div>

<SCRIPT LANGUAGE="JavaScript">

    today = new Date();
    day = today.getDay();
    arday = new Array("images/daily-offers/sunday.png", "images/daily-offers/monday.png", "images/daily-offers/tuesday.png", "images/daily-offers/wednesday.png", "images/daily-offers/thursday.png", "images/daily-offers/friday.png", "images/daily-offers/saturday.png");
    document.getElementById('bgdiv').style.backgroundImage = "url(' + arday[day] + ')";

</script>
1
  • I was using a result variable which was not necessary (was working on a different approach), and I had forgotten to put a semicolor at the last js line. I edited above. May 28, 2014 at 14:17

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.