Electric Mouse

If you're viewing this on a cursorless device, you won't be able to see it. I love my phone and tablet, but I do sometimes miss some of the special mouse click and mouse over effects that you get from viewing sites on a computer. Here's a little code that can be used for a fun mouse click effect.

<div onclick="sparkling();">
<script>
function sparkling() {
var sparktop = event.clientY - 15;
var sparkleft = event.clientX - 15;
document.getElementById("spark").style.top = sparktop + "px";
document.getElementById("spark").style.left = sparkleft + "px";
document.getElementById("spark").src = "starspark.gif"; }
</script>
</div>
<img src="starspark.gif" alt="" id="spark" style="position:fixed; top:-30px; left:-30px; z-index:1;">

This is how it works, there is an image, in this case, starspark.gif, that loads outside of the screen. This gif is only 29x29 so if I put it at -30, that way it won't be visible. When a mouse click is detected, the image is moved to the position of the mouse minus 15, so that the center of the image is where the mouse click is.

All of these numbers depend on the size of the image being displayed. The final part of the effect is that starspark.gif only plays its animation once. This is not a requirement, I just like the effect of little stars appearing when you click and fading away.

You should also add the this CSS to links and other clickable elements to ensure they are above the gif and it doesn't stop them from being clickable:

position:relative; z-index:2;

Try out a different gif mouse effects I made by clicking inside these boxes: