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.

Well this is very simple. To develop something like this, you need HTML, CSS and JavaScript (JS). I saw you are learning HTML and CSS coding. So add JS for your learning journey, you won't regret.

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.

<marquee direction="right">
   <img src="" />   

However if you need to control the speed of the transition, you really need javascript images slider, which you can easily find in internet.

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 Javascript using this link :-

You can develop your knowledge in HTML using this link :-

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.


---------- 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,

<marquee direction="right">
  <img src="" />   

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();">
  <img src="" />   

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();">
  <img src="" />   



All Answers

Answers by Expert:

Ask Experts


Anjana Silva


I can answer most of HTML related questions. Also I can combine HTML with CSS, JavaScript, AJAX, PHP, etc.. Also if you need to combine these technologies with an IDE like Dreamweaver, it's my pleasure!


I'm in HTML field (Web Development & Design) for more than 7 years. I've developed lots of web sites using HTML/CSS/PHP/MySQL.

1) e-Innoving IT Solutions - Owner/Developer
2) OpenArc Business Process Outsourcing - PHP Web Developer
3) Stan Bond (SA) PTY LTD - Web Application Developer


Few sites that I have done using Dreamweaver.


1) Currently following MSc in Software Engineering in De Montfort University, Leicester
2) Bachelor in Information Technology (UCSC)
3) Sun Certified Java Professional (SCJP)
4) Diploma in Advanced Web Techniques using Dreamweaver.

Awards and Honors
2nd Class Upper Award for my Bachelors Degree with an average GPA of 3.48

©2016 All rights reserved.