/    Sign up×
Community /Pin to ProfileBookmark

using an image instead of button ?

Hi everybody, I am fairly new to javascript but am trying to absorb it:eek:

I was looking for a way to play a .wav sound when am image is clicked. Someone very graciously provided me with the code. It works fantastic!
It forms an input button to click and play the wave file, but I just can’t figure out how to do it with an image instead of a button.
Thanks very much to “rnd me” for posting that code! Here it is below. Maybe someone can tell me how to use an image.
Thanks , John

[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>testing ability to play wav files</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>
<body>

<input value=’Click for a good laugh’ type=’button’ onclick=”playme(audioURL)” />

<script type=’text/javascript’>

audioURL=”http://mountaindream.freeoda.com/pages/laugh.wav”;

function playme (url){

if(“v”==”v”){ //IE:
var audio=document.createElement(“div”);
document.body.appendChild(audio);
audio.innerHTML= ‘<object height=”10″ width=”1″ style=”left:-9999px; height: 0px; width: 0px;”
CLASSID=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″>n
<PARAM name=”autoStart” value=”TRUE”/>n
<PARAM name=”UIMode” value=”mini”/>n
<PARAM name=”URL” value=”***” />n
</object>’.replace(“***”, url);
}else{
var audio=document.createElement(“audio”);
audio.src=url;
audio.play();
}
}//end playme

</script>
</body>
</html>
[/code]

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@KorFeb 16.2011 — Give your button value="" and give it a CSS class with certain width, height and an image as background
×

Success!

Help @keytone spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...