4 images are displayed and it's suppose to flip the image horizontally on click and swap image with another by using the arrow indicator. The image swap is working, but the image will only flip once.
Below is my code, how is it not possible to flip the image multiple times?
I've tried several thing and I can't seem to get it working.. HELP!
<body>
<h1>My Images Gallery</h1>
<div class="polaroid">
<img src="winter.jpg" alt="Winter view" style="width:100%">
<div class="container">
<p>Make the image just like this by clicking and moving the tiles</p>
</div>
</div>
<table>
<tr>
<td id="a">
<img id="imga" src="right-top.jpg" alt="Winter view" onclick="flip('imga')">
<div id="texta">Right top tile</div>
</td>
<td id="pijlTop" class="pijl">
<span onclick="swap('a', 'b')">⇄</span>
</td>
<td id="b">
<div>
<img id="imgb" src="left-top.jpg" alt="Winter view" onclick="flip('imgb')">
</div>
<div id="textb">Left top tile</div>
</td>
</tr>
<tr>
<td id="pijlLeft" class="pijl">
<span onclick="swap('a', 'c')">⇅</span>
</td>
<td/>
<td id="pijlRight" class="pijl">
<span onclick="swap('b', 'd')">⇅</span>
</td>
</tr>
<tr>
<td id="c">
<div>
<img id="imgc" src="right-down.jpg" alt="Winter view" onclick="flip('imgc')">
</div>
<div id="textc">Right bottom tile</div>
</td>
<td id="pijlBottom" class="pijl">
<span onclick="swap('c', 'd')">⇄</span>
</td>
<td id="d">
<img id="imgd" src="left-down.jpg" alt="Winter view" onclick="flip('imgd')">
<div id="textd">Left bottom tile</div>
</td>
</tr>
</table>
<script>
function flip(a) {
var img = document.getElementById(a);
if (img.style === 'img'){
img.style = "transform:rotate(180deg);";
}
else {
img.style = "transform:rotate(180deg);";
}
}
function swap(a, b) {
var atext = document.getElementById("text" + a).innerHTML;
var btext = document.getElementById("text" + b).innerHTML;
var aimg = document.getElementById("img" + a).src;
var bimg = document.getElementById("img" + b).src;
document.getElementById("text" + a).innerHTML = btext;
document.getElementById("text" + b).innerHTML = atext;
document.getElementById("img" + a).src = bimg;
document.getElementById("img" + b).src = aimg;
}
</script>
</body>
Have you tried changing this line
else {
img.style = "transform:rotate(0deg);";
}
That should fix it!