Question

I would like to put an image on a website. I would like it not to be a background image, but a normal image, what I can later use for hovers and “hover over some region, something changes on the screen” kind of interactions.

What I would like to do is to make this image 100% width of the browsing area, but only if the screen is smaller than 1024px. If the screen is bigger, then I want the image to be exactly 1024px wide.

How would you do this? Somewhere I’ve read that CSS3 can do automatic background-width to fit with the browser window, but I think by using background image I cannot do interactive trick on the image later. But I’ve never done interactive tricks, so maybe it’s possible.

By interactive tricks I mean that if the mouse pointer is over a polygon region, then a div or an image changes or appears somewhere. Can you point me where to read about this technique, and how is it called?

I have no experience in JavaScript, I’ve only used premade JS plugins, but if you say that for this problem I really should use JS then I have no problem with that.

Answer 1

use css max-width
https://developer.mozilla.org/en/CSS/max-width

HTML:

<img src="flower.jpg" class="no-bigger-than-1024"/>

CSS:

.no-bigger-than-1024{width:100%; max-width:1024px;}