script to scroll images

Someone asked Kang Rohman,” How I can put image into marquee code?” Well, let me explain. In the past, I posted the article about what marquee is. Please read this posting if you haven’t read it.
Just like an ordinary text, we need to add image code into the marquee code
The basic principle is as below;

<marquee>
Text, Links, images, or anything you want to add
</marquee>

from the basic principle above, we need to add image code between marquee code. There are many kinds of marquee code and it depends on your interest. Besides that we can also combine any kinds of HTML code in the marquee. We can put the texts in the middle, on the left, on the right, use frame, use back ground and anything. To do this, you need to be creative.

To make moving image with marquee image, you need to add image code in it. If there are some images, you need to insert this code <br /> between the vertical images and code of &nbsp; or &#160; to separate them. I give you a sample. The URL address I have is

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAUmWmNRFZQhzpx0BnMIrq5Gx17S88IfZjbyz2dRVmr7xe6hJ1uAqRylKZ59m0hZ1aVwWEOx11H_BZxgakzWQURDzEznQLReijV2aKbOmWAK_5sX7a-jwXFoaKE2o5Tbl0biEbK9p2sY/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSz1IatCe3pHqhAeYH4BHe63xBaa-z_t-ggXscZFXSfAjcUKWwGNIS6BFTIFLfzJDfurpDqS7mAGo-yAEnUwXxs2NR9NI2x6_Bhg3xED-WTclwZDApeycuihZKj-Qa2ZHsRatie6ZCRw/?imgmax=800

to make that photo appear, we have to use additional html code:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAUmWmNRFZQhzpx0BnMIrq5Gx17S88IfZjbyz2dRVmr7xe6hJ1uAqRylKZ59m0hZ1aVwWEOx11H_BZxgakzWQURDzEznQLReijV2aKbOmWAK_5sX7a-jwXFoaKE2o5Tbl0biEbK9p2sY/?imgmax=800"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSz1IatCe3pHqhAeYH4BHe63xBaa-z_t-ggXscZFXSfAjcUKWwGNIS6BFTIFLfzJDfurpDqS7mAGo-yAEnUwXxs2NR9NI2x6_Bhg3xED-WTclwZDApeycuihZKj-Qa2ZHsRatie6ZCRw/?imgmax=800"/>

This is my images :

Now, how can we add image code into the marquee?
For example, marquee code that I use is the code when the mouse touches the image, the mage stops. The code is as follows;
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAUmWmNRFZQhzpx0BnMIrq5Gx17S88IfZjbyz2dRVmr7xe6hJ1uAqRylKZ59m0hZ1aVwWEOx11H_BZxgakzWQURDzEznQLReijV2aKbOmWAK_5sX7a-jwXFoaKE2o5Tbl0biEbK9p2sY/?imgmax=800"/>
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSz1IatCe3pHqhAeYH4BHe63xBaa-z_t-ggXscZFXSfAjcUKWwGNIS6BFTIFLfzJDfurpDqS7mAGo-yAEnUwXxs2NR9NI2x6_Bhg3xED-WTclwZDApeycuihZKj-Qa2ZHsRatie6ZCRw/?imgmax=800”/>


</marquee>



The Result :



It was plain code or only image moves. We can give a little variation, like adding the frame and the code is as below;

<table border="10" cellpadding="3" height="135" width="195"/>
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAUmWmNRFZQhzpx0BnMIrq5Gx17S88IfZjbyz2dRVmr7xe6hJ1uAqRylKZ59m0hZ1aVwWEOx11H_BZxgakzWQURDzEznQLReijV2aKbOmWAK_5sX7a-jwXFoaKE2o5Tbl0biEbK9p2sY/?imgmax=800"/>
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSz1IatCe3pHqhAeYH4BHe63xBaa-z_t-ggXscZFXSfAjcUKWwGNIS6BFTIFLfzJDfurpDqS7mAGo-yAEnUwXxs2NR9NI2x6_Bhg3xED-WTclwZDApeycuihZKj-Qa2ZHsRatie6ZCRw/?imgmax=800"/>

</marquee>
</td>
</tr>
</table>




The Result :

Above is the image with frame and background is default (white). If you want to have colored background, you only need to insert background attributes at the table code. Below is the sample with light blue as the background.








<table border="10" cellpadding="3" height="135" width="195" bgcolor="#b1c3d9" />
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="center">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAUmWmNRFZQhzpx0BnMIrq5Gx17S88IfZjbyz2dRVmr7xe6hJ1uAqRylKZ59m0hZ1aVwWEOx11H_BZxgakzWQURDzEznQLReijV2aKbOmWAK_5sX7a-jwXFoaKE2o5Tbl0biEbK9p2sY/?imgmax=800" />
<br/> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAUmWmNRFZQhzpx0BnMIrq5Gx17S88IfZjbyz2dRVmr7xe6hJ1uAqRylKZ59m0hZ1aVwWEOx11H_BZxgakzWQURDzEznQLReijV2aKbOmWAK_5sX7a-jwXFoaKE2o5Tbl0biEbK9p2sY/?imgmax=800"/>
</marquee>
</td>
</tr>
</table>
</marquee>
</td>
</tr>
</table>

The Result ;

If you are still confused adding the image marquee code to blogger, please follow the steps below.

1. Log in into blogger with your ID
2. Click Layout .
3. Click Page Element tab
4. Click Add Gadget
   
5. Click plus button (+) for HTML/JavaScript. (img)
   
   
6. Copy and paste the image marquee code code in available column, for example: 
   

   <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="center"> 
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAUmWmNRFZQhzpx0BnMIrq5Gx17S88IfZjbyz2dRVmr7xe6hJ1uAqRylKZ59m0hZ1aVwWEOx11H_BZxgakzWQURDzEznQLReijV2aKbOmWAK_5sX7a-jwXFoaKE2o5Tbl0biEbK9p2sY/?imgmax=800"/>
   <br />
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSz1IatCe3pHqhAeYH4BHe63xBaa-z_t-ggXscZFXSfAjcUKWwGNIS6BFTIFLfzJDfurpDqS7mAGo-yAEnUwXxs2NR9NI2x6_Bhg3xED-WTclwZDApeycuihZKj-Qa2ZHsRatie6ZCRw/?imgmax=800"/>
   
   
   </marquee> 

7. Click SAVE TEMPLATE button.
   
8. Finish and view you blog to see the result.
   

do it's..............it's really work's..................