Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2006
    Thanked 0 Times in 0 Posts

    Exclamation Applying a Legend to an Image using Jquery

    I am making an anatomy learning module for students.

    I cannot conceptualize how to solve this problem. I am trying to make a live/dynamic anatomy label system. Such that if the student clicks certain input type checkboxes then certain groups of anatomy labels will appear.

    I have a mockup here:


    depending on which group if checked the image changes to highlight the relevant antatomy, in essence showing the legend of each anatomic structure.

    Can someone tell me if this is possible to create using PHP/HTML and Jquery? If so how?

    Much appreciated.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 1,012 Times in 1,009 Posts
    What you want to do is called Image Mapping. Read about it here: HTML map tag

    I saw a site that says it will help you do that for free: Image Map Tool - On-line Image Map Creator - HTML & CSS | Image-Maps.com

    Good Luck
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Thanked 626 Times in 605 Posts
    i don't think image maps are what you need. those are invisible and let you click different places on an image, but you want to change different parts of the image based on an off-image click.

    there are many ways to go about this: svg, canvas, and html+css come to mind. let's go with html+js+css since it's the most approachable.

    start by asking, "what you do i want to do?". you want to turn positioned text on and off depending on a checkbox.

    that means we need:
    1. an image to be labeled
    2. html text to label the different parts
    3. html checkboxes to select the text layers
    4. css to position the html in front of the image
    5. js to show/hide text upon checkbox changes

    putting it all together:

    <body data-red=0 data-yellow=0 data-purple=0 id=body>
    /* make the page look more like an app:  */
    body, html { margin:0; padding:0; font: 18px arial; }
    /* put text and image in the same relative box: */
    #cont { position: relative; width: 500px; height: 500px; margin: 1em auto; }
    /* hide all text overlays by default:  */
    #text p { 	 position: absolute; opacity: 0; transition-property: opacity; transition-duration: 500ms; }
    /* individually position specific labels over the right image area:  */
    #aorta { 	top: 15%; left: 15%; }
    #spleenic{	top: 45%; left: 55%; }
    #liver{ 	top: 85%; left: 15%; }
    #spleen { 	top: 85%; left: 65%; }
    #rib   { 	top: 35%; left: 20%; }
    #vertib { 	top: 35%; left: 65%; }
    /* make text colored */
    #text .red { color: red; }
    #text .yellow { color: yellow; }
    #text .purple{ color: purple; }
    /* show color classes with a corresponding checkbox: */
    body[data-red='1']  #text p.red,
    body[data-yellow='1'] #text p.yellow,
    body[data-purple='1'] #text p.purple {  opacity: 1; }
    <div id='cont'>
    	<h1>Anatomy Demo</h1>
    	<img src="http://www.textbookofradiology.com/images/anat/chestanatomy.jpg"  id=chest width=500 height=500  />	
    	<div id=text> 
    		<p class=red id=aorta>AORTA</p>	
    		<p class=red id=spleenic>SPLENIC ARTERY</p>	
    		<p class=yellow id=liver>LIVER</p>	
    		<p class=yellow id=spleen>SPLEEN</p>	
    		<p class=purple id=rib>RIB</p>	
    		<p class=purple id=vertib>VERTIBRA</p>	
    	<!-- checkbox controls -->
    	<label><input  type=checkbox onchange='body.setAttribute("data-"+value, checked?1:0)' value=red  /> Red </label>  <br >
    	<label><input  type=checkbox onchange='body.setAttribute("data-"+value, checked?1:0)' value=yellow /> Yellow </label> <br >
    	<label><input  type=checkbox onchange='body.setAttribute("data-"+value, checked?1:0)' value=purple /> Purple </label>
    live demo (tested in ff, ch, and ie)

    checklist for adding new colors:
    1. add a body attrib data-color=0
    2. define the color class in css ex: .blue { color: blue; }
    3. add the body attrib/color class combo to the css by duplicating and modifying an existing one. ex: body[data-blue='1'] #text p.blue,
    4. dupe a checkbox line, updating the value and adjacent visible text
    5. use the new color class on existing or new <P> text labels

    checklist for adding new labels
    1. dupe an existing <p> tag and paste after it.
    2. update the color class, the id attrib, and the text content of the new tag as needed
    3. dupe a position rule in css and adjust the #id, top, and left value as needed
    Last edited by rnd me; 06-20-2014 at 07:13 AM.
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts