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

使用Jquery将图例应用于图像

1 个答案: