PHP Incluir dentro de Estilos DIV Fondo

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!

preguntado el 28 de mayo de 14 a las 14:05

You are trying to put javascript into the style atributo de un div, esto no es posible. -

Just return by this include the path to the image. That's all. -

4 Respuestas

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>

contestado el 29 de mayo de 14 a las 13:05

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 - david freeman

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. - david freeman

Yeah just use strtolower() i'll update the answer. - pitchinado

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! - david freeman

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>`

contestado el 28 de mayo de 14 a las 14:05

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

You could try this - change the contents of your includes/promotions.php archivo a lo siguiente:

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

Additionally, the attribute on your div debiera ser styleno, styles.

contestado el 28 de mayo de 14 a las 14:05

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>

contestado el 28 de mayo de 14 a las 15:05

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. - christosPan

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.