CODEWITHSUNDEEP
javascripthtmlcss
Kerry
Kerry

Reputation: 1061

Hide image after 10 seconds

Is there a way using HTML and CSS can I hide an image after 10 seconds? If it's not possible, is there any easy way to do it with just JavaScipt (not jQuery, I don't want to add jQuery library to my HTML page unless its highly required).

Upvotes: 2

Views: 13296

Answers (8)

prakash mattaparthi
prakash mattaparthi

Reputation: 1

Add these lines to your code , image will be displayed and if you press q then the ouput window will be closed

if cv2.waitKey(1) & 0xFF == ord('q'):
   break
cap.release()
cv2.destroyAllWindows()

Upvotes: 0

Suresh Kumar
Suresh Kumar

Reputation: 1

I executed the following code with Python and Conda

In Python, Output is displayed.

In Conda, Output is disappeared immediately, What to do?

threshold.

import numpy as np
import cv2
from matplotlib import pyplot as plt

Image operation using thresholding

img = cv2.imread('c4.jpg')

gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

ret, thresh = cv2.threshold(gray, 0, 255,
                            cv2.THRESH_BINARY_INV +
                            cv2.THRESH_OTSU)
cv2.imshow('image', thresh)

Upvotes: 0

Ishank
Ishank

Reputation: 2926

To hide instantly -

setTimeout(function() {
  document.getElementById('imageID').style.display='none'
}, 10*1000);

EDIT:- To animate hide using pure JS

function start(){

window.timerID =  setInterval(function() {
var aOpaque = document.getElementById('imageID').style.opacity;
aOpaque = aOpaque-.1;

aOpaque = aOpaque.toFixed(1);   

document.getElementById('imageID').style.opacity = aOpaque;

if(document.getElementById('imageID').style.opacity<=0)
clearInterval(window.timerID);
},1000);
}

window.onload = function(){start();}

In the markup <image id="imageID" style="opacity:1"> remember to give style="opacity:1" inline css attribute.

Please note that as <img> has an alt attribute that might affect search results of the page and doing a display:none might adversely impact the search results so developers use something like - transform: translateX(); and just put the html tag out of the view say by giving a negative value in the translateX(value).

Upvotes: 5

edd
edd

Reputation: 1364

Try this

setTimeout(function() {
  document.getElementById('//your image id').style.display='none'
}, 10000);

Upvotes: 0

Uffe
Uffe

Reputation: 2275

You do not say anything about CSS2 or CSS3, but take a look at this... Maybe it can help you on the way?

Demo on JsFiddle

Upvotes: 1

Harsha Venkataramu
Harsha Venkataramu

Reputation: 2904

<script type = "text/javascript">
window.onload=function(){setTimeout(showPopup,10000)};

function showPopup()
{
   //write functionality for the code here
}
</script>

Here , the method showPopup is called 10000 milliseconds or 10 seconds after the document has loaded.

To achieve the fading out in pure JavaScript, the code becomes a bit more complicated.See edited answer below.This is not entirely my code but I don't remember from where I had got this.

<!doctype html>
<html>
<head>
<script type = "text/javascript">
var fading_div = document.getElementById('fading_div');
var animationComplete = true;
window.onload=function(){setTimeout(hideImage,10000)};

function hideImage()
{
   if (animationComplete && fading_div.style.opacity !== '0') {
        animationComplete = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout((function (x) {
                return function () {
                    function_fade_out(x)
                };
            })(100 - i), i * 10);
        }
    }
}

function function_opacity(opacity_value) 
{
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}

function function_fade_out(opacity_value) 
{
    function_opacity(opacity_value);
    if (opacity_value == 1) {
        fading_div.style.display = 'none';
        animationComplete = true;
    }
}
</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<img id="fading_div" src="test_image.jpg"/>
</body>
</html>

Upvotes: 3

ValleyDigital
ValleyDigital

Reputation: 1470

You can use css3 and @keyframes. Set the keyframe and make it transparent after however long you'd like. Here is more info. About Keyframes

Upvotes: 2

PSR
PSR

Reputation: 40318

Use setTimeOut() for this

setTimeout() - executes a function, once, after waiting a specified number of milliseconds

setTimeout(function(){HIDE HERE)},10000);

Upvotes: 4

Related Questions