Electric Mouse... are we talking about Pikachu or a computer mouse? Both... XD Here's a little code that can be used for a fun mouse click effect.
Sorry, if you're viewing this on a cursorless device, you won't be able to see it. I love my phone, but I do sometimes miss some of the special mouse click and mouse over effects that you get from viewing sites on a computer.
<body 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>
<img src="starspark.gif" alt="" id="spark" style="position:fixed; top:-30px; left:-30px; z-index:1;">
Here's how it works, there is an image, in this case, starspark.gif, that load outside of the screen. This gif only 29x29 so if I put it at -30, 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. Of course, 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 a (links and other clickable elements) position:relative; z-index:2; to ensure they are above the gif and it doesn't stop them from being clickable.
Try out a different gif mouse effects I made by clicking inside these rectangles:
Sorry, if you're viewing this on a cursorless device, you won't be able to see it. I love my phone, but I do sometimes miss some of the special mouse click and mouse over effects that you get from viewing sites on a computer.
<body 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>
<img src="starspark.gif" alt="" id="spark" style="position:fixed; top:-30px; left:-30px; z-index:1;">
Here's how it works, there is an image, in this case, starspark.gif, that load outside of the screen. This gif only 29x29 so if I put it at -30, 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. Of course, 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 a (links and other clickable elements) position:relative; z-index:2; to ensure they are above the gif and it doesn't stop them from being clickable.
Try out a different gif mouse effects I made by clicking inside these rectangles:
Here's some of my pikachu art because I can never have too many pikachus, my favorite pokemon. ♥ If you're just here for the code, you can return to the main page.
If you want to see more art, you can visit my gallery and blog. Or you can go look at other pages on this site by returning to the index.
