动态改变CSS背景图像

Question

I'm fairly new to both PHP and Javascript, so please forgive my ignorance and poor use of terminology, but I'll do my best to explain exactly what I'm struggling to achieve.

I have information stored in a PHP array that I call to my index page using the function below (the code below is in a separate PHP file called articles.php that's included in my index.php) :

<?php

function get_news_feed($article_id, $article) {

  $output = "";

  $output .= '<article class="img-wrapper">';
  $output .= '<a href="article.php?id=' . $article_id . '">';
  $output .= '<div class="news-heading">';
  $output .= "<h1>";
  $output .= $article["title"];
  $output .= "</h1>";
  $output .= "<p>";
  $output .= "Read more...";
  $output .= "</p>";
  $output .= "</div>";
  $output .= '<div id="news-img-1">';
  $output .= "</div>";
  $output .= "</a>";
  $output .= "</article>";

  return $output;
} 

$articles = array();
$articles[] = array(
  "title" => "Andy at NABA",
  "description" => "Docendi, est quot probo erroribus id.",
  "img" => "img/gym-01.jpg",
  "date" => "05/04/2013" 
);
$articles[] = array(
  "title" => "Grand Opening",
  "description" => "Docendi, est quot probo erroribus id.",
  "img" => "img/gym-01.jpg",
  "date" => "05/04/2013" 
);

?>

My index.php looks like the following minus some HTML that plays no role in this process:

<?php 
include("inc/articles.php");
?>

<?php
$pageTitle = "Home";
include("inc/header.php"); 
?>

<section class="col-4 news">

    <?php

    $total_articles = count($articles);
    $position = 0;
    $news_feed = "";

    foreach($articles as $article_id => $article) {

    $position = $position + 1;
        if ($total_articles - $position < 2) {
            $news_feed .= get_news_feed($article_id, $article);
        }
    } 

    echo $news_feed;

    ?>

</section>

I am aiming to dynamically change the CSS Background-Image property of the div element with ID news-img-1 using Javascript.

I have tried such things as:

document.getElementById('news-img-1').style.backgroundImage = 'url('<?php $article["img"]; ?>')';

document.getElementById('news-img-1').style.backgroundImage = 'url('http://www.universalphysique.co.uk/' + '<?php $article["img"]; ?>')';

document.getElementById('news-img-1').style.backgroundImage = 'url('window.location.protocol + "//" + window.location.host + "/" + '<?php $article["img"]; ?>')';

.....but I'm getting nowhere!! My code in practise works because the following Javascript inserts an image correctly:

document.getElementById('news-img-1').style.backgroundImage = 'url("img/gym-01.jpg")';

Here is my site up and running, the images should be placed in the empty circles you'll see! Any help would be great, this ones tough for me!!

Answer 1

comparing the hard coded javascript to ones that don't work, I notice that you are not including the double-quotes around the <?php $article["img"]; ?> snippet. The hard coded one shows

= 'url("img/gym-01.jpg")'

but the ones with the php snippet will produce

 = 'url(img/gym-01.jpg)'

so perhaps if you modify it to

document.getElementById('news-img-1').style.backgroundImage = 'url("'<?php $article["img"]; ?>'")';

OR

edit the get_news_feed function as follows:

replace these lines

$output .= '<div id="news-img-1">';
$output .= "</div>";

with

$output .= '<div class="news-img"><img src="' . $article["img"] . '"></div>' ;

and change your css like so:

article.img-wrapper {
    position: relative;
}

div.news-img {
    position: absolute;
    top: 0;
    z-index: -1000;
}

OR

Modify your get_news_feed function, change the statement for the <div id="news-img-1"> output to include a data-url attribute like:

$output .= '<div class="news-img" data-url="' . $article["img"] . '">';

Then add a jquery statement like:

$(".news-img").each( function() { 
        $(this).css("background-image", "url(" + $(this).data("url") +")" ); 
    });

The jquery statement goes in a static js file as opposed to generating the script in php.