Bonjour,
j'ai une petit problème avec un iFrame youtube.
J'utilise une image ("cursor.png") que je recalibre sur mon curseur afin qu'il le suive grâce à :
Mais quand je passe sur mon iFrame youtube mon curseur perso reste bloqué à la limite de l'Iframe et ne suit plus du tout mon curseur.
Après un peu de recherche sur le net, j'ai vue que une fois sur l'iframe. L’événement onmousemove n'est plus capturé.
Depuis je bloque et je suis totalement perdu.
Voilà mon script :
j'ai une petit problème avec un iFrame youtube.
J'utilise une image ("cursor.png") que je recalibre sur mon curseur afin qu'il le suive grâce à :
<script type="text/javascript">
//<!--
document.onmousemove = suitsouris;
function suitsouris(evenement)
{
if(navigator.appName=="Microsoft Internet Explorer")
{
var x = event.x+document.body.scrollLeft;
var y = event.y+document.body.scrollTop;
}
else
{
var x = evenement.pageX;
var y = evenement.pageY;
}
document.getElementById("cursor").style.left = (x-4)+'px';
document.getElementById("cursor").style.top = (y-7)+'px';
}
</script>
Mais quand je passe sur mon iFrame youtube mon curseur perso reste bloqué à la limite de l'Iframe et ne suit plus du tout mon curseur.
Après un peu de recherche sur le net, j'ai vue que une fois sur l'iframe. L’événement onmousemove n'est plus capturé.
Depuis je bloque et je suis totalement perdu.
Voilà mon script :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>CONNECTING TO SERVER</title>
<style type="text/css">
body { color: #ffffff; background: #000000; }
</style>
<!-- CSS Style for the background slider -->
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript">
//<!--
document.onmousemove = suitsouris;
function suitsouris(evenement)
{
if(navigator.appName=="Microsoft Internet Explorer")
{
var x = event.x+document.body.scrollLeft;
var y = event.y+document.body.scrollTop;
}
else
{
var x = evenement.pageX;
var y = evenement.pageY;
}
document.getElementById("cursor").style.left = (x-4)+'px';
document.getElementById("cursor").style.top = (y-7)+'px';
}
</script>
</head>
<body>
<header>
<!-- END INFOBOX -->
<!-- Loader (for some reason this refuses to use CSS) -->
<div id="loading"><p style="position: absolute; right: 20px; bottom: -5px; border:1px; border-style:solid; border-color:#000000; background: #000000; padding: 0.5em; width: 260px; opacity: 0.85;"><font face="verdana" size="4">Chargement serveur</font><font color="#000000">#</font><img src="img/loading.gif" style="width:20px;height:20px;"></p></div>
<!-- END LOADER -->
<!-- Logo (for some reason this refuses to use CSS) -->
<div id="logo"><p style="position: absolute; left: -0px; bottom: -15px;"><img src="img/logo.png"></p></div>
<!-- END LOGO -->
<!-- Infobox slider -->
<!-- END INFOBOX SLIDER -->
<!-- Background Slider -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.js"></script>
<script src="js/lj-safety-first.js"></script>
<script src="js/music-ctrl.js"></script>
<!-- END BACKGROUND SLIDER -->
<img src="img/cursor.png" id="cursor" style="position:absolute;width: 35px;"/>
<div id="player">
<iframe id="youtube" onmouseover="iFrameStopMove;"
src="https://www.youtube.com/embed?listType=playlist&list=PLjqWQYQy_xSbjBwRJz6pR2kWthUMvCn2I&controls=0&disablekb=1&modestbranding=0&autoplay=1&rel=0&showinfo=0&start=1"
</iframe>
</div>
<!-- Loadscreen time out -->
<script>
var timer = setTimeout(function() {
window.location='timeout.html' <!-- redirection path -->
}, 141000); <!-- Time out in milliseconds before redirect -->
</script>
<!-- END LOADSCREEN TIME OUT -->
</body>
</html>