I've written a code where you have a choice between images and when you click on one of them it appears in another placeholder:
home.php
<div id="templates" class="row">
<?php
while ($one = $templates->fetch()) {
?>
<div class="col-xs-3 col-md-2">
<a class="thumbnail" data-price="<?= $one['price'] ?>" data-id="<?= $one['id'] ?>">
<img id="imgTemp" onclick="changeImage('../files/templates/blank/<?echo($one['id'])?>.jpg');changeSize();" src="/files/templates/example/<?= $one['id'] ?>.jpg" alt="<?= $one['titlep'] ?>">
</a>
</div>
<?php
}
?>
</div>
<div>
<img id="imgDisp" src="../files/test/red-panda.jpg" alt="Red panda" class="mask" datamask="../files/test/1.png">
</div>
Those images are loaded using these two functions:
function changeImage(imgName)
{
image = document.getElementById('imgDisp');
image.src = imgName;
}
function changeSize()
{
document.getElementById('imgDisp').setAttribute("datamask","../files/test/2.png");
}
changeImage is used to take the chosen image and place it in the new div while changeSize is used to set an attribute "datamask". Datamask in its turn is used by another script which is in canvasmask.js and sets a mask on the image (e.g. square, triangle, etc.). Now, when I choose an image, no mask is applied guessing that the function in canvasmask.js is executed before the others. Can it be done so it is executed after?
