Put a green dot or red dot to show user is online or not

I have the following code to display users' images. But I would like to different开发者_运维知识库iate 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
  }

}

Seams that the answer is directly in the code of this page actually take a look top right, you'll see next to your profil picture something really similar to what you aim to do

Here's a bunch of code :

.logged-in {
  color: green;
}

.logged-out {
  color: red;
}

<span class="logged-in">●</span>
<span class="logged-out">●</span>

Aiming to be useful, I leave it to you to implement it in your use case,

Cheers

Have a div surround the image and put a class on it, say

<div class="user-avatar">
  <img src="users-avatar-here.jpg" />
  <!-- if else statement here -->
  <img src="green.jpg" class="status" />
  <!-- else -->
  <img src="red.jpg" class="status" />
</div>

Then in your CSS:

.user-avatar {
  position: relative
}

.status {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

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.

modify 2 images with paint and place green dot and red dot on each one then use greendot image when user is online and red one when user is offline