Poner sonido a imágenes con JavaScript

[jeenicita]

Hola a todos

Bueno mi problema es el siguiente:
Soy relativamente nueva con esto de la programación, y estoy haciendo una página para niños, lo que esta debe hacer es que en las actividades por ejemplo "El abecedario" me muestre la imagen de cada una de las letras y su respectivo sonido, ya tengo hecha la parte de las imágenes, pero no he podido hacer la parte del sonido, he intentado con HTML5 y no pude, leí que con JavaScript era más sencillo, y he tratado de hacerlo, pero no ha sido posible.

El código es para mostrar es las imágenes es el siguiente:

dentro del head:

<script language="javascript">
var NumImg=0;
function RotarA()
{
NumImg=NumImg+1;
Imagen();
}
function RotarAT()
{
NumImg=NumImg-1;
Imagen();
}
function Imagen()
{
switch(NumImg)
{
case 1:
document.getElementById('Graf').src = "A.jpg";
break;
case 2:
document.getElementById('Graf').src = "B.jpg";
break;
case 3:
document.getElementById('Graf').src = "C.jpg";
break;
case 4:
document.getElementById('Graf').src = "D.jpg";
break;
case 5:
document.getElementById('Graf').src = "E.jpg";
break;
}
}

</script>

((Bueno y así con todas las letras))

en el body:

<div id="Contenido" align=center>

<table>
<tr>
<td>
<input id="M2" value="<<" id="Atras" type="submit" onClick="RotarAT()"/>
</td>
<td>
<img id="Graf"/>
</td>
<td>
</td>
<td>
<input id="M1" value=">>" id="Adelante" type="submit" onClick="RotarA()"/>
</td>
</tr>

</table>

Y esto es lo que llevo, si alguien me puede ayudar le agradecería mucho

Una vez más Gracias

[Dradi7]

el error esta en que estas usando un input de tipo submit cambialo por tipo button

[xIamAlex]

1 - ¿No es más fácil si llamas directamente a las imágenes 1.jpg, (A) 2.jpg, (B) etc?, y de lo único que te tienes que preocupar es del número. Luego haces algo como:

document.getElementById('Graf').src = numero + ".jpg";

Y con las funciones la rotas.

2 - Para el sonido, tienes dos opciones, usar HTML5 o Flash, con flash creas un código embeded y con javascript muestras la etiqueta, sino con HTML5 también se puede pero no todos los navegadores reproducen los mismos formatos de audio:

http://www.w3schools.com/html5/html5_audio.asp

Y después para reproducir la etiqueta de audio utilizas el método Play() o play() de getElementById (No me acuerdo si Mayúscula / Minúscula), sería algo así:

document.getElementById('etiqueta_de_sonido').play (); // Play();

[jeenicita]

Muchas gracias xIamAlex tu respuesta fue de mucha ayuda, era justo lo que necesitaba.

Gracias!

[jeenicita]

ahora tengo otro problema xIamAlex cuando llego a la última imagen, pero le doy click sigue "Cambiando" a pesar que ya no haya más imágenes, como hago para que al llegar a la última imagen Ejemplo la z, no me permita seguir más?

[xIamAlex]

Reemplaza:

Código HTML:

var NumImg=0;
function RotarA()
{
NumImg=NumImg+1;
Imagen(); 
}
function RotarAT()
{
NumImg=NumImg-1;
Imagen(); 
}

Por:

Código HTML:

var Max = 27; // Este es el número máximo de imágenes.
var Min = 1;
var NumImg = 1;

function RotarA()
{

if(NumImg < Max){

NumImg=NumImg+1;
Imagen(); 

}

}
function RotarAT()
{

if(NumImg > Min){

NumImg=NumImg-1;
Imagen(); 

}

}