Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

how to use linked image sprites using css?


  #1  
Old Feb 11, 2010, 12:40 AM
over_cloud9
 
14 posts · Dec 2009
kolkata,India
My site specializes in games,that is why I have to post a lot of pictures both in the body and the sidebars.but calling each image is an additional http request and slows page loading time.I'm using smart optimizer,phpspeedy plugin,minimized the image sizes,etc but nothing helped me save page loading time(wp cache,db cache are useless).people are complaining that my site is slow and I'm getting a high bounce rate.

so if I could use css sprites of images,that could help save innumerable http requests and page loading time.the only problem is that the images are linked and I don't know how to implement css spriting.So far I've been able to implement image sprites for my sidebar captions only.

In short I want to use css image sprite for all images of my site including header,background,body and sidebars and the ones in the body and sidebars are linked.Please help me,I've been looking for days to find a solution but didn't get one.
  #2  
Old Jul 25, 2012, 10:44 AM
Lynn Rasmussen
 
10 posts · Jan 2011
I was successful at getting this to work by using the below examples. I added a 'Get Started' button that linked to a page with the same name. You need to:
1. Create a sprite image. see http://bit.ly/12d0wp or set up similiarly in image program (I used Illustrator). Mainly set up a before/hover image 2-up (my final size is 200px wide by 100px high). You then position what gets called by properly coding coordinates in the css.
2. Upload the image to the media library.
3. Add the html to the page you want it on.
HTML Code:
<p class="getstarted"><a href="http://socialenergizer.com/get-started/">Get Started<img class="getstarted" src="img_trans.gif" alt="" width="1" height="1" /></a></p>
4. Add the css to ATO>Add html/css inserts>CSS
}
.getstarted {
display:block;
width:200px;
height:50px;
text-indent:-9999px;
position: relative; left:795px; top:-145px;
}
.getstarted a {
display:block;
width:100%;
height:100%;
background: url(http://socialenergizer.com/wp-conten...getstarted.png) no-repeat top left;
outline:none;
}
.getstarted a:hover {
background: url('http://socialenergizer.com/wp-content/uploads/2012/07/getstarted.png') 0 -50px;
}

This was also helpful in working this out. Good luck!
http://www.w3schools.com/css/css_image_sprites.asp

Bookmarks

Tags
css sprites, image sprites, linked images sprite

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Active page menu background image css help dixieprosser Page & Category Menu Bars 1 Mar 18, 2010 01:13 PM
%author-linked% and All-in-one-SEO artiflo Post-Kicker, -Byline & -Footer 11 Feb 1, 2010 07:32 PM
[SOLVED] CSS image sprite code required for sidebars over_cloud9 Sidebars & Widgets 1 Jan 12, 2010 07:25 AM
how to make header image linked to a post URL? dreamfree Header configuration & styling 3 Jun 13, 2009 02:54 AM
author-linked c32v Post-Kicker, -Byline & -Footer 1 Feb 26, 2009 06:43 PM


All times are GMT -6. The time now is 07:02 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.