使用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，只需沖洗並重復使用相同的類。