From the title of this post it may not be immediately understandable what this post is about, but plenty of people are looking for this solution.
Many have asked how do I set the image for sharing/bookmarking links? They are referring to Facebook, Twitter, MySpace, LinkedIn etc. when someone choosing to share an article/link on one of these sites from your website there is an opportunity to share a thumb with the post. What the social websites do is scrape the page for a selection of images, sometimes that’s fine, sometimes it doesn’t serve up any related images.
Creating circles with CSS is very simple, but not very well supported. If your design depends on circles you should definitely use background images, but if your audience is tech savvy or you just don’t care the following styles will work in Firefox, Safari and a few others I’m sure:
Automatic Method:
You should now simply use: http://jigsaw.w3.org/css-validator/check/referer?profile=css3
Manual Method:
Typically if you want to dynamically link to a W3C Valid CSS page, we use this link:
http://jigsaw.w3.org/css-validator/check/referer
That’s perfect if you’re using ALL CSS2.1 as that’s the default checker, but if you implement even 1 CSS3 style you’ll fail validation. So, we can no longer use the referer method until CSS3 becomes highly supported to the mainstream.
Demo:
Code:
CSS
.hov{
display:block;
width:245px;
height:195px;
background:url(‘images/image1.png’)}.hov:hover{
display:block;
width:245px;
height:195px;
background:url(‘images/image2.png’)}
Change the background URL to your image locations and adjust the width and height appropriately.
XHTML
Change # to whichever URL you wish.
Avoid Flicker on Image Rollover
This happens because the 2nd image only loads on mouseover/hover. We can avoid this by preloading the images(s) and this can still be done non-JavaScript with CSS:
CSS
.preload{display:none}
XHTML
This will preload the images without showing them or messing up your design. Use this method to preload all secondary images (the images to be seen on rollover). This is a much more reliable and lightweight method than the JavaScript alternative.
That’s it. There is certainly more style and techniques you can add, but this is THE most minimal way to create a rollover image effect, if it’s possible to get simpler, let me know.
Enjoy.
Thanks, Bryan
This is in no way intended to be a definitive be-all-to-end-all list, but hopefully some may find it helpful. I’ve certainly made some of these mistakes in the past, we’re always learning and the best instance of learning is when you learn something you may be doing wrong, admit it and come out more knowledgeable from the lesson or experience.
I would love to hear other ideas of what should go on the list or if you disagree with anything on the list, remain respectful and polite and you’re bound to be heard.
I’ll be sure to add more as I go along, but here’s the list I’ve created so far, enjoy:
