使用Jquery将图例应用于图像

Question

我正在为学生制作解剖学习模块。

我不能概念化如何解决这个问题。我正在尝试制作一个实时/动态解剖标签系统。这样，如果学生点击某些输入类型复选框，则会出现某些解剖标签组。

我这里有一个样机：

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

取决于哪个组中检查图像更改为突出显示相关antatomy，在本质上表示各解剖结构的图例。

有人可以告诉我，如果这是可以创建使用PHP/HTML和JQuery的？如果是这样如何？

非常感谢。

Answer 1

你问的是绝对有可能的。但是，您需要一个插件以非常特定的方式实际编辑图像。即使我说这是可能的，但这也是非常困难的。我自己不会想去尝试一下。

但是，我的确有不同的解决方案。

有了photoshop，你可以创建分层的picures。 （你有颜色的区域与程序，无论如何，对不对？）

选项1：
使用插件来读取和关闭取决于上的复选框分层的Photoshop文件和触发层

或者，我个人最喜欢的和最简单的方法来做到这一点，选项2：
在photoshop中创建图层，每个图层都带有一种颜色的颜色（因此，不会损害原始图像） 现在只需将这些颜色区域隐藏Photoshop中的其他图层）并将它们保存为.GIF文件的.PNG文件（任何带有透明的文件（背景）

一旦你完成了这一切，并拥有所有彩色（同等大小！）图像文件，你只需使用jQuery淡入淡出。

您将在彼此上显示4张照片。

<!-- create a new wrap for 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 with classes "1", "2" and "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> 

你将不得不定位图像绝对用CSS这样的：

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

.imgcontainer img.original{ 
    z-index:1; 
} 

现在，每当一个复选框被选中，您将使用jQuery的叠加图片褪色。

所以你开始这样的：

$(document).ready(function() { 
    //hide pictures 
    $('.overlay').hide(); 
    //on the first checkbox click 
    $('.firstCB').on("click", function() { 

     //if it was checked 
     if ($(this).is(':checked')) { 
      console.log("red"); 
     $(this).parents(".wrap").find('.first').fadeIn(); 
     } 
     //if it was unchecked 
     else { 
      $(this).parents(".wrap").find('.first').fadeOut(); 
     } 
    }); 
     $('.secondCB').on("click", function() { 

     //if it was checked 
     if ($(this).is(':checked')) { 
      console.log("purple"); 
      $(this).parents(".wrap").find('.second').fadeIn(); 
     } 
     //if it was unchecked 
     else { 
      $(this).parents(".wrap").find('.second').fadeOut(); 
     } 
    }); 
     $('.thirdCB').on("click", function() { 

     //if it was checked 
     if ($(this).is(':checked')) { 
      console.log("yellow"); 
     $(this).parents(".wrap").find('.third').fadeIn(); 
     } 
     //if it was unchecked 
     else { 
      $(this).parents(".wrap").find('.third').fadeOut(); 
     } 
    }); 
}); 

的JavaScript应该为所有新图像和复选框的工作，只要你保持类相同。但不要忘记复制粘贴这个点击式触发器并将其更改为第二和第三类。

至于HTML，只需冲洗并重复使用相同的类。