我正在嘗試添加或取決於當用戶點擊圖像

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <script> 
 
\t $(document).ready(function(){ 
 
\t  $("#showrightcornerbumper").click(function(){ 
 
\t   $("#first").toggle(); 
 
\t  }); 
 
\t }); 
 
\t </script> 
 
\t 
 
\t <script> 
 
\t $(document).ready(function(){ 
 
\t  $("#showleftcornerbumper").click(function(){ 
 
\t   $("#second").toggle(); 
 
\t  }); 
 
\t }); 
 
\t </script> 
 

 
\t <script> 
 
\t $(document).ready(function(){ 
 
\t  $("#backbumper").click(function(){ 
 
\t   $("#third").toggle(); 
 
\t  }); 
 
\t }); 
 
\t </script> 
 

 
\t <script> 
 
\t $(document).ready(function(){ 
 
\t  $("#boot").click(function(){ 
 
\t   $("#fourth").toggle(); 
 
\t  }); 
 
\t }); 
 
\t </script> 
 

 
\t <script> 
 
\t $(document).ready(function(){ 
 
\t  $("#leftrearquaterpanel").click(function(){ 
 
\t   $("#fifth").toggle(); 
 
\t  }); 
 
\t }); 
 
\t </script> 
 

 
\t <script> 
 
\t $(document).ready(function(){ 
 
\t  $("#rightrearquaterpanel").click(function(){ 
 
\t   $("#sixth").toggle(); 
 
\t   
 
\t  }); 
 
\t }); 
 
\t </script> 
 

 
\t <script> 
 
\t \t $(function() { 
 
\t \t  $("#showleftcornerbumper").on("click", function() { 
 
\t \t   var text = $("#text"); 
 
\t \t   text.val(text.val() + " an estimate for this type of repair would be €200");  
 
\t \t  }); 
 
\t \t }); 
 
\t </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="images/car.png" usemap="#carmap"> 
 

 
\t <map name="carmap"> 
 
\t \t <area shape="rect" coords="30,282,50,302" id="showleftcornerbumper" href="#" alt="Left corner bumper" alt="Left Corner Bumper"> 
 
\t \t <area shape="rect" coords="230,282,247,300" id="showrightcornerbumper" href="#" alt="Right Corner Bumper"> 
 
\t \t <area shape="rect" coords="91,301,187,306" id="backbumper" href="#" alt="Back Bumper"> 
 
\t \t <area shape="rect" coords="93,267,187,297" id="boot" href="#" alt="Boot"> 
 
\t \t <area shape="rect" coords="53,250,76,297" id="leftrearquaterpanel" href="#" alt="Left rear quater panel"> 
 
\t \t <area shape="rect" coords="202,251,226,299" id="rightrearquaterpanel" href="#" alt="Right rear quater panel"> 
 
\t </map> 
 
\t 
 

 
\t <p id="first" style="display:none;">The cost of this repair is €200.</p> 
 
\t <p id="second" style="display:none;">The cost of this repair is €300.</p> 
 
\t <p id="third" style="display:none;">The cost of this repair is €300.</p> 
 
\t <p id="fourth" style="display:none;">The cost of this repair is €300.</p> 
 
\t <p id="fifth" style="display:none;">The cost of this repair is €300.</p> 
 
\t <p id="sixth" style="display:none;">The cost of this repair is €300.</p> 
 

 
<form action="action_page.php"> 
 
\t First name:<br> 
 
\t <input type="text" value=""> 
 
\t <br> 
 
\t Email:<br> 
 
\t <input type="Email" name="lastname" value="" id="email"> 
 
\t <br> 
 
\t Quote:<br> 
 
\t <input type="text" value="Thank you for your interest in Smart Repair" id="text" size="100" /> 
 
\t <br /> 
 
\t <input type="button" value="Click Me" id="button" /> 
 
</form>

我嘗試重新類似於以下https://revive-uk.com/get-a-quick-quote/修復計算器中的某一部分上去除一個字符串到表單字段，我在圈子裏走，我有基本的HTML，CSS，jQuery和js知識。我希望能夠通過點擊區域或打開和關閉來突出顯示汽車的不同部分。在閱讀論壇後，我相信它最好從一個圖像中完成。

Answer 1

首先，你自己承擔的任務非常複雜 - 包含的站點使用SVG圖像&使用javascript創建動畫以創建報價。

你嘗試過什麼？請在問題中包含您的代碼。

我不會推薦使用單張圖片，因爲您必須使用圖片映射（如果您想了解它的意義，請在這裏嘗試一下：https://www.image-maps.com/），但SVG很難在早期掌握開發商。

恕我直言，嘗試汽車的圖像分割到不同圖像/地區，不是建立一個形式從一些數據屬性jQuery的取值 - 比繼續用它來給基於某些計算器報價。

Answer 2

經過調查後，我發現您鏈接的網站使用了Raphaël庫，它允許您添加SVG對象並使用JavaScript對其進行修改。來自網站的示例：

// Creates canvas 320 × 200 at 10, 50 
var paper = Raphael(10, 50, 320, 200); 

// Creates circle at x = 50, y = 40, with radius 10 
var circle = paper.circle(50, 40, 10); 
// Sets the fill attribute of the circle to red (#f00) 
circle.attr("fill", "#f00"); 

// Sets the stroke attribute of the circle to white 
circle.attr("stroke", "#fff");