The first thing you'll want to do is put all of your gifs into an array. The more gifs you put into the array, the more random the gif player will seem. For demonstration purposes, we'll just use 4 gifs. You should use more than 4 though.
var gifs = ['images/gif.gif', 'images/gif1.gif',
'images/gif2', 'images/gif3.gif'];
Next we'll create a function called PlayRandomGif(). This function will be the one that gets called when you hover the mouse over something.
We'll use the variable numGifs to hold the number gifs in your array. gifs.length will give you the current number of elements in your gif array, and the +1 is to account for the whole "computers start counting at 0 instead of 1 because they wanna be cool and different" thing.
We're also going to need a random number between 0 and numGifs, which will be stored in the var rand. The formula for a random number between two numbers is Math.random * (max - min) + min. Max is the number of gifs and min is just 1 in our case.
Math.floor is just there to round down to the nearest integer. It's important to have an integer, otherwise the switch statement wont work.
The switch statement just looks at the variable you give it, which is rand. Then it says if rand is equal to 1, build the 1st gif in the array. If rand is equal to 2, build the 2nd gif in the array. And so on.
var numGifs = gifs.length + 1;
function PlayRandomGif()
{
var rand = Math.floor((Math.random() * (numGifs - 1) + 1));
switch(rand)
{
case 1:
BuildGif(0);
break;
case 2:
BuildGif(1);
break;
case 3:
BuildGif(2);
break;
case 4:
BuildGif(3);
break;
}
}
BuildGif() is the next function we'll need. BuildGif recieves the index of the gif to be played. The index is just the position of the gif in your array.
In the first line, document.createElement('img') adds a new object to the html page with the name 'img'.
The second line assigns the new element a gif to play from the array. The last line puts your gif inside 'gif-panel', which in my case is an invisible box near the D.B. Deathray logo.
function BuildGif(index)
{
var gif = document.createElement('img');
gif.src = gifs[index];
gif.style.maxWidth = "100%";
document.getElementById('gif-panel').appendChild(gif);
}
The last thing we'll need is a function to remove the gif when the mouse is no longer hovering over our object.
The first line retrieves the first child of 'gif-panel', which is the gif we just put there.
The next line removes the gif, stored in the var 'element', from your html page.
The if statement is to make sure the element gets removed. It says if the gif is still there, do the first two steps again.
function RemoveGif()
{
var element = document.getElementById("gif-panel").firstChild;
element.parentNode.removeChild(element);
if(element != null)
{
RemoveGif();
}
}
The only thing left to do is to make a place on your HTML page for your mouse to hover over. The HTML will look something like this:
<a href="#" onmouseover="PlayRandomGif()" onmouseleave="RemoveGif()">Hover over ME!</a>
This will call the function PlayRandomGif() when you hover over the a link, and will call RemoveGif() when the mouse leaves the a link.
Give it a try with the link below.