How can I highlight only certain areas of an image?

Loading...

How can I highlight only certain areas of an image?

I've got an image of a human skeleton with approx 60 areas I want to highlight and make clickable. Those are in a circle and numbered from 1-60.
The whole idea is I want to click on the nubmers (on the image) and highlight that part of the image. 
I've used JQuery to hover over the numbers/area and highlight (hover over with mouse) and when the user clicks on the number I'm getting the clicked number and processing on the server side code. (.NET C#)
But I want the place where I click should remain the colour... Hovering over the number and changing the colour works fine... But I want when it's click the colour should change on the image / persisted...
Below are the samples which changes the colour when you hover over with your mouse, but when you click the colour is not changing.
http://davidlynch.org/js/maphilight/docs/
http://davidlynch.org/js/maphilight/docs/demo_simple.html
any ideas how to highlight the some areas on the image?
sample code below:
 
 
 1
 2

 

Solutions/Answers:

Answer 1:

The answers about swapping out images will work. That said, by doing this in images, you end up using more bandwidth than you really need to use for this. One of two things will happen: either people will download a bunch of images that they never load, or they will have to wait to download the new image each time they click. For users with a high speed connection, that’s not going to be an issue, but there is definitely room for users on slow connections (or perhaps mobile devices) to experience this as a negative.

Better would be to only have one version of the image, which is what it looks like on the first load. The trick is to make the numbers on the image transparent. Then you can just have the user’s browser change the background color when they click. And as a bonus, if you ever want to add other colors to indicate other things, that’s simple too! And you can have any combination of numbers highlighted.

After some experimentation, I found that the style attribute on the <area> can’t be used to set background colors, so you would need something else to enforce the colors. I suggest a <div> positioned in the same place as each circle via something like:
<div id='div1' style='position:relative; top:-400px; left:5px; height:30px; width:30px; z-index:-1'>&nbsp;</div> where you would adjust the top/left values to place it where you need it. The z-index:-1 is important to make it show up behind the image. To experiment with the placing of these divs, you may want to go ahead and set the background-color to something so that you can see them.

Once you have a transparent image and have all of the divs placed, you’d just need a bit of jQuery to activate it. Something like this:

$('area').click(function(){
    var number = $(this).attr('title');
    $('#div'+number).css('background-color', 'red');
})

Answer 2:

As Greg B suggested, you could create the skeletons images just changing the highlighted number such as:

Images/Figure_Human_Image1.png    : this is your original image with no highlight
Images/Figure_Human_Image1_h1.png : this is the skeleton image with number 1 highlighted
Images/Figure_Human_Image1_h2.png : this is the skeleton image with number 2 highlighted
and so on...

Then you use jquery to switch the source of the image with the correct image highlighted been replaced. If the user clicked on number 1 than you replace the src with the image ‘Images/Figure_Human_Image1_h1.png’

You can do that by adding a click event in area through jquery. In your case the title attribute of the tag area correspond to the number clicked so it would be something like this:

$('area').click(function(){
    var number = $(this).attr('title');
    $('img').attr('src','Images/Figure_Human_Image1_h'+number+'.png');
})

Answer 3:

I don’t think you need any server side code.

You could create the 60 images of the various highlighted skeletons and then using JavaScript, switch the source of the image with the one with the correct highlight

Our Awesome Free Tools

References

Loading...

Implementing Holidays in an Employee Management System

Loading...

Implementing Holidays in an Employee Management System

I'm working on an Employee Management System where employees can 

Clock in/Clock Out (Mark daily attendance)
Apply for Leaves i.e. Sick
Generate Reports i.e. Thier daily check in/Check out time, Total Worked Hours etc.

Now I have to introduce a way to deal with public holidays and employee absentees in these reports. I read a few articles online such as 

https://softwareengineering.stackexchange.com/questions/262272/integrating-holidays-and-attendance-in-an-hr-management-system

but I couldn't figure out anything. My questions are basically.

What is the best way to deal with an employee being absent? Considering the fact that on that particular day an employee will not check in.
How to Add/specify Weekend/Public Holidays in reports? As changing public/regular holidays in the future may well affect our reports of the previous months.

I'd really appreciate some help here! 
Thank you

Solutions/Answers:

Answer 1:

Very few (if any) databases deal with date ranges as a data type, and while there are ways to calculate date range intersections they are expensive and will cause any large datasets to crawl. thus you need to trade calculation speed for data storage

because of this the best way to check is to have a table that stores dates, then use the dates in that table to inflate your date ranges to all dates inside the range, the structure is simple just a single column with the date in it

i would not suggest using the date table to keep track of holidays instead just include these as absences of type “Public Holiday” you may want to mark weekends (or what day of the week it is) in the datetable but don’t use that to say whether a person did or didn’t work that day instead have a workingPattern table that says employee of type factory worker works 4 hours on a monday, 6 hours on a tuesday. this will then give you an employees expected working hours and which days they are expected to work in a week with out forcing every employ to follow the same working pattern

eg

select d.Date, a.*
from absence as a
join dates as d on d.Date between a.StartDate and a.EndDate

this will then give you every date that the person is absent allowing you you very easily compare different absence periods together

most employ systems rarely allow employees to work more than a year in advance, so I would suggest having a monthly job that runs and populates the date table with all dates between (Today + 12 months) and (Today + 13 months) you can also delete old dates but before doing so make sure there are no circumstances where you will need to query the data. ie everything before the min date you are leaving has been archived.

The next thing to keep in mind is the human element, people will forget to clock in or out so you need to keep this in mind and have a daily job that looks for clock ins with out a matching clock out or visa versa, then you can either flag these for human correction or deal with them automatically

once you have these two elements sorted you can calculate each persons daily hours worked,cross join that to the daily absence view, which will allow you to check for inconsistency like dates on the Date table that have no clockings or absence (unauthorised absence) that can be corrected with appropriate entries into the absence table or clashes such as someone coming into work when they should have been on holiday, again you can flag for human correction or handle automatically, say if clocking is present ignore absence

How you actually build your system depends on what you need in your systems but these are the common factors that will kill your system if you don’t take them into account

Answer 2:

I was writing a comment, but that gone to far and I considered to write an answer.

How to Add/specify Weekend/Public Holidays in reports?

You can use a table (like in this question) to store all days of the given year with flag is a day working or not. We use something like this in our environment. It is filled manually once a year.

What is the best way to deal with an employee being absent?

I bet there will be some table with rows like:

EmployeeID  InOut   Date                
1           In      2016-07-24 07:00:01.000
1           Out     2016-07-24 18:00:09.908
etc

So if Employee being absent – there will be no rows on particular date.

Answer 3:

What is the best way to deal with an employee being absent? Considering the fact that on that particular day an employee will not check in.

You can make an initial setup/code file for this. There will be a specific table to hold the information about all the public holidays in the calendar year. It will be entered manually at the start of each year.

Now when the attendance data is processed it will check on dates. If any date would be present in that code file, It will be marked as holiday.

How add specific holiday in reports?

Keeping in mind, you will need a table which will hold every date of the year and then a flag attribute with each date. A flag is set true/false based on working day/ holiday.

If the flag is false then there is a holiday and you will show the holiday in the reports. You can even set a column in this table to mention the name of the holiday. It will maintain the data for dates for every year. So if you want to see the attendance reports for previous year. The data would be there and there would be no problem.

Our Awesome Free Tools

References

Loading...