JavaScript - Click Image For Sound?

Hi

I'm wanting to add a sound to an image when it is clicked. Basically when you click a picture of a mouse is squeaks.

Can someone help me with the code for this?

I think its Javascript which is a aboit scary for me ha!

I'm hoping its not to complicated and confusing for my brain!!

Cheers

C

I'm trying to make a website where when certain keys are pressed, (in this example the key can be "a") it triggers an image change and plays a sound that loops at the same time. Is this possible? I also wanted to have a function where if you click a certain area it changes the sounds for each key to a different one. Should the whole script be nested within an if else statement where if that function is clicked, it causes the sounds to be the second set and if it isn't, they play as the normal set? I'd also prefer to not use HTML5 audio tags if possible.

I have an on/off image piece of code: (probably out of date!)

Code:

<!--
var NN3 = false;
image1= new Image();
image1.src = "photo1.gif";
image1on = new Image();
image1on.src = "photo2.gif";
function on3(name)   {
        document[name].src = eval(name + "on.src");
}
function off3(name)  {
        document[name].src = eval(name + ".src");
}
NN3 = true;

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {
        if (NN3) off3(name);
}
// -->

My problem is that I am trying to add sound to the clicking and mousing out of the image. Without sound, it works (and works exactly the way I want it to) like this;

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');" onmouseover="off('image1')">
<img src="photo1.gif" name="image1"></a>

Adding (flash)sound I can do this and it works OK too:

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');mySoundObj1.TGotoAndPlay('/go','start'); return true;" onmouseout="off('image1');">
<img src="photo1.gif" name="image1"></a>

But what I want to occur is that a second "swish" sound happens onmouseout (in the red place below) but ONLY if the mousedown has already occurred:

Code:

<!--
...

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {

 [SWISH SOUND HERE] 

        if (NN3) off3(name);
}
// -->

I hope this doesn't read complicated. I know it's really a simple toggle with an if, but I've tried dozens of things to no avail.

I have to replicate this many hundreds of times in a website...and I have to stick with flashsound (which I like anyway).

Any help would be appreciated.

Hi

I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.

Here code I have now....

Code:

<style type="text/css" media="screen">

#wrapper {
 background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
  width: 470px;
  margin: 0 auto;
}

a#sun{
  background: url('_assets/images/sun-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
  
}

a#sun:hover,
a#sun.active {
  background: url('_assets/images/sun.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#plane {
  background: url('_assets/images/plane-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#plane:hover,
a#plane.active {
  background: url('_assets/images/plane.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#nano {
  background: url('_assets/images/nano-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#nano:hover,
a#nano.active {
  background: url('_assets/images/nano.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}

#popuptext a {
color: #ff6600;
padding: 0 30px; 
}




</style>


</head>
<body>

<div id="wrapper">
<div id="navigation">
  <a id="sun" href="#"></a>
  <a id="plane" href="#"></a>
  <a id="nano" href="#"></a>
</div>

<div style="clear:both"></div>
  <div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a> 

</div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

  // target each link in the navigation div
  $('#navigation a').click(function() {
    // link that you clicked
    clicked = $(this).attr('id');

    // make sure that all the others are not active
    // except for the clicked one
    $('#navigation a').each(function() {
      if ($(this).attr('id') == clicked) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });

    // prevent the default link action
    return false;
  });

});
</script>

What jquery or javascript code do I need to do this?

thanks,
chaser

Hi,

I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website?

Thanks!

Hi,

I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file).

I assume this would use the onclick event.

Can anyone help?

I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript?

Thanks in advance.

I'm sure this question has been asked, but I tried searching for this answer using many different keywords, but I don't know the correct terminology for my question, as the search results turn up other topics. I'm wondering if there's simple code for clicking on a thumbnail to have a larger version of the picture appear above, but still within, the same webpage, and the background darkens a little. The larger picture has a "close" button, which you click to get back to the underlying original page. An very simple example of the type I'm looking for is he

http://www.salon.com/comics/tomo/200...omo/index.html

I'm assuming this is a java script that does this. I'm using DreamWeaver. Does Adobe have this type of coding in their "Spry" coding? If not, is there a simple template of the code out there? Thank you for any help.

Hello everyone

So I'm new and I have searched but I still got two questions.

I'm gonna use the backbox scrip on my site and of course I got it from javascriptkit.com but - I would like to close the image not only by clicking outside of box or at the Close-button - but also by clicking the image itself.

The orignal script works really well - except for one small thing - when the backbox displays large images - I can't close them by clicking outside the image on the left and right sides - it only works closing when I click above or under the box.

Anyway; internet gave me this small code:

Code:

objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( !/(prevLink)|(nextLink)/.test(clickObj) ) {
				myLightbox.end();
			}
		};

And I was wondering if you guys know where to put it in the lightbox.jg file for it to work (or if it even will work at all?) - Or maybe I can change the original code for this to happen (Without adding this new code?)

Me then - I have notepad + + and I just recently learned CSS - Java is a tad more complicated when I look at the code

The last question I have is if you guys got any good site for me to read and learn Java? Like I need to understand the logic behind it - how it thinks. I just learned how CSS "thinks and acts" a few months ago - but I guess Java isn't anything like that.

Regards
Fredrik

Overlapping Image Viewer Script
http://www.javascriptkit.com/script/...geviewer.shtml

It works perfectly. Just as advertised. It currently changes the images with the mouse over and out effect.

But I would like to change it so that the visitor must click on the thumbnail image to enlarge it and to click on the enlarged image to send it back to thumbnail size.

It would also be helpful to have the enlarged image appear about 25 px below the top of the thumbnail while remaining flush with the left side.

Thank you for your time .... viki barefoot

hi master.

I need some help.

I need a function that change multiple images on click maybe by id
Ex.:
PHP Code:
<table>
.....
<td><img src="folder1/image1.jpg"></td>
<td><img src="folder1/image2.jpg"></td>
<td><img src="folder1/image3.jpg"></td>

<td><img src="folder2/image1.jpg"></td>
<td><img src="folder2/image2.jpg"></td>
<td><img src="folder2/image3.jpg"></td>
.....
</table> 


NOW BUTTONS (IMAGES)
PHP Code:
<!-- clicking this imagen will change to another button image and will change the folder1/image1.jpg and folder2/image1.jpg --> 
<div><img src="buttons/buton1.jpg" alt=""></div>

<!-- clicking this imagen will change to another button image and will change the folder1/image2.jpg and folder2/image2.jpg --> 
<div><img src="buttons/buton1.jpg" alt=""></div>
<div><img src="buttons/buton2.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div>

<!-- clicking this imagen will change to another button image and will change the folder1/image3.jpg and folder2/image3.jpg --> 
<div><img src="buttons/buton3.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> 


really, I don't know much about javascript, I'm waiting for your help.
actually, I have loaded jquery-1.2.6.min.js

I have a sitelock.com image on my website that when clicked on, shows info that my site is verfifed through them. However, when clicking on the image it opens up in a whole new window.
Pathetic sitelock.com will offer no support in getting this in a popup window.

I need some help please in getting this to open in a popup window that I can resize to any size I want and to only have the address bar showing up top, no toolbars or anything else.

My website is in joomla and I have a plugin called 'sourcerer' that will allow me to insert code anywhere i want.

Here is the code that sitelock.com gave me:

<a href="https://www.sitelock.com/verify.php?site=ecig-skins.com" target="_blank" ><img alt="website security" title="SiteLock" border="0" src="//shield.sitelock.com/shield/ecig-skins.com"/></a>

Any help is appreciated

I have built a webpage that is all one template and the use of an iframe to change the content and not reload the page graphics every time. The way the page is laid out is a background image in the farthest back table behind another table of a background image that is transparent and over lays the bottom table image.

I want the menu buttons; with the existing rollover image for them alone, to change the bottom layer background image "on click".

The only code sources i have found will swap images in the same table area and not to any image existing in the entire document.

thanx

Dear Friends,

I am breaking my head over this since yesterday. Can anyone help me with a javascript which can be used to replace the inner text (count of downloads) with new text based on how many people save my image using Right-Click Save Image As option.

Thank you

PS: Without database support.

Code:

<table border="0" cellspacing="1" cellpadding="1" width="200">
    <tbody>
        <tr>
            <td><img border="0" id="s1" alt="" src="s1.gif" /></td>
            <td><img border="0" id="s2" alt="" src="s2.gif" /></td>
        </tr>
        <tr>
            <td style="text-align: center">7 Download(s)</td>
            <td style="text-align: center">1 Download(s)</td>
        </tr>
        <tr>
            <td><img border="0" id="s3" alt="" src="s3.gif" /></td>
            <td><img border="0" id="s4" alt="" src="s4.gif" /></td>
        </tr>
        <tr>
            <td style="text-align: center">0 Download(s)</td>
            <td style="text-align: center">10 Download(s)</td>
        </tr>
    </tbody>
</table>