My name is Becky. I am learning HTML and css coding. I am currently trying to gather techniques for an "online Treasure Hunt" project. I am looking for a way to have an image or object appear at certain times of the day, preferably on different pages. I have scen a technique used on a child's game where an image would hover across the screen and you had to click on it before it disappears. I am aiming toward something like that! Thank you!
Disclaimer: I apologize if my question is in the wrong category, if this is the case I would appreciate if you could direct me to the correct one!
ANSWER: Hi Becky,
Hope you are doing great.
For your requirement , first you need an image to hover across the screen. This can be simply done by HTML marquee, you don't need anything special. Copy and paste following lines in your code editor and preview in a browser.
You mention you need to click on it before it disappears. We call these things as Event. "onClick" is one of the available event, which you need in order to capture the user click.
I don't want to go any further from here. I will pause my answer for this moment. Before going any further, let me know how comfortable you are with HTML (event,syntax) and JS (syntax)?
You can develop your knowledge in HTML using this link :- http://www.w3schools.com/html/default.asp
It is really easy. Hey I will stay in touch with you until you develop your Children's game or requirement.
Feel free to contact me again.
[an error occurred while processing this directive]---------- FOLLOW-UP ----------
QUESTION: thank you so much! I am trying the HTML marquee in notepad (saved as html) but it doesn't work do I have to insert it into a page with a <head> etc. instead of by itself?
ANSWER: Hi Becky,
Insert within the body tags. Like below,
Tell me if it works or not.
---------- FOLLOW-UP ----------
QUESTION: This is perfect! I also would like it to:
Slide of the screen one instead of repeat
The graphic to appear at a certain time
Stop sliding upon clicking on it!
Are any of those possible? Thanks so much for your help!
You are most welcome Becky,
You want believe how simple is to stop the Marquee. Just add this onclick event. That's it.
<marquee direction="right" onClick="this.stop();">
But in this example you don't have a way to continue the Marquee. For that you may introduce a button or simply hover on the image to stop moving and when you take out the mouse it will keep moving.
To do that, have this code instead of the above code.
<marquee direction="right" onmouseover="this.stop();" onmouseout="this.start();">