Thursday, 11 April 2013

How to - Play Sound on Image Hover



Design Tips
I have tried this method in both Google Chrome and Internet Explorer, and any crazy person still using Internet explorer can tune out now, this only worked in Chrome, but perhapse works in safari/Opera/Firefox?...
The code...

<audio id="mysound" src="URL OF SOUND (MP3)"></audio><center><a href="WEBSITE YOU WOULD LIKE THE IMAGE LINKED TO (IF ANY)" title="LINKED WEBSITE NAME (IF ANY)" target="_blank"><img src="IMAGE URL" onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause()"alt="LINKED WEBSITE NAME (IF ANY)" style="border: 2px solid #ffffff (OR "none" IF NO BORDER REQUIRED)" width="100" height="100"/></a></center> 

Now to explain the editable red sections of text above...
URL OF SOUND (MP3),  is the location of your sound to be played. You can get a free (limited) account from somewhere like FILEDEN  then upload any MP3 you want to use. once upload is complete, fileden supply you with the url of your sound.

WEBSITE YOU WOULD LIKE THE IMAGE LINKED TO (IF ANY), This is pretty self explanitory. If no link is required, you can delete the red text leaving only, <a href="".

title="LINKED WEBSITE NAME (IF ANY)" and alt="LINKED WEBSITE NAME (IF ANY)", are simply hover areas where text appears when you hover over the image in different browsers. If no names are required simply delete the red text leaving, title="" and/or alt="".

IMAGE URL, is again the loction of your image. You can get a free (limited) account from somewhere like FILEDEN  or use your google + photo's section, then upload any image you want to use.

border: 2px solid #ffffff, is the ability to add a border around the image. 2px makes the border 2px wide, solid makes the border "solid". #ffffff is the Hex Code for the colour white. For all the main colours you can also write the word, for example "white". This does not work for specific tints and tones of colours. Click HERE for my post on Hex Color Codes and a link to a great chart chart, it's one of the most comprehensive around. You can also simply copy a colour code from your blogger template designer.

width="100" and height ="100", control the dimensions of the image as seen on your blog.  To keep an aspect ratio on your images but make them smaller/larger, Scriptygoddess has a very useful size converter/calculator.


Now the all important GREEN sections. These must have a different word used every-time you use this code, or it will only work in the first instance!

That's about it as far as the code goes folks. Now just paste your completed code in either a HTML post or add a new Java/HTML Gadget.

If you have any questions at all, please contact me or comment below.

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me