Databases
StackOverflow2013
Postsdbo
POimages rotation to the right
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POimages rotation to the right
    text
    copied!<p>I have 4 images in an HTML page: 1.png, 2.png, 3.png and 4.png. I want when the user click in the image 3, a rotation to the right of the various images is performed. (replace the image 1 with image 3, image 2 by image 1,image 4 by image 2 and image 3 by image 4).</p> <p>this is the code I tried, but It won't work :</p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript"&gt; function rotation() { img1 = document.getElementById('img1'); img2 = document.getElementById('img2'); img3 = document.getElementById('img3'); img4 = document.getElementById('img4'); img2.parentNode.appendChild(img4); img1.parentNode.appendChild(img2); img3.parentNode.appendChild(img1); img4.parentNode.appendChild(img3); } &lt;/script&gt; &lt;style type="text/css"&gt; table { margin-left:auto; margin-right:auto; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table class="centrer"&gt; &lt;tr&gt; &lt;td&gt;&lt;img src="exercice1/1.png" alt="Image 1" id="img1"&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="exercice1/2.png" alt="Image 2" id="img2"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;img src="exercice1/3.png" alt="Image 3" id="img3" onclick="rotation()"&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="exercice1/4.png" alt="Image 4" id="img4"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The problem is when I click for the first time on image 3 the images are ordered like this:</p> <pre><code>2 1 3 4 </code></pre> <p>and in the second time they ordred like this:</p> <pre><code>2 1 3 4 </code></pre> <p>and I want them to be ordered like this:</p> <p>before rotation:</p> <pre><code>1 2 3 4 </code></pre> <p>after rotation :</p> <pre><code>3 1 4 2 </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload