Activar audio al pasar el ratón sobre una imagen y a su vez redirigir a otra URL

[Byte75]

¡Hola a todo el mundo! Soy nuevo aquí, de modo que ante todo saludos y gracias de antemano

Vereis, tengo una web en wordpress en la que uso una "intro" con un botón de "enter web". Cuando la gente pulsa ese botón, aparece un gif de un cartucho de dinamita que se prende y estalla, el efecto lo he logrado con este código:

<p style="text-align: center;"><a onmouseover="image1.src='IMAGEN 2';" onmouseout="image1.src='IMAGEN 1';" href="URL DE ENVIO"><img class="aligncenter" style="border-style: initial; border-color: initial; border-image: initial; border-width: 0px;" src="IMAGEN 1" alt="" name="image1" width="144" height="115" border="0" /></a></p>

Pero he conseguido un efecto de audio para que se oiga la explosión en waw o mp3 y no logro encontrar el truco para que al pasar el mouse sobre la imagen se reproduzca.

¿Alguien sabe qué trozo de código debo añadir? O en su defecto ¿algún truco sencillo para esto? Mis conocimientos de html/javascript son justitos y no me entero mucho ni con tutoriales.

Recordad que no basta con que al pasar el mouse se reproduzca el sonido, también debe enviarme a la web principal como ya hace ese código que he puesto.

He rebuscado bien antes de preguntar y aunque he encontrado temas parecidos, ninguno es exactamente lo que busco. ¡Saludos!

[emprear]

En primer lugar, bienvenido. Para hacer lo que querés tenés varias opciones, e involucran a javascript

Tené en cuenta que el sonido va a demorar algo en cargar siempre, por lo que la redirección no tiene que ser automática. Lo ideal es que conviertas tu mp3 a swf (audio flash), podés usar algun software o converspres online como este
http://www.freefileconvert.com

El flash es más fácil de controlar desde javascript que el tag audio de html5.

Ahora, la substitución de la imagen hacela con css (averiguá sobre l uso de la pseudoclase hover), posteriormente tenes que crear una función de javascript, que se active con el evento onmouseover, y esta función debe de hacer 3 cosas, reproducir el audio, crear una demora y hacer la redireccíón.

Antes de ver lo del javacript, tenes que insertar el flash(tu audio mp3 convertido)

en el html usas esto

Código HTML:

<object type="application/x-shockwave-flash" data="acdc.swf" width="1" height="1" id="audio">
<param name="movie" value="acdc.swf" />
<param name="loop" value="false" /> 
<param name="menu" value="false" />
<param name="play" value="false" />
<param name="bgcolor" value="#8897db" />
<p class="getadobe">Flash Palyer no se encuentra o la versi&oacute;n no es compatible, utiliza el icono para ir a la p&aacute;gina de descarga <br />
<a href="http://get.adobe.com/es/flashplayer/" onclick="this.target='_blank'">Descargar Flash Player</a>
</p>
</object>
 

como tiene 1x1 de medida va a estar invisible
El javascript sería asi

Código Javascript:

<script type="text/javascript">
//<![CDATA[
// esta función hace la redirección
function redirigir(){
window.location.href = "http://url_redireccion";
}
 
// Esta obtiene el valor del elemento que tiene el flash (el object de id "audio")
function ObtenerFlash(idAudio){
return document.getElementById(idAudio);
}
 
// finalmente la reproducción usa el método Play() para iniciar el flash
// y a continuación ejecuta la redirección con una demora de 15 segundos
function ReproducirAudio(){
var elAudio=ObtenerFlash("audio");
elAudio.Play();
 
r = setTimeout('redirigir()', 15000);
}
//]]>
</script>
 

finalmente en la imagen, onmouseover='ReproducirAudio();'

Tendrás que evaluar la duración del sonido (y o que tarde en cargar), y del gif animado, para ajustar los tiempos convenientemente.

Hay otras formas. pero esta me parece sencilla de implementar.
Ah, y revisá esto

Código HTML:

<p style="text-align: center;"><a onmouseover="image1.src='IMAGEN 2';" onmouseout="image1.src='IMAGEN 1';" href="URL DE ENVIO"><img class="aligncenter" style="border-style: initial; border-color: initial; border-image: initial; border-width: 0px;" src="IMAGEN 1" alt="" name="image1" width="144" height="115" border="0" /></a></p>
 

para hacer la substitución con css

sAludos

[Byte75]

Muchas gracias por responderme

Este código ¿donde se pone? Ya te comenté que mis conocimientos son justitos jeje...

Un saludo :)