Menu
I understand how to use sprites, however, isn't a "src" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct.
Basically, I'd like to omit the SRC for an IMG tag and use just sprites, but am concerned about the HTML not being technically valid because of it. Thanks.
336
You create a defined area with a <a> with display:block; or <div> and use overflow hidden; to hide overflow and position:relative; . Then you place your <img> image sprite inside absolutely positioned, which is possible since you positioned the parent. Then use :hover on the image to change position.
A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
The HTML <img> element is found within the <body> tag. The <img> tag has 2 required attributes - src and alt. The <img> tag may support (depending on the browser) the following image formats: jpeg, gif, png, apng, svg, bmp, bmp ico, png ico.
CSS Image Sprite is a combined image file of all pictures in a document page. Image sprites come is useful as image resources will have to be loaded only once. Using the CSS background-position different parts of the combined image can be shown.
Using sprites doesn't necessarily mean you need to define them in css backgrounds. You can also use IMG tag sprites, to do so you need basically trim your image. There are two good articles explaining that technique:
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
Both CSS and IMG methods sure have their own benefits, so you need to figure out which one suits you better.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
