CODEWITHSUNDEEP
phphtmlcss
bastianum
bastianum

Reputation: 33

Display multiple instances of an image in HTML?

I want to display an image in a row multiple times, I have coded the following (mix of HTML/PHP/CSS): 

for ($i=20; $i<=320; $i=$i+300) {
    echo "<style> " 
      . ".test{"
      . "position: absolute;
         left: " . $i . "px;"
      .  "top: " . 430 . "px;"
      . "</style>";
    echo "<img src=http://localhost/Summoner's%20Index/images/scheme.png class=test>" . "<br />" . "<br />";
}

My problem is, that each time the image gets placed again, the old disappears, so that in the end there is just one instance of the image. How can I change that?

Upvotes: 0

Views: 202

Answers (1)

Jeremiah Page
Jeremiah Page

Reputation: 11

each loop your re-declaring the style, since all images are using the one style, they are all slowly being moved to lay right on top of each other no matter how many times you loop through.

Pull out the style from the loop, instead add some inline css on the img tag, utilizing position absolute and your dynamic top and left values.

<?
for($i=0;$i<50;$i++)
{
    $left = $i*300;
    ?><img src='blah.jpg' style='position:absolute; left:<?=$left?>px;'><?  
}
?>

Upvotes: 1

Related Questions