CODEWITHSUNDEEP
javascriptc#htmlasp.net
axn7975
axn7975

Reputation: 107

How to display picture

I have some images which dynamically gets displayed on a web page.These images are clickable. When i click on one of the image I want to display another picture over the image that is clicked.If clicked again that picture needs to be removed.

Intially when the page loads the images will be displayed as shown below and when i click on these images another picture over the image which i have click should be displayed. As of now i am able to display the image on the side of the selected image. which is shown in the 2nd image

Upvotes: 2

Views: 391

Answers (2)

Canvas
Canvas

Reputation: 5897

What you can do is just simply add two data attributes to your tr, so you can have data-image1 and data-image2 then simply change the img src when a mouse click happens.

Here is my jsFiddle : https://jsfiddle.net/wLvn8yzx/

Html

<img src="http://dreamatico.com/data_images/cat/cat-8.jpg" 
id="imageSwap" 
data-image1="http://dreamatico.com/data_images/cat/cat-8.jpg" 
data-image2="http://dressacat.com/chat.png">

Javascript

document.getElementById("imageSwap").onclick = function (e) {
    if (this.src == this.getAttribute("data-image1")) {
        this.src = this.getAttribute("data-image2");
    } else {
        this.src = this.getAttribute("data-image1");
    }
}

Or you could use classes and style them and set the background to the image. Here is another jsFiddle : https://jsfiddle.net/wLvn8yzx/1/

Html

<div id="imageSwap" class="image1"></div>

Css

div{
    height:400px;
    width:400px;
}

.image1{
    background-image: url("http://dreamatico.com/data_images/cat/cat-8.jpg");
}

.image2{
    background-image: url("http://dressacat.com/chat.png");
}

Javacript

document.getElementById("imageSwap").onclick = function (e) {
    if (this.className == "image1") {
        this.className = "image2";
    } else {
       this.className = "image1";
    }
}

Update

I have created a new jsfiddle which uses a javascript function to hide and show the cross image.

jsFiddle : https://jsfiddle.net/wLvn8yzx/2/

Html

<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png" class="imageSwap image1">
<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/archive/f/ff/20150316142725!Solid_blue.svg/120px-Solid_blue.svg.png" class="imageSwap image2">
<img onclick="javascript:imageSwapper()" src="https://s2.graphiq.com/sites/default/files/2307/media/images/t/Green-Yellow_429842_i0.png" class="imageSwap image3">
<img id="crossImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Red_Cross.svg/120px-Red_Cross.svg.png" class="hidden">

CSS

.hidden{
    display: none;
}

.show{
    display: inline;
}

Javascirpt

function imageSwapper() {
    var crossImage = document.getElementById("crossImage");
    if (crossImage.className == "hidden") {
        crossImage.className = "show";
    } else {
        crossImage.className = "hidden"
    }
}

Upvotes: 2

mdeang2
mdeang2

Reputation: 241

You can try using jQuery, and you'll want all <td> to share the same class. In my example, I used "dynamic-image".

HTML:

    <table>
       <tr>
          <td class="dynamic-image"></td>
       </tr>
       <tr>
          <td class="dynamic-image"></td>
       </tr>
       <tr>
          <td class="dynamic-image"></td>
       </tr>
    </table>

CSS:

    .dynamic-image {
        background-image: url('http://www.clker.com/cliparts/3/h/N/y/5/p/empty-check-box-hi.png'); 
        background-size: contain; 
        position: relative; 
        height: 200px; 
        width: 200px; 
        content:" ";
    }
    .dynamic-image:before { content:" "; }
    .dynamic-image.active:before {
       background-image: url('http://www.clipartbest.com/cliparts/niX/yoA/niXyoAbiB.png'); 
       background-size:contain; 
       height: 200px; 
       width: 200px; 
       position: absolute; 
       top: 0; 
    }

jQuery:

    $('.dynamic-image').click(function()
    { 
       $(this).toggleClass('active');  
    });

Check out my jsFiddle here: http://jsfiddle.net/mdeang2/eyts25nh/1/

Upvotes: 0

Related Questions