In today's post I will tell you about that how can you move image or text in HTML. We can move images and text using <marquee></marquee> anything whether it is image or text if placed between the <marquee></marquee> it will starts moving, as shown below :-
Now follow below steps to move image or text :-
<body>
Now follow below steps to move image or text :-
- Firstly open notepad or notepad++.
- Write or copy and paste below given HTML code.
- Then save as anyname.html.
- Open with browser and your image and text starts moving.
- If you want to change the moving direction of image or text then we use direction attribute of <marquee></marquee>.
- We can move text or image in four direction i.e. left,right,up and down.
- When you run our given HTML code then you will better understand the use of direction attribute.
- Another attribute of <marquee></marquee> is behavior, there are three values of behavior i.e. alternate, scroll, slide.
- When you run our given HTML code then you will better understand the use of behavior attribute.
- Below you are seeing the text is moving but when you place mouse pointer on it stops and when mouse pointer take out from that place it again starts moving.
- Now I will tell you how this happens.
- We use this onmouseout=start() and onmouseover=stop().
- If you want to change the speed we will use scrollamount="number".
- You can also change the background color by using this bgcolor="color_name".
- If you want to change font color then use this <font color="color_name"></color>
- You will better understand all the things by running our HTML code.
HTML Code :-
<html>
<head>
<title>Marquee</title>
</head>
<marquee onmouseover="stop()" onmouseout="start()" bgcolor="green">
<h1>Marquee</h1>
</marquee>
<center>
<table border="2" width="500px">
<tr>
<th><marquee direction="right" onmouseover="stop()" onmouseout="start()">Sr. No.</th>
<th><marquee direction="left" onmouseover="stop()" onmouseout="start()">Languages</th>
</tr>
<tr>
<td><marquee direction="up" scrollamount="20" onmouseover="stop()" onmouseout="start()">1.</td>
<td><marquee direction="up" scrollamount="20" onmouseover="stop()" onmouseout="start()">C</td>
</tr>
<tr>
<td><marquee direction="down" onmouseover="stop()" onmouseout="start()">2.</td>
<td><marquee direction="down" onmouseover="stop()" onmouseout="start()">C++</td>
</tr>
<tr>
<td height="100px"><marquee direction="right" onmouseover="stop()" onmouseout="start()">3.</td>
<td><marquee direction="left" onmouseover="stop()" onmouseout="start()">JAVA</td>
</tr>
<tr>
<td><marquee direction="left" onmouseover="stop()" onmouseout="start()">4.</td>
<td height="100px"><marquee direction="right" onmouseover="stop()" onmouseout="start()">HTML</td>
</tr>
<tr>
<td><marquee behavior="alternate" onmouseover="stop()" onmouseout="start()">5.</td>
<td><marquee behavior="alternate" onmouseover="stop()" onmouseout="start()">CSS</td>
</tr>
<tr>
<td><marquee behavior="scroll" onmouseover="stop()" onmouseout="start()">6.</td>
<td><marquee behavior="scroll" onmouseover="stop()" onmouseout="start()">ASP.NET</td>
</tr>
<tr>
<td height="100px"><marquee behavior="slide" onmouseover="stop()" onmouseout="start()">7.</td>
<td><marquee direction="scroll" onmouseover="stop()" onmouseout="start()">Programming</td>
</tr>
<tr>
<td><marquee behavior="scroll" onmouseover="stop()" onmouseout="start()">8.</td>
<td height="100px"><marquee behavior="slide" onmouseover="stop()" onmouseout="start()">Skills</td>
</tr>
</marquee>
</center>
</body>
</html>
</html>
For more help see the below video :-
If you have any doubt you can ask by commenting on our post.
For more updates like us on Facebook.
