The issue is that when you get the share widget from the ShareThis website, there are only a couple options for the styling of the button. And the javascript code that you get does not have an image URL in it that you could easily modify to your own image. I even tried copying the javascript that loads from the ShareThis site and loading it from my own site, with modifications. But that didn’t work. What I wanted was a large icon that when moused over would show the sharethis dropdown of all the social sharing options. However, there is no large icon option. Just a few different small icon options that were not going to match my client website icons. So, time to make it my way.

The image was going to appear in a group of icons for navigation. The sharethis icon needed to fit right into the middle of them. Since I was already using some hover css that I’m fond of using for icons like this, avoiding having to use jquery and for that, maybe making the site somewhat more accessible, I went ahead with that. I do this with an object tag to wrap a div inside a link tag, so it will validate.

Then all I did was create another div inside that one, to insert the sharethis javascript code. The HTML for the list menu item down to the javascript looked like this:

<li>
<a href="http://example.com/about">
<object>
<div class="menu-share">
---share this javascript goes here---
</div>
</object>
</a>
</li>


So there are the .menu-share div to show the button, as well as help me hide the image that sharethis will load, without hiding the functionality. All that’s left is the .css:

.menu-share {
background: url('images/share-icon.png') no-repeat 0 top;
height: 56px;
width: 57px;
float: left;
margin: 0 20px;
}
.menu-share:hover {
background-position: 0 -57px;
cursor: pointer;
}
.menu-share img {
display: none;
}


The last little bit just hides any image inside the div. It does not hide the background image, only images that load inside the div. However, all the javascript is still fully functional, loading the social media dropdown as it should.

Enter the simple elements that use nothing but HTML and CSS, and maybe some images.

What I want to demonstrate is a simple way to get a hover effect on an image, without using jquery or javascript. The way this works, basically, is the image will be the background of a div element that will reside inside a link. Actually the div does not have to be inside a link, but it does if you want the image to link to some other url. The background image actually contains two copies of your image, with the second copy having whatever hover effect you want, such as slightly darker or whatever. In the CSS code, you have the background image positioned at the top of the div, and in a hover of the same div, you have the background image positioned at the bottom. When you hover, voila! And unlike the javascript version of hover, you don’t have to wait a split second for the hover to work, since the image is already loaded!

To the rightyou can see a screenshot of the effect I’m going to show you. On the same screenshot you can also see a green button. I used the same effect on that. The button is part of a jquery slider, so it’s not like I never use jquery :)

I’m going to be using the coffee cup that’s available here. Actually I recommend this set of twitter icons, they are probably the coolest you can find.

First, I open Fireworks and find the coffee cup image I downloaded. Then I resize it to the size I need for the footer of my website. For me that’s 96px wide and 71px high. Then, I copy the image and paste it over itself. Next, move the second copy so that the top of the second copy just touches the bottom of the first copy. Then “Fit Canvas” so that the two images are now visible. Next, I select the bottom image and modify the color by reducing the saturation to nothing. This makes it greyscale. See the screenshot to the right.

Then save the image and optimize it. I save it as a transparent .PNG file, but you can also save it as a .jpg if you don’t need transparency. I personally use PNG Gauntlet to optimize the .PNG.

Then I load it into the image folder on my website, and put the following code in the CSS file:


.twitter {
float: right;
width: 96px;
height: 71px;
background: url('images/social/twitter-cup.png') no-repeat bottom;
margin: 17px 44px 4px 0;
}
.twitter:hover {
background: url('images/social/twitter-cup.png') no-repeat top;
}

My div has a class ‘twitter’. Then simply put the div in your website where you want it to appear. Just call it the same class and it will work like a charm. You can also wrap it with a link if you want it to be hyperlinked.

And that’s it! The simplest (I believe) way to have cool hover effects on your website, that works instantly since the image is already preloaded when the page loads.

See the footer of my web design site for a sample: See The Coffee Cup Here

If you implement this little trick, please let me know by commenting here or tweeting it!

BUT, as much as we all hate it, and struggle with it when we are new, if you can learn to design websites that work EVEN in IE6, then you will have become a much better designer.

Good web designers don’t care what their clients are going to use to look at their website, it’s just going to work.

Here are a few things I’ve learned in my struggle to tame the IE6 beast … Keep in mind, these are things I’ve learned through trial and error. And no rocket science here, just some simple rules to follow.

First, I always use pixels in sizing, never ‘em’s. Maybe this is something you never did, but I used to use tons of ‘em’s in my themes for spacing elements, with margins and padding. But somehow, ‘em’s aren’t correctly treated in older versions of IE. So I started using nothing but pixels for spacing, and got better results.

Second, I rely more on padding than on margins. Older IE versions tend to treat margins differently than other major browsers. So if there was an element that I could use either padding or margins, with the same effect, I would use the padding rather than the margin.

Third, wherever possible, I turn my .png files into .jpg files. I like to use transparency as much as anyone. But all too often I would be showing a cool new theme or website to a friend, on their computer, and the .png files would get a grey or pink background that totally messed up the look I was going for. So, if at all possible, I use .jpg files. Also, I don’t use transparent .css borders or font. IE6 doesn’t know what transparent means with anything at all!

Fourth, I don’t get crazy with creating graphical submit buttons or fields. IE has standard ones that they overlay onto the ones you create. So better to keep your submit buttons simple, either the default or some simple .css.

And my last tip is to test, test, test. Especially when trying a new technique and spending hours making it look perfect … in your favorite browser. There’s nothing more frustrating than getting it perfect and then finding out that in other major browsers (IE6 is not that major anymore but you get the point) it completely falls apart. Better to stick with simpler techniques that you can get to look good in all browsers.

Get an awesome web host!
Unlimited Domain Hosting Only $9.95 a Month

Check out this huge list of tutorials that can help you with every imaginable aspect of using Illustrator. Just dedicate yourself an hour or two a week, and in a year you will have mastered many different of the tools available.

Enjoy it!

Collection of Illustrator Tutorials

Anyway, go check out this list of 50 tutorials to help you create really cool 3D effects:

http://www.smashingmagazine.com/2009/06/16/50-excellent-3d-adobe-illustrator-tutorials