Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript display image for 5 seconds and then hide

Posted on 2010-01-11
10
Medium Priority
?
1,351 Views
Last Modified: 2012-05-08
Title says it all, I want to display an image for 5 seconds and then have it disappear. I have some banner rotation scripts, but I just want this to show up once.
0
Comment
Question by:NGTLD
  • 5
  • 4
10 Comments
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26287308
Use some Javascript for this.

First, give the image an id...  <img id="imgToHide"... />

Then set a function to start when the body loads...

<body onload="javascript:hideImage()">

And the function is below:
function hideImage(){
    //  5000 = 5 seconds
    setTimeout( 5000, doHide ) ;
}

function doHide(){
    document.getElementById( "imgToHide" ).style.display = "none" ;
}

Open in new window

0
 

Author Comment

by:NGTLD
ID: 26287514
not sure why, but it is not working for me
0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26287639
My bad - I got the timeout arguments mixed up and forgot some quotes...
<script>
	function doHide(){
		document.getElementById( "imgToHide" ).style.display = "none" ;
	}

	function hideImage(){
		//  5000 = 5 seconds
		setTimeout( "doHide()", 5000 ) ;
	}
</script>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 22

Expert Comment

by:kadaba
ID: 26287649
please post your code.
0
 

Author Comment

by:NGTLD
ID: 26287729
Still nothing
0
 

Author Comment

by:NGTLD
ID: 26287789
I am using the code posted above
\
0
 
LVL 6

Accepted Solution

by:
Tony O'Byrne earned 2000 total points
ID: 26287885
Did you give the image an id?

If you did, here's the *entire* code that works for me...  (without an actual image - just a div in place of it).

I just ran the code below, and it works for me.  Hope it works for you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
<script>
	function doHide(){
		document.getElementById( "imgToHide" ).style.display = "none" ;
	}

	function hideImage(){
		//  5000 = 5 seconds
		setTimeout( "doHide()", 5000 ) ;
	}
</script>
	</head>

	<body onload="hideImage()">
		<div id="imgToHide" style="background: yellow; width: 100px; height: 50px">
			Hello
		</div>
	</body>
</html>

Open in new window

0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26287894
If that doesn't work, then change the above code to include your image by putting your image inside the <div> </div> tags and see if that helps.


If that doesn't work, check that you have Javascript enabled. :)
0
 

Author Comment

by:NGTLD
ID: 26288005
THat did it thanks
0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26288516
You're welcome. :)  Thanks for the points.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question