?
Solved

Javascript display image for 5 seconds and then hide

Posted on 2010-01-11
10
Medium Priority
?
1,152 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

770 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