Problems with onMouseOver

[Porl123]

I've got an onMouseOver on a div, which when the mouse hovers over an element inside the div, it cuts out. It's probably because it just doesn't see the image as the div anymore but I was wondering if there's a way around it:

 

<script language="JavaScript" type="text/javascript">

function play_track(track) {

var box = document.getElementById('music');

var inf = document.getElementById('track-info');

if(track != 1) {

box.innerHTML = '<embed src="' + track + '" style="border: 0px; height: 0px; width: 0px" hspace="0" vspace="0" hidden="true" autostart="true" loop="true" allowscriptaccess="never" type="audio/mpeg"></embed>';

inf.innerHTML = '<b>NOW PLAYING:</b> blabla<br /><br />';

} else {

box.innerHTML = '';

inf.innerHTML = '';

}

}

</script>

<div id="track-info"></div>

<div id="main" style="width: 150px; height: 150px; background-image: url(none.jpeg)" onMouseOver="play_track('test.mp3')" onMouseOut="play_track(1)"><img src="button.jpeg" style="width: 50px; height: 50px" onclick="window.open('test.php', '_blank');" /></div>

<div id="music"></div>

 

If anyone knows a way around it cutting off when it goes over the image al be reet grateful. thanks!

[Psycho]

I have an idea that should work, but I'll leave it to you to implement.

 

First, create a global variable to set whether the mp3 is playing or not. If you only have one div for this functionality a simple true/false will work. If you have multiple divs then I would set the value of the variable to the "active" div.

 

Second, create a function that runs onload of the page. In that function have it process each of these divs in the following manner: 1) get the onmouse over event for the div, 2) recursively iterrate through each child element and apply the same onmouseover event to each child element.

 

Now, when you mouse over the image inside the div the function to play the track will also be called. But, I suspect that the song will start at the beginning again, which I doubt you want. So, there is a little more to do.

 

If the user is mousing DIRECTLY from one object to another there is only a millisecond of difference from the onmouseout to onmouseover triggers. So, for the mouseout event call a function first sets the gloable variable to "OUT" then uses a settimeout() call of about 1/10th of a second (or whatever works). that will in turn call another function which will check the global variable. If the global variable is still "OUT" it will stop the song and set the variable to FALSE. If not it does nothing.

 

Then, on the onmouseover events the function called will check the gloabl variable. If set to "OUT" that means the song is still playing and does not start the song again, but it sets the variable to TRUE. If se tto FALSE it will start the song - and sets the variable to TRUE

 

So, if the user mouses from one object in the div to another the progression would be like this:

 

0. If song is playing global var is set to TRUE

1. Mouseout function will set var to "OUT"

2. Mouseover function sets var to TRUE

3. Mouseout function (after .1 seconds) checks var and value is TRUE

4. Mouseout function does not stop the song