使用 Jquery 将图例应用于图像

Question

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

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

我在这里有一个模型：

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

取决于选中的组，图像会更改以突出显示相关解剖结构，实质上显示每个解剖结构的图例。

谁能告诉我这是否可以使用 PHP/HTML 和 Jquery 创建？如果有怎么办？

非常感谢。

Answer 1

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

不过，我确实为您提供了不同的解决方案。

使用 Photoshop，您可以创建分层图片。 （无论如何，您必须使用程序为区域着色，对吗？）

选项 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，只需冲洗并使用相同的类重复即可。