Member Avatar for kevinabrown

I know how annoyingly simple minded (and redundant) this question will be. Sorry.

This is the crude, Geocities do-it-yourself website I'm building:

The site is focused on Spanish-English translation, and is a All I'd like to do is have the 20-something flags of the countries where Spanish is spoken across the home page every few seconds. I'd like to do this as simply as possible, both for myself and for potential site visitors.

I have Dreamweaver/Fireworks 4/Director 8.5 and Flash 5 and Adobe Photoshop 6, but am trying to do some very simple. All I want to do is replace the "under construction" placeholder on the site below with "scrolling images".

When I'm in Dreamweaver, I see an "Insert/Interactive Images" menu/submenu. I'd like to know whether this is a "Fireworks HTML" thing or something much simpler.

Can you help?

  • 2 Contributors
  • 2 Replies
  • 124 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by kevinabrown

Dani AI

Generated

This thread asked for a very simple way to show a row of scrolling flags on a homepage. opened the question and followed up. Below are clear, modern options and a compact, accessible CSS pattern that works without Flash or plugins.

For a lightweight, widely supported solution use a CSS keyframes loop. Duplicate the sequence of images so the animation can cycle seamlessly; mark the duplicate set as decorative so screen readers don’t repeat content. The example below is intentionally minimal and portable into any HTML page or Dreamweaver code view:

<div class="marquee" role="region" aria-label="Country flags">
  <div class="marquee__inner">
    <img src="flag-spain.png" alt="Spain">
    <img src="flag-mexico.png" alt="Mexico">
    <!-- repeat the same images again for seamless loop -->
    <img src="flag-spain.png" alt="">
    <img src="flag-mexico.png" alt="">
  </div>
</div>

<style>
.marquee { overflow:hidden; }
.marquee__inner { display:flex; gap:8px; animation:scroll 20s linear infinite; }
.marquee__inner img { height:32px; width:auto; display:block; }
.marquee:hover .marquee__inner { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .marquee__inner { animation: none; } }
@keyframes scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
</style>

Key practical tips not covered earlier in the thread:

  • Use SVG icons or a single sprite sheet for many small flags to reduce requests and improve crispness on high-DPI screens.
  • Keep file sizes small (combine/optimize, use modern formats) and set explicit image heights to avoid layout shifts.
  • Provide meaningful alt text for the original images and empty alt for duplicates; use aria-hidden="true" on duplicated markup if preferred.
  • Respect prefers-reduced-motion and allow hover/touch to pause the animation for accessibility.

This approach is simple, degrades gracefully, and keeps performance and accessibility in mind.

Member Avatar for Danr

I take it you got this figured out? ;)

Dan

Member Avatar for kevinabrown

Just animated the flag .gifs in Fireworks 4 then stored the image on my home page using Dreamweaver. Don't know how it looks, but it works well!

Thanks.
======================

I take it you got this figured out? ;)

Dan

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.