Member Avatar for moregraphics

I've created a gif in Photoshop that contains 5 images. It's placed at the top of our website as banners that change to the next image every 3 seconds. I need to link each image to each banners website. How can I do this? I use Dreamweaver for our website. (All I can see is the name of the gif that contains all 5 images. So I can't link each image the way it is currently coded).

  • 2 Contributors
  • 5 Replies
  • 332 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by moregraphics

Dani AI

Generated

Animated GIFs are convenient for quick previews, but for clickable banners the practical approach is to serve separate images in HTML so each slide can carry its own link. After switched to a slideshow generator (and following ’s suggestion to use a script-based slideshow), the usual workflow is to export or build a small HTML/CSS/JS snippet and drop it into the page. The pattern below makes it clear what the generator is producing and how Dreamweaver expects the files.

Markup (each slide is a link so the href stays active while the slideshow advances):

<ul class="slideshow">
  <li class="active"><a href="https://site1.example"><img src="slide1.jpg" alt="Product A"></a></li>
  <li><a href="https://site2.example"><img src="slide2.jpg" alt="Product B"></a></li>
  <li><a href="https://site3.example"><img src="slide3.jpg" alt="Product C"></a></li>
</ul>

Minimal rotation script (3000 ms):

const slides = document.querySelectorAll('.slideshow li');
let i = 0;
setInterval(() => {
  slides[i].classList.remove('active');
  i = (i + 1) % slides.length;
  slides[i].classList.add('active');
}, 3000);

Dreamweaver integration and quick tips: place the exported slideshow folder in the site root, update the CSS/JS links in the page head, then paste the slideshow markup where the banner belongs and test in a browser (use the Files panel to ensure assets upload). Fix oversized artwork by replacing the source image with a resized copy (or apply max-width:100% / object-fit:cover for responsive crops). Add meaningful alt text, keyboard controls or pause-on-focus for accessibility, compress images for performance, and keep external links secure with rel="noopener" when opening new tabs. These steps explain why a generator’s publish output typically just needs correct paths and one pasted snippet to work inside Dreamweaver.

Recommended Answers

All 5 Replies

Member Avatar for rtrethewey

There's no way for you to detect which frame of an animated GIF is being displayed by the browser, so you can't modify a link this way.

I'd suggest that you replace the animated GIF with a slideshow script. There are many free slideshow scripts available online that will let you connect separate links to individual images in the slideshow. A quick Google search will let you find one easily.

commented: Very helpful +1
Member Avatar for moregraphics

Thank you. I had a feeling I'd have to make it in another format. Will the slideshows in Adobe Bridge allow me to add the links?

Member Avatar for moregraphics

Okay, I have used the slideshow maker, adding the links. How do I get it in a format, Dreamweaver will accept? It's in a format created by the slideshow software, but even if I "save as", there is no option to change the format? Do I need to download a converter and if so what format do I convert it to?

Member Avatar for moregraphics

I've got it working now. Just had to figure out which way to publish it. Just need to change one image because it's too big, but other than that it's showing like it should. Just had to adjust some code.

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.