php - Applying a Legend to an Image using Jquery -

php - Applying a Legend to an Image using Jquery -

i making anatomy learning module students.

i cannot conceptualize how solve problem. trying create live/dynamic anatomy label system. such if pupil clicks input type checkboxes groups of anatomy labels appear.

i have mockup here:

http://www.textbookofradiology.com/anat.php

depending on grouping if checked image changes highlight relevant antatomy, in essence showing legend of each anatomic structure.

can tell me if possible create using php/html , jquery? if how?

much appreciated.

what asking possible. however, need plugin edit images in specific ways. tho said possible, extremely tough do. myself wouldn't want have go @ it.

i have different solution you, however.

with photoshop can create layered picures. (you have color areas in programme anyway, right?)

option 1: utilize plugin read out layered photoshop files , trigger layers on , off depending on checkboxes

or, personal favorite , easiest way this, option 2: create layers in photoshop, each 1 of colors colored in. (thus, not harming original) take colored areas (hide other layers in photoshop) , save them .png of .gif files (anything transparent background)

once you're done doing , have colored (equally sized!) image files, utilize jquery fade them in , out.

you display 4 pictures on eachother.

<!-- create new wrap every part --> <div class="wrap"> <div class="imgcontainer upperbody"> <img src="http://www.textbookofradiology.com/images/anat/chestanatomy.jpg" class="original" alt="" /> <img src="http://www.textbookofradiology.com/images/anat/chestanatomyred.jpg" class="first overlay" alt="" /> <img src="http://www.textbookofradiology.com/images/anat/chestanatomypurple.jpg" class="second overlay" alt="" /> <img src="http://www.textbookofradiology.com/images/anat/chestanatomyyellow.jpg" class="third overlay" alt="" /> </div> <!--checkboxes here classes "1", "2" , "3"--> <form> <input type="checkbox" class="firstcb"/>red<p> <input type="checkbox" class="secondcb"/>purple<p> <input type="checkbox" class="thirdcb"/>yellow<p> </form> </div>

you have position images absolute css this:

.imgcontainer{ position:relative; height:600px; } .imgcontainer img{ position:absolute; top:0; left:0; z-index:2; } .imgcontainer img.original{ z-index:1; }

now, whenever checkbox checked utilize jquery fade in overlaying pictures.

so start off this:

$(document).ready(function() { //hide pictures $('.overlay').hide(); //on first checkbox click $('.firstcb').on("click", function() { //if checked if ($(this).is(':checked')) { console.log("red"); $(this).parents(".wrap").find('.first').fadein(); } //if unchecked else { $(this).parents(".wrap").find('.first').fadeout(); } }); $('.secondcb').on("click", function() { //if checked if ($(this).is(':checked')) { console.log("purple"); $(this).parents(".wrap").find('.second').fadein(); } //if unchecked else { $(this).parents(".wrap").find('.second').fadeout(); } }); $('.thirdcb').on("click", function() { //if checked if ($(this).is(':checked')) { console.log("yellow"); $(this).parents(".wrap").find('.third').fadein(); } //if unchecked else { $(this).parents(".wrap").find('.third').fadeout(); } }); });

the javascript should work new images , checkboxes long maintain classes same. don't forget copy-paste on-click trigger , alter sec , 3rd classes.

as html, rinse , repeat same classes.

php jquery html