使用Jquery将图例应用于图像

Question

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

我无法概念化如何解决这个问题。我正在尝试做一个活的/动态的解剖标签系统。这样，如果学生单击某些输入类型复选框，那么就会出现特定的解剖标签组。

我这里有个模型：

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

取决于哪一组如果选中图像的变化，突出相关的抗原子，实质上显示每个解剖结构的图例。

有人能告诉我这是否可以使用PHP/HTML和Jquery创建吗？如果是的话，怎么做？

非常感谢。

Answer 1

你要求的绝对是可能的。然而，您将需要一个插件，以实际编辑图像非常具体的方式。即使我说这是可能的，这也是非常困难的。我自己也不想试一试。

不过，我对你有不同的解决办法。

使用photoshop，您可以创建分层图片。(不管怎么说，你都要用程序把区域涂上颜色，对吧？)

选项1:

使用插件读取分层的photoshop文件，并根据复选框的不同启动和关闭层。

或者，我个人的最爱，也是最简单的方法，选项2:

在photoshop中创建图层，每一层都带有其中一种颜色。(因此，不损害原图)现在只取那些彩色区域(隐藏在photoshop中的其他层)，并将它们保存为.PNG of .GIF文件(任何具有透明背景的内容)。

一旦你做完这件事，并拥有所有的颜色(大小相等！)图像文件，您只需使用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，只需使用相同的类进行清洗和重复。