Question

I have the following code to display users’ images. But I would like to differentiate the images appearance with a green dot on them showing user is online and orange showing user was seen (say 15 mins ago) and red showing user is offline. Using CSS.

Now the code in a nutsell

//Get timing details
//get image details
//get user details

while($row = mysql_fetch_assoc($result)) {

  if($user_online){
    //show user modified image using CSS
    //image with green dot on it

  }else if($user_was_last_seen_15) {
    //show user modified image using CSS
    //image with orange dot on it

  }else {
    //show user modified image using CSS
    //image with red dot on it
  }

}

Answer 1

I would add a class to the container of the image (.status in the example below) to indicate the status (online / offline). Then you can add an empty element in the container (fixed or with javascript) and use that to display the dots:

.container {
  position: relative;
}
.container .status {
  position: absolute;
  top: 0;    // position you want
  left: 0:   // position you want
}
.container.offline .status {
  background: url(/your/dot/image/offline);
}
.container.online .status {
  background: url(/your/dot/image/online);
}

The code is probably not complete (you might need a z-index), but it´s a start. Also note that you don´t need the .container class, that’s just to indicate the parent element and I have only used 2 statuses instead of 3.