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 <em>"hover over some region, something changes on the screen"</em> 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.
<em>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?</em>
<a href="https://developer.mozilla.org/en/CSS/max-width" rel="nofollow">https://developer.mozilla.org/en/CSS/max-width</a>
<img src="flower.jpg" class="no-bigger-than-1024"/>