How to Show a <Div> by Clicking an Image in CSS

Show div on Image click

Try this, using jquery:

$("#showDiv").click(function() {  $("#test").css("display", "inline-block");  });

#test {  height: 100px;  width: 100px;  background-color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><img id="showDiv" height="100px" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg">
<div id="test" style="display: none;"></div>

Is it possible to show a div by clicking an image in CSS?

Since there is no parent selector, you can't do it CSS only.

However, if they were siblings, you could add tabindex="-1" to the image and use something like

img.settings:focus + div.settings {
  right: 50%;
}

img.settings {  height: 100px;  width: 20px;}div.settings {  position: fixed;  left: 0px;  top: 0px;  right: 100%;  bottom: 0px;  background-color: #000000;}img.settings:focus + div.settings {  right: 50%;}

<img class="settings" src="settings.png" tabindex="-1" alt="[img]" /><div class="settings"></div>

How to show div and css content when clicking on a image area map

This shows the dropdowntest-content on the cursor position:

(function($) {  $('.list-group area').on('click', function(e) {    $('.' + this.id).toggleClass('show').css({top: e.clientY, left: e.clientX });  });})(jQuery);

.dropdowntest-content {  position: absolute;  display: none;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);  padding: 12px 16px;  z-index: 10;  top: 0;  left: 0;}
.show {  display: block;}
area {  cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><map class="list-group" name="map">     <area id="section-1" class="list-group-item" shape="rect" coords="0,0,200,200" />    <area id="section-2" class="list-group-item" shape="rect" coords="242,194,393,288" />    <area id="section-2" class="list-group-item" shape="rect"  coords="397,24,530,109" /></map>
<img alt="Picture1" src="https://placehold.it/680x466" height="466" width="680" usemap="#map" data-cms="{'contentId':95875}" />
<div class="dropdowntest-content  section-1">  <p>Hello world 1</p></div><div class="dropdowntest-content  section-2">  <p>Hello world 2</p></div><div class="dropdowntest-content section-3">  <p>Hello world 3</p></div>

Clicking image should display the respective image in another div using JavaScript only

Only create the new image once, if it hasn't been created already. On click, copy the src attribute of the clicked image to the one created inside the playerbox div.

See how it works by running the snippet and clicking one of the three images...

// this "lazy" getter for playerImg will either return or create the img
function playerImg() {
  let playerImg = document.getElementById('playerimg');
  if (!playerImg) {
    playerImg = document.createElement('img');
    playerImg.id = 'playerimg';
    document.getElementById('playerbox').appendChild(playerImg);
  }
  return playerImg;
}

// set the source attribute of the playerImg
function setPlayerImg(src) {
  playerImg().setAttribute('src', src);
}

// get the rock, paper, scissors elements with their common class
const imgs = document.getElementsByClassName("myclass");

// for each, add a click handler that calls our src setting function
for (let i = 0; i < imgs.length; i++) {
  const el = imgs[i];
  el.addEventListener('click', () => setPlayerImg(el.src), false);
}

<div class="user">
  <img class="rock myclass" src="https://dummyimage.com/100x100/0f0/000" />
  <img class="paper myclass" src="https://dummyimage.com/100x100/ff0/000" />
  <img class="scissors myclass" src="https://dummyimage.com/100x100/0ff/000" />
</div>

<div id="playerbox"></div>

jQuery to click on image and show a div

You'd want to use proper value for display. ( e.g. block http://learnlayout.com/display.html )
the value absolute comes from css property 'position'

If you debug your code, you'll notice that the display property is not updated with the value absolute.

---

Related Topics