Adding an image inside the cube?

Question

I have found this script which does what I want, the only thing I want to do is insert an image inside the cube.

But I have no idea how to do it.

I haven't seen this format before:

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

Not sure how to approach it by adding an <img src=""> inside it.

Need help.

EDIT: it's a script that I found. I don't really need the svg part. All I want is to have an image inside the <div></div> and when I click it will execute the CSS and jQuery script...

Here's the code I'm using:

$("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>

You cannot add an `img` element inside an svg, but you could wrap the `svg` and `img` into a parent container and setting the `img` to be absolute and centered in relation to it. You would then need to solve your click behavior. Or you could use the `image` element. see https://stackoverflow.com/questions/30897108/how-can-i-display-an-image-inside-svg-circle-in-html5 — Vladimir Mujakovic, Sep 02 '21 at 19:07
Basically I don't need that svg. All I want is to have an image inside the
and when I click it will execute the CSS and jQuery script... — r0naldinio, Sep 02 '21 at 19:13
So you just need a collection of clickable images with a fixed size? — Vladimir Mujakovic, Sep 02 '21 at 19:15
Yes. Basically when you click on the image, it will execute the jQuery and the CSS. I guess the most logical way is to wrap a div around the image and apply the CSS for a div. — r0naldinio, Sep 02 '21 at 19:17

Vladimir Mujakovic · Accepted Answer · 2021-09-02T21:29:15.240

Try this,

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>

Thanks Vladimir, this looks like what I need regarding images, what about the selection jQuery? I need that part too... — r0naldinio, Sep 02 '21 at 20:59
Sorry, I may have said that clearly in my question and comments... — r0naldinio, Sep 02 '21 at 21:05
Wow, thanks a lot man! Appreciate your time spent, I would send you a tip to your PayPal if it's allowed.. — r0naldinio, Sep 02 '21 at 21:32

Adding an image inside the cube?

1 Answers1