Member Avatar for aswaddling

I am using dreamweaver and am trying to desgn a page that has a horizontal banner with product images in it. i would like these images to scroll to the left when the mouse moves to the left (on top of the images) or to the right when the mouse is on the right hand side.

Is this possible?

My ultimate goal is that a user scrolls to the image of the product they want, then clicks on it to show an enlarged image with some text below the horizontal images........

does anyone know how to do something like this?
Please help a new site designer.
Cheers!

  • 3 Contributors
  • 2 Replies
  • 72 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by ajaxius

Dani AI

Generated

Practical pattern for that builds on the thread: place the thumbnails inside a wide inline strip that is masked by a fixed-width banner (overflow hidden). Track the mouse X inside that banner, map it to a normalized value (-1..+1), and use that to drive horizontal motion. Use a small animation loop so movement is smooth and frame‑paced, and open a simple overlay/modal with the larger image and text on thumbnail click. and pointed toward client-side effects used on product pages; the snippet below is a minimal, modern implementation you can paste into Dreamweaver and tweak.

<div id="banner" tabindex="0" style="overflow:hidden;white-space:nowrap;">
  <div class="strip" style="display:inline-block;">
    <!-- images -->
  </div>
</div>

<script>
const banner = document.getElementById('banner');
let speed = 0, maxSpeed = 12;

banner.addEventListener('mousemove', e => {
  const r = banner.getBoundingClientRect();
  const x = e.clientX - r.left;
  const norm = (x / r.width) * 2 - 1; // -1..+1
  speed = norm * maxSpeed;
});
banner.addEventListener('mouseleave', () => speed = 0);

(function frame(){
  const maxScroll = banner.scrollWidth - banner.clientWidth;
  banner.scrollLeft = Math.max(0, Math.min(banner.scrollLeft + speed, maxScroll));
  requestAnimationFrame(frame);
})();
</script>

Notes: clamp scrollLeft to bounds, add mouseleave to stop motion, and preload large images for the modal. For smooth updates use requestAnimationFrame (MDN requestAnimationFrame) and adjust Element.scrollLeft (MDN scrollLeft). Add keyboard controls, alt text, and touch/drag fallbacks for mobile.

Recommended Answers

All 2 Replies

Member Avatar for sillyboy

Do a google search on "AJAX" I am not entirely sure what you want, but I assume it is something like the Mac OS fish eye. I have seen something similar done in AJAX before.

Member Avatar for ajaxius

yeah ebay similar products does exactly that

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.