Alternating Bg Images In While Loop.

[Dark Prince]

Hey guys I'm having a problem with my syntax IT ISN'T working

 

this is the working code

 

$bg = '#fff000'; // initial bg color.

while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {

$bg = ($bg=='#fff000' ? '#000fff' : '#fff000');

 

now instead of using color codes I want to use png files from my includes folder I've tried using a relative path and a fixed path didn't work obviously can't just link an image and expect it to work.

 

then I tried using $bg = ' echo "<img src=\"http://localhost/includes/file.png\"/>"; '

didn't work either just showed a solid red color for every row. should of been blue to yellow to blue.

 

then I tried using a direct path instead of localhost I used D:/XAMPP/htdocs/includes/file.png

didn't work either...

 

what would be the proper syntax to use png files for a background image that alternates every returned row like the above code using color codes?

[Dark Prince]

Oh and I also tried escpaping all the forward slashes in the img src line just gives an error unexpexted '/' in the page.

[Antonio Conte]

Do this with CSS instead.

.your_div { 
  background-color: white; // Standard color
}
.your_div:nth-child(even) {
  background-color: gray; // alternate color
}

 

Then, you don't need any alterations in the while-loop.

[rob]

I'd alternate css class names and set different background images in each:

 

$class = ($class=='blue' ? 'green' : 'blue');
echo '<tag class="' . $class . '">';

 

You can't set a background image using an <img> tag, you need to set it in your css:

 

.blue {
 background: url(path_to_image) 0 0 repeat;
}

Antonio's method is good, unless you have to support IE8,7. You could also achieve the same effect using javascript.

[Dark Prince]

rob your syntax works perfect man thanks alot i use small size png for fast loads so i had to use 100% 100% instead of 0 0.

 

How would I add a hover conditional to it though i tried .blue:hover { background: url(path_to_other_image) } but doesn't work could it be because i already have .blue { background: url (path_to_image) }

?

[Antonio Conte]

.blue:hover {


  background: url('path_to_image') 100% 100%;
}

 

That code must be in your CSS. .blue:hover is an ACTION, not a different class. You dont use class="blue:hover" in your markup.

 

Another trick is to fit two images into one. Lets say your rows are 30px in height.

Use an image of 60px in height, and add the hover-image beneath your standard image. The trick is to change background-position on hover:

 

.blue {
  background: url('path_to_image') top left repeat-x;
}

.blue:hover {
  background-position: bottom left;
}

 

This article describes the trick, even though the hover image is the top one here.