1

Is there a way to set the source of a <img> tag in HTML source to a partial image from a bigger image? I know I can do this in CSS with something like: background-position: 0px -76px; but how can I do this for <img> and <input type="image">?

EDIT: Screenshot from Chrome:

enter image description here

Alireza Noori
  • 14,961
  • 30
  • 95
  • 179

3 Answers3

1

Set the <img src to a partial image from a bigger image? There is no way.

You already have the answer: use the background CSS property and position it to the desired coordinates. Note: You can assign background images to the <img> tag if that helps you at all.

Just for kicks, as an alternate solution: You could append your image with a query string that contains the coordinates and size:

<img src="/my_image.jpg?x=400&y=220&width=200&height=120">

...then use .htaccess to send this request to a server side script that processes the image and outputs the partial image (but that's another topic altogether).

This post might help you with the .htaccess bit, should you choose to implement it:

It really sounds like you want to use CSS sprites, there are a number of tutorials on this, here's one:

Community
  • 1
  • 1
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • Thanks. But there's one little problem here, I have a problem like the one in [this question](http://stackoverflow.com/questions/4108983/input-type-image-shows-unwanted-border-in-chrome-and-broken-link-in-ie7). I want to create a search box with a submit button of type image. When I set the `src=""`, a border will be shown in IE and Chrome (not FF). At the same type I want to put all my images in one big image and use offsets. What should I do? – Alireza Noori Jan 07 '12 at 23:23
  • You should not use ``, it's actually designed for another purpose (like image maps, where the coordinates clicked have importance). Use CSS to style a ` – Wesley Murch Jan 07 '12 at 23:28
  • I'm actually using CSS sprites. I just didn't know the name :D Thanks. I'll change the title of my question. I've used the `border:0` (or `none`). It will not work if `src=""`. – Alireza Noori Jan 07 '12 at 23:31
  • I don't know. That's the thing. I think when I set `src=""` the browser (IE and Chrome) looks for the image and if haven't found, they show an error image or an empty image with borders. So I have to put something in there. If I slice the image and put the address in the `src` it will fix it but I want to avoid the HTTP request. – Alireza Noori Jan 07 '12 at 23:38
  • Is there some compelling reason why you must use `src` and `type="image"` instead of CSS? – Wesley Murch Jan 07 '12 at 23:40
  • I've added an screenshot from chrome to the question. – Alireza Noori Jan 07 '12 at 23:40
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/6515/discussion-between-alireza-noori-and-madmartigan) – Alireza Noori Jan 07 '12 at 23:40
0

Simply put you cant unless you scale the image down or up.

Use an outer span with overflow:hidden and set the size of the image on that.

Something like 

span.thumb
{  
width:120px;
height:70px;
overflow: hidden;
}

Put the image inside this span

Sean H Jenkins
  • 1,770
  • 3
  • 21
  • 29
0

you would probably have to wrap it in a <div> that is smaller than the <img> and then set the offset of the image with top:y; or margin-top: y;