Refrigerator Magnets with CSS + JavaScript

After seeing The Big Word Project, I thought it was a great idea, but not certain about the longevity of sucha project. If I am going to be looking for a samurai, is this the place I am goign to look? Maybe I am jealous?! Still they present words in a great way. What comes to mind when I see it is a refrigerator magnet.

So let's create one. Here is one that both are magnets and movable. This is purely an experiment and using a beta library, so it currently only works in firefox.

the demo (and they are draggable)

Man to man is so unjust, children
You don’t know who to trust
Your worst enemy could be your best friend
And your best friend your worst enemy

the asset

All you need is one image that we will apply css sliding door technique to.

the magnet css code

Basically it's an "a" tag wrapped in a span tag, and with a little css work, and voila.

<a href="#" class="magnet"><span>i am a magnet</span></a>

.magnet 
{
	/** these are important to not conflict with a:link **/
	text-decoration: none !important;
	color: #2a2a2c !important;
	
	position: relative;	
	padding: 0 0 0 10px;
	margin:	0 1em;
	
	height: 30px;
	float: left;
	color: #000;	
	background:	
	#fff url(../i/magnet-bg.gif) top left no-repeat;
	
	font-size:	10px;
	font-weight:	 bold;
	text-decoration: none;
	letter-spacing: 1px;	
	overflow: hidden;

}

.magnet span
{
	padding: 3px 10px 0 0;
	display: block;
	height: 26px;
	background: 
	#fff url(../i/magnet-bg.gif) top right no-repeat;
}

.magnet:hover
{
	background-position:0 -30px;
	
	/** important to not conflict with a:link **/
	color:#fff !important;
}
.magnet:hover span
{
	background-position:100% -30px;
}

the javascript

Technically you don't need JavaScript as demoed above. But, it really does help to automate things, and make it draggable like a true refrigerator magnet. I am using mootools to ease the burden. Download the source code to see how, but in simple steps.

1. Find all paragraph tags with class "magnets"
2. Take each word in anchor and span tag
3. Make each anchor tag draggable
4. Create a new paragraph and insert new anchors
5. Replace old paragraph with new one

download the source