在立方体内添加图像？

Question

我发现这个脚本可以做我想做的事，我唯一想做的就是在多维数据集中插入一个图像。

但我不知道该怎么做。

我以前没见过这种格式：

  <rect id="region1" x="50" y="0" width="100" height="100"/>

不确定如何通过在其中添加<img src=""> 来处理它。

需要帮助。

编辑：这是我找到的脚本。我真的不需要 svg 部分。我想要的只是在<div></div> 中有一个图像，当我点击它时，它将执行 CSS 和 jQuery 脚本......

这是我正在使用的代码：

$("rect").click(onRectClick);
$("#sel1").change(onSelectChange);


function onRectClick(evt)
{
  // Get the id of the region we clicked on
  var regionId = evt.target.id;
  // Update the dropdown
  $("#sel1").val(regionId);
  // Highlight the relevant region
  setRegion(regionId);
}

function onSelectChange()
{
  // Get selected class from dropdown
  var selectedRegion = $("#sel1").val();
  // Highlight the relevant region
  setRegion(selectedRegion);
}

function setRegion(regionId)
{
  // Remove "selected" class from current region
  $("rect.selected").removeClass("selected");
  // Add "selected" class to new region
  $('rect#'+regionId).addClass("selected");
  
  // Note: for addClass() etc to work on SVGs, you need jQuery 3+
}


// Init map based on default select value
onSelectChange();

rect {
  fill: #ccc;
  stroke: #999;
  stroke-width: 2;
  cursor: pointer;
}

rect:hover {
  fill: #888;
}

rect.selected {
  fill: #ff7409;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
<svg width="300" height="300">
  <rect id="region1" x="50" y="0" width="100" height="100"/>
  <rect id="region2" x="150" y="0" width="100" height="100"/>
  <rect id="region3" x="0" y="100" width="100" height="100"/>
  <rect id="region4" x="100" y="100" width="100" height="100"/>
  <rect id="region5" x="200" y="100" width="100" height="100"/>
  <rect id="region6" x="50" y="200" width="100" height="100"/>
  <rect id="region7" x="150" y="200" width="100" height="100"/>
</svg>  

<div>

  <label for="sel1">Seleziona Area:</label>
  <select class="form-control" id="sel1">
    <option value="region1">1 - Udine Centro</option>
    <option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option> 
    <option value="region3">3 - Laipacco / San Gottardo</option>
    <option value="region4">4 - Udine sud</option>
    <option value="region5">5 - Cussignacco</option>
    <option value="region6">6 - S. Paolo / S. Osvaldo</option>
    <option value="region7">7 - Chiavris / Paderno</option>
  </select>

</div>

Answer 1

试试这个，

const containers = $('.image-container')
const select = $('#sel1')

// Initialize at position 1
selectElement('region1')
    
containers.on('click', function() {
  selectElement($(this).attr('id'))
  select.val($(this).attr('id'))
})

select.change(function() {
  selectElement($(this).val())
})

function selectElement(id) {
  let others = containers.not($('#'+id))
  $('#'+id).addClass("selected")
  others.removeClass("selected")
}

#wrapper .image-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
}

#wrapper img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.image-container.selected::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4)
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="wrapper">
  <div id="region1" class="image-container">
      <img  src="https://cdn.mos.cms.futurecdn.net/DEpYy8jSdvD9dkvVDSPNoD.jpg" alt="">
  </div>
  <div id="region2" class="image-container">
    <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2014/05/star-20wars-20video-20games-20hoth-20atat-20empire-20at-20war-201680x1050-20wallpaper_wallpaperswa.com_551.jpg" alt="">
  </div>
  <div id="region3" class="image-container">
      <img src="https://www.austinchronicle.com/binary/e3fd/AllisonLefcort_CaptainPhasma_Add.jpg" alt="">
  </div>
  <div id="region4" class="image-container">
    <img src="https://cdn.mos.cms.futurecdn.net/ew7hxbJKwPewaRmjYW79bi.jpg" alt="">

  </div>
  <div id="region5" class="image-container">
    <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2021/01/Empire-at-War_wall.jpg" alt="">
  </div>
</div>
  
 <select class="form-control" id="sel1">
   <option value="region1">1 - Udine Centro</option>
   <option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option> 
   <option value="region3">3 - Laipacco / San Gottardo</option>
   <option value="region4">4 - Udine sud</option>
   <option value="region5">5 - Cussignacco</option>
 </select>