javascript change image onclick

Question

Is it possible to change a part of a photo? I do not know how to do this - when I click on the white ball part of the lamp changes. For now I did something like that http://mantykora.cleoni.com/~newsletter/2017/gabi/2017_Gabi_2.html

<script>
function pictureChange()
{
document.getElementById("theImage").src="gold.jpg";
}


function pictureChange2()
{
document.getElementById("theImage").src="miedz.jpg";
}


function pictureChange3()
{
document.getElementById("theImage").src="stal.jpg";
}

function pictureChange4()
{
document.getElementById("theImage").src="816_Gabi_white.png";
}
</script>

<td align="center" valign="middle"><a href="#" onClick="pictureChange()"><img src="816_Gabi_kolory_GOLD.jpg" width="200" height="200" alt=""/></a></td>
<td align="center" valign="middle"><a href="#" onClick="pictureChange2()"><img src="816_Gabi_kolory_MIEDZ.jpg" width="200" height="200" alt=""/></a></td>
<td align="center" valign="middle"><a href="#" onClick="pictureChange3()"><img src="816_Gabi_kolory_STAL.jpg" width="200" height="200" alt=""/></a></td>

UPDATE 1 - 2017-06-28

I have made separate photos but I do not know how to connect Fabric.js plugin with javascript onclick - http://mantykora.cleoni.com/~newsletter/2017/gabi/html/index_2.html#

Answer 1

You can use fabric.js plugin for updating the partly image. Here are the steps that you need to do for updating partly images

1. Add Fabric.js plugin
2. Create Canvas using fabric method. Refer this doc for same http://fabricjs.com/fabric-intro-part-1#canvas
3. Add Top Image And Bottom image same as added below sample images. Refer http://fabricjs.com/fabric-intro-part-1#images
4. Once user click on Color spear you need to update the images according to the selected object.

Here are the Demo Links for your references

http://fabricjs.com/fabric-intro-part-1#images

I have updated code below. I have added updateImage function for updating image while click on images . Just you need to pass image

 var canvas = this.__canvas = new fabric.StaticCanvas('c'); fabric.Image.fromURL('Gold_001A.png', function(img) { canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage2' }).scale(1)); }); fabric.Image.fromURL('Gold_001B.png', function(img) { canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage' }).scale(1)); }); /* Funtion for updating image @param {string}{imageName} Image name or image url for loading and updating */ function updateImage(imageName){ fabric.Image.fromURL(imageName, function(img) { var object= getImageObjectUsingId('theImage'); canvas.remove(object); canvas.add(img.set({ left: 35, top: 50, angle: 0, id:'theImage' }).scale(1)); }); } /* Function for getting perticular object for updating the images @param {String}{id} Object Id for selecting object . Same as use while creating object */ function getImageObjectUsingId(id){ var listOfObjects= canvas.getObjects(); for(var i=0; i< listOfObjects.length; i++){ if(listOfObjects[i].id==id){ return listOfObjects[i]; } } } 

 <table width="100%" border="0"> <tbody> <tr> <td align="center" valign="middle"><table width="600" border="0"> <tbody> <tr> <td align="center" valign="middle"><canvas id="c" width="800" height="800" class="lower-canvas" style="width: 800px; height: 800px;"></canvas> </td> </tr> <tr> <td align="center" valign="middle"><table width="600" border="0"> <tbody> <tr> <!--update image for updating image using updateImage function and pass iamge name or url in that funtion--> <td align="center" valign="middle"><a href="#" onclick="updateImage('816_Gabi_white.png')"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_GOLD.jpg" width="200" height="200" alt=""></a></td> <td align="center" valign="middle"><a href="#" onclick="updateImage('816_Gabi_kolory_MIEDZ.jpg')"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_MIEDZ.jpg" width="200" height="200" alt=""></a></td> <td align="center" valign="middle"><img src="./Dokument bez tytułu_files/816_Gabi_kolory_STAL.jpg" width="200" height="200" alt=""></td> </tr> </tbody> </table></td> </tr> <tr> <td align="center" valign="middle">&nbsp;</td> </tr> </tbody> </table></td> </tr> </tbody> </table>