Jump to content

Pass the mouse over a image and get a video


jdrc12

Recommended Posts

i have a code to change a imagen to another by passing the mouse over. What i want is that when i pass the mouse over the image, this convert to a video, i am a beginner in this and i tried a lot but i can't solve this.

 

This is my code:

<head><script language="JavaScript">{alt0 = new Image();alt0.src = "img0.png";alt1 = new Image();alt1.src = "gif1.gif";alt2 = new Image();alt2.src = "gif2.gif";alt3 = new Image();alt3.src = "gif3.gif";graphic1= new Image();graphic1.src = "img1a.png";graphic1on = new Image();graphic1on.src = "img1b.png";graphic2= new Image();graphic2.src = "img2a";graphic2on = new Image();graphic2on.src = "img2b";graphic3= new Image();graphic3.src = "img3a.png";graphic3on = new Image();graphic3on.src = "img3b.png";}function imageChange(imageID,imageName,imageID2,imageName2,imageID3,imageName3) { {document.images[imageID].src = eval(imageName + ".src");document.images[imageID2].src = eval(imageName2 + ".src");document.images[imageID3].src = eval(imageName3 + ".src");}}</script><body><center><table border="0"><tr><td><a onmouseout="imageChange('global','alt0','one','graphic1')" onmouseover="imageChange('global','alt1','one','graphic1on')"><img border="0" name="one" src="img1a.png" /></a></td><td><a onmouseout="imageChange('global','alt0','two','graphic2')" onmouseover="imageChange('global','alt2','two','graphic2on')"><img border="0" name="two" src="img2a.png" /></a></td><td><a onmouseout="imageChange('global','alt0','three','graphic3')" onmouseover="imageChange('global','alt3','three','graphic3on')"><img border="0" name="three" src="img3a.png" /></a></td></tr></table></center><center><table border="0"><tr><td><img height="290" name="global" src="img0.png" width="530" /></td></tr></table></center></body></head>

i actually use a gif but this images are very slow to load so i used the "gfy" page, that convert the gif to a video.

 

This is the link to the "gfy": http://gfycat.com/ShockingDependableHogget

 

and this is the code:

<video id="gfyVid1" class="gfyVid" width="646" height="326" autoplay="" loop="" muted="muted" style="display: block;"> <source id="mp4source" src="//zippy.gfycat.com/ShockingDependableHogget.mp4" type="video/mp4">             </video>

So, what i want is replace the gif image for this video...

Thank for reading and sorry for my english.

Edited by jdrc12
Link to comment
Share on other sites

The code to do that is completely different, you need code to swap one element with another one instead of just changing the src of an img element. One way to do that would be to have all of the elements on the page to start with and just use CSS to hide or show different elements. You could also use DOM methods to create elements and add them to the page while removing other elements.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...