How to Make Scrolling Images or Text

I received an excellent suggestion from Bree at Coffee Bean Bookshelf for a tutorial: how to make a marquee scrolling sidebar widget for images (also works for text). It’s a lot easier than you think!

Here is the general code, which you can paste into any widget:

<marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">Text or images go here!</marquee>

And here’s an example of how it looks:

BookNook Ultimate Book Blogger Plugin

Notice how it pauses if you put your mouse over it! That makes it easier for people to view the images and click on them if they want.

You can also change the direction of the scroll by adding a bit more text to the tag:

<marquee behavior="scroll" direction="down" onmouseover="this.stop();" onmouseout="this.start();">
	<a href="https://www.nosegraze.com"><img src="https://www.nosegraze.com/wp-content/uploads/2012/10/booknook.jpg" alt="BookNook" /></a>
	<a href="https://www.nosegraze.com/ultimate-book-blogger-plugin-for-wordpress/"><img src="https://www.nosegraze.com/wp-content/uploads/2020/02/ultimate-book-blogger-plugin-button.jpg" alt="Ultimate Book Blogger Plugin" /></a>
</marquee>

(This time I also included the code for the images in case you don’t know how to do that.)

The key difference here is that I added direction="down". You can add any of the main directions you like (up, down, left, right).

And that would look like this:

BookNook Ultimate Book Blogger Plugin
Photo of Ashley
I'm a 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

Leave a Reply

(Enter your URL then click here to include a link to one of your blog posts.)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

13 comments

    1. Yep! Just change the marquee to something like this:

      <marquee behavior=”scroll” direction=”down” onmouseover=”this.stop();” onmouseout=”this.start();” scrollamount=”1″>

      Notice the “scrollamount” bit on the end. You can edit that number to whatever you want. The higher the number, the faster it will go.

      1. Hi. Tried the scrollamount with the number but it didn’t work. It was already set to one. Negative numbers or even high positive numbers don’t change the speed. How else can I get the scroll speed to slow down? thanks.

    1. I recommend just uploading images that are the same size. But you can also add width="100" height="100" (or whatever numbers you want) to the image tags.

      Example:

      <img src="image url here" alt="Description" width="100" height="100">

Recent Posts

    Random Posts