Member Avatar for server_crash

This might be a little confusing, so please bare with me. I know how to map an image, but the thing is I don't really care about it going to the link after I click on the mapped space. What I want is to have rotating pictures in the mapped Space, but im not sure if this is possible.

If this is possible, could you please tell me how to do this?

  • 2 Contributors
  • 4 Replies
  • 125 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by server_crash

Dani AI

Generated

: your split-image + script approach is fine as a quick fix, but the overlay moved when the page resized because the overlay wasn’t positioned and sized relative to the base image. was right to ask what you meant by “rotating” — here the usual solution is swapping a sequence of images (not rotating the pixels).

Use a single responsive wrapper so the overlay scales with the base image. Put both images in a position:relative container, make the base image width:100%, and position the rotating image absolutely with percentage top/left/width so it keeps the same relative spot as the base image scales.

Example (markup, CSS and a simple rotation loop):

<div class="banner">
  <img src="base.jpg" class="base" alt="">
  <img id="rotOverlay" src="rot1.jpg" class="overlay" alt="">
</div>
.banner { position: relative; max-width: 900px; width: 100%; }
.banner .base { display: block; width: 100%; height: auto; }
.banner .overlay { position: absolute; top: 30%; left: 60%; width: 20%; height: auto; pointer-events: none; }
const frames = ['rot1.jpg','rot2.jpg','rot3.jpg'];
const overlay = document.getElementById('rotOverlay');
frames.forEach(s => new Image().src = s); // preload
let idx = 0;
setInterval(() => overlay.src = frames[++idx % frames.length], 2500);

If you must keep an HTML image map for hotspots, remember map coords are pixel-based and do not scale automatically. Either recalculate area.coords on resize (store original coords, multiply by currentWidth/naturalWidth) or use a tested plugin such as jQuery rwdImageMaps to keep the clickable areas aligned.

Tips: preload frames to avoid flicker, use pointer-events:none on the overlay if you want clicks to pass to the underlying map, and consider SVG for crisp, scalable overlays when precision is important.

Recommended Answers

All 4 Replies

Member Avatar for tgreer

Define "rotating". Do you mean, load a series of images (place different images "sequentially" or "in a rotating series"?

Or, do you physically want to change the "angle" of an image? IE has some filters for this, but they definitely aren't cross-browser.

Member Avatar for server_crash

I mean loading up a series of images. It's basically like a banner advertisement,but I want it over an image, and I can't use the div tag.

Member Avatar for tgreer

Let's see what you've already coded.

Member Avatar for server_crash

Right now I've got a different approach. I couldn't figure out how to map it for a rotating image banner, so I did this:

The image is really large, so I broke it up into two pieces. The second piece is what would contain the images if it were mapped, but since I don't know how I just drew the image on the second piece of the image. I simply did that by javascript:

<script language="javascript">
			var pictureNum = 1;
			function rotatePicture()
			{
				if (++pictureNum > 5)
				{
					pictureNum = 1;
				}
					ncp.src = "ncp" + pictureNum + ".jpg";
					window.setTimeout('rotatePicture();',1000);
			}
		</script>

and then the image looks like this:

				  <img src="nc1.jpg"><img name="ncp" src="ncp1.jpg">

That works fine for now, but even after splitting the image up it's still fairly large. I did try the <div> tag with some attributes, but that keep it over the image if the resolution changes. If I could just find a way to keep the rotating banner over the image and it stay there even after changing the resolution, then I'd be happy, but I'm beginning to think it's impossible :(

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.