如何在立方体元素内插入图片并保留原有CSS及jQuery交互效果

调整逻辑 #

放弃SVG结构直接用普通div实现区域布局，仅需要修改三个部分的代码，原有点击区域联动下拉框、选中高亮的逻辑完全保留：

• HTML：替换原有SVG标签为div容器，每个区域对应一个独立div，内部直接插入<img>标签即可
• CSS：将原针对rect元素的样式规则平移到区域div的类名上
• JS：仅需要把原有选择器中的rect替换为区域div的类名

完整代码 #

HTML #

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- 替换原有SVG的区域布局 -->
<div class="region-container" style="width:300px;height:300px;display:grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);">
  <div class="region" id="region1" style="grid-column:2/3;grid-row:1/2;">
    <img src="你的图片地址" alt="Udine Centro">
  </div>
  <div class="region" id="region2" style="grid-column:3/4;grid-row:1/2;">
    <img src="你的图片地址" alt="Rizzi / S. Domenico / Cormor / S. Rocco">
  </div>
  <div class="region" id="region3" style="grid-column:1/2;grid-row:2/3;">
    <img src="你的图片地址" alt="Laipacco / San Gottardo">
  </div>
  <div class="region" id="region4" style="grid-column:2/3;grid-row:2/3;">
    <img src="你的图片地址" alt="Udine sud">
  </div>
  <div class="region" id="region5" style="grid-column:3/4;grid-row:2/3;">
    <img src="你的图片地址" alt="Cussignacco">
  </div>
  <div class="region" id="region6" style="grid-column:2/3;grid-row:3/4;">
    <img src="你的图片地址" alt="S. Paolo / S. Osvaldo">
  </div>
  <div class="region" id="region7" style="grid-column:3/4;grid-row:3/4;">
    <img src="你的图片地址" alt="Chiavris / Paderno">
  </div>
</div>
<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>

CSS #

.region {
  border: 2px solid #999;
  cursor: pointer;
  position: relative;
  background: #ccc;
}
.region img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.region:hover {
  opacity: 0.7;
}
/* 选中状态高亮，可根据需求调整样式 */
.region.selected::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 116, 9, 0.4);
}

JS #

$(".region").click(onRectClick);
$("#sel1").change(onSelectChange);
function onRectClick(evt){
  // 用currentTarget确保拿到的是区域div的id，不受点击内部img的影响
  var regionId = evt.currentTarget.id;
  $("#sel1").val(regionId);
  setRegion(regionId);
}
function onSelectChange(){
  var selectedRegion = $("#sel1").val();
  setRegion(selectedRegion);
}
function setRegion(regionId){
  $(".region.selected").removeClass("selected");
  $('.region#'+regionId).addClass("selected");
}
onSelectChange();

把代码里的你的图片地址替换为实际的图片资源路径即可正常使用。

内容的提问来源于stack exchange，提问作者r0naldinio