When you go to
VideoCopilot you'll notice when you hover over the preview images of the tutorials you'll see a video show shows up, and it shows you the video in action. Well today I'm going to show you guys how you can achieve that hover effect.
The first thing you're going to need to do is download the compressed zip file
here to get the javascript and css files you'll need for this tutorial.
Now that we got files we need lets create a new file, and start putting down our code in order for our images to have that hover effect.
First off lets create our head tags.
<head>
</head>
Now lets incorporate thoughs files you just downloaded.
<head>
<script type='text/javascript' src='js/mootools.js'></script>
<script type='text/javascript' src='js/blenderpimp.js'></script>
<link type='text/css' rel='stylesheet' href='css/floater.css' />
</head>
Now lets add in our body tags.
<head>
<script type='text/javascript' src='js/mootools.js'></script>
<script type='text/javascript' src='js/blenderpimp.js'></script>
<link type='text/css' rel='stylesheet' href='css/floater.css' />
</head>
<body >
</body>
Now inside your body tags add in
<a href="http://blenderpimp.tk/tutorials/"><img src="holdingfire.jpg" width="320" border="0" onmouseover="showtrail('fireinhandsorig.flv', 'video','Holding Fire',320,240,0,'hqmedia','');" onmouseout="hidetrail();" /></a>
Now your full code in your new index.html file should now look like this.
<head>
<script type='text/javascript' src='js/mootools.js'></script>
<script type='text/javascript' src='js/blenderpimp.js'></script>
<link type='text/css' rel='stylesheet' href='css/floater.css' />
</head>
<body >
<a href="http://blenderpimp.tk/tutorials/"><img src="holdingfire.jpg" width="320" border="0" onmouseover="showtrail('fireinhandsorig.flv', 'video','Holding Fire',320,240,0,'hqmedia','');" onmouseout="hidetrail();" /></a>
</body>
: Don't forget to change the names of your images, and videos.
Click Here: to see it in action.
