Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to Hide and show a set of imageson a Single click in HTml5?
    primarykey
    data
    text
    <p>I am working on a HTML5 windows app in wwhich a screen has a 3 images on up,leftand right side as shown in the image below marked with red.</p> <p><img src="https://i.stack.imgur.com/2MyQl.jpg" alt="enter image description here"></p> <p>All I want to hide that three images on a single click by sliding out the images when the button is clicked. Please provide me code on how to do it using HTMl5/javascript</p> <p>The Code goes here for the program</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;TamilKarpom&lt;/title&gt; &lt;!-- WinJS references --&gt; &lt;link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /&gt; &lt;script src="//Microsoft.WinJS.1.0/js/base.js"&gt;&lt;/script&gt; &lt;script src="//Microsoft.WinJS.1.0/js/ui.js"&gt;&lt;/script&gt; &lt;script&gt; function diffImage(img) { if (img.src.match("images/on_btn.png")) { console.log('Low'); img.src = "images/off_btn.png"; } else { console.log('up'); img.src = "images/on_btn.png"; } } &lt;/script&gt; &lt;!-- TamilKarpom references --&gt; &lt;link href="/css/default.css" rel="stylesheet" /&gt; &lt;script src="/js/default.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;img src="images/Title.png" id="full-screen-background-image"/&gt; &lt;img src="images/yellow.png" id="image4" style="position:absolute; height: 734px; left: 1195px; top: 41px; width: 229px;"/&gt; &lt;img src="images/glow.png" style="position:absolute" id="full-screen" /&gt; &lt;a href="uyireluthukkal.html"&gt; &lt;img src="images/blue.png" id="image3" style="position:absolute; left: 253px; top: -100px; width: 880px; height: 276px;"/&gt; &lt;/a&gt; &lt;img src="images/red.png" id="image2" style="position:absolute; width: 220px; left: -48px; top: 24px; height: 734px;"/&gt; &lt;img src="images/title_01.png"style="position:absolute; left: 330px; top: 58.5px; width: 700px; height: 630px;" /&gt; &lt;img style="position:absolute; left: 593.5px; top: 636.33px; width: 171px; height: 122.5px;" src="images/off_btn.png" id="image1" onclick="diffImage(this); "/&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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