Problem with onmouseover function

[DenverMarc]

Hello,

I'm using an onmouseover and onmouseout event to change the image and text of one div when I hover over some thumbnails in another div.

It seems to work fine if I move the mouse somewhat slowly from one thumbnail to another, but if I move the mouse quickly, the text changes but the image doesn't.

I tried adding a preload event (I hope I did it correctly) but that still didn't seem to solve the problem. It also only seems to be an issue in Firefox (works in Safari, Chrome and even IE).

Here's my preload:
<script type="text/javascript" language="JavaScript">
<!--

if (document.images) {
preload_image_object = new Image();
// set image url
image_url = new Array();
image_url[0] = "images/TeamOne.jpg";
image_url[1] = "images/TeamTwo.jpg";
image_url[2] = "images/TeamThree.jpg";
image_url[3] = "images/TeamFour.jpg";

var i = 0;
for (i = 0; i <= 3; i++)
preload_image_object.src = image_url;
}

//-->
</script>

Here's the change function (in a separate javascript file):

function $(sName) {

return document.getElementById(sName);
}


function changeTeammate(teammate) {

if (teammate == "one") {
$("TeamBioImage").src = "images/TeamOne.jpg";
$("TeamBioTextOne").innerHTML = "Teammate two contact info";
$("TeamBioTextTwo").innerHTML = "Teammate one text."
}

if (teammate == "two") {
$("TeamBioImage").src = "images/TeamTwo.jpg";
$("TeamBioTextOne").innerHTML = "Teammate two contact info";
$("TeamBioTextTwo").innerHTML = "Teammate two text."
}

if (teammate == "three") {
$("TeamBioImage").src = "images/TeamThree.jpg";
$("TeamBioTextOne").innerHTML = "Teammate three contact info";
$("TeamBioTextTwo").innerHTML = "Teammate three text."
}

if (teammate == "four") {
$("TeamBioImage").src = "images/TeamFour.jpg";
$("TeamBioTextOne").innerHTML = "Teammate four contact info";
$("TeamBioTextTwo").innerHTML = "Teammate four text"
}
if (teammate == "home") {
$("TeamBioImage").src = "images/TeamAll.jpg";
$("TeamBioTextOne").innerHTML = "";
$("TeamBioTextTwo").innerHTML = "Default text here"
}

}

And here's the html:

<div id="TeamThumbnailsDiv" onmouseout="changeTeammate('home')">
<img src="images/meetTheTeam.gif" id="TeamImages" alt="Meet the team" onmouseover="changeTeammate('home')" />
<img src="images/FourBW.jpg" id="FourBW" alt="" onmouseover="changeTeammate('four')" />
<img src="images/ThreeBW.jpg" id="ThreeBW" alt="" onmouseover="changeTeammate('three')" />
<img src="images/TwoBW.jpg" id="TwoBW" alt="" onmouseover="changeTeammate('two')" />
<img src="images/OneBW.jpg" id="OneBW" alt="" onmouseover="changeTeammate('one')" />
</div>
<div id="TeamYellowBox">
<img id="TeamBioImage" name="TeamBioImage" src="images/TeamAll.jpg" alt="" />
<label id="TeamBioTextOne" class="Black12">
</label>
<label id="TeamBioTextTwo" class="Black12">Default text here.<br /><br />
</label>
</div>

Thanks,

Marc

 

[feherke]

Hi

Sorry, that code is so ugly that I would prefer to replace it.

[b]var[/b] teamdata[teal]=[/teal][teal]{[/teal]
  one[teal]:[[/teal][green][i]'images/TeamOne.jpg'[/i][/green][teal],[/teal][green][i]'Teammate one contact info'[/i][/green][teal],[/teal][green][i]'Teammate one text.'[/i][/green][teal]],[/teal]
  two[teal]:[[/teal][green][i]'images/TeamTwo.jpg'[/i][/green][teal],[/teal][green][i]'Teammate two contact info'[/i][/green][teal],[/teal][green][i]'Teammate two text.'[/i][/green][teal]],[/teal]
  three[teal]:[[/teal][green][i]'images/TeamThree.jpg'[/i][/green][teal],[/teal][green][i]'Teammate three contact info'[/i][/green][teal],[/teal][green][i]'Teammate three text.'[/i][/green][teal]],[/teal]
  four[teal]:[[/teal][green][i]'images/TeamFour.jpg'[/i][/green][teal],[/teal][green][i]'Teammate four contact info'[/i][/green][teal],[/teal][green][i]'Teammate four text.'[/i][/green][teal]],[/teal]
  home[teal]:[[/teal][green][i]'images/TeamAll.jpg'[/i][/green][teal],[/teal][green][i]''[/i][/green][teal],[/teal][green][i]'Default text here'[/i][/green][teal]][/teal]
[teal]}[/teal]

[b]for[/b] [teal]([/teal][b]var[/b] teammate [b]in[/b] teamdata[teal])[/teal] [teal]{[/teal]
  [b]if[/b] [teal](![/teal]teamdata[teal].[/teal][COLOR=darkgoldenrod]hasOwnProperty[/color][teal]([/teal]teammate[teal]))[/teal] [b]continue[/b]
  teamdata[teal][[/teal]teammate[teal]][[/teal][purple]3[/purple][teal]]=[/teal][b]new[/b] [COLOR=darkgoldenrod]Image[/color][teal]()[/teal]
  teamdata[teal][[/teal]teammate[teal]][[/teal][purple]3[/purple][teal]].[/teal]src[teal]=[/teal]teamdata[teal][[/teal]teammate[teal]][[/teal][purple]0[/purple][teal]][/teal]
[teal]}[/teal]

[b]function[/b] $[teal]([/teal]sId[teal])[/teal]
[teal]{[/teal]
  [b]return[/b] document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal]sId[teal]);[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]changeTeammate[/color][teal]([/teal]teammate[teal])[/teal]
[teal]{[/teal]
  $[teal]([/teal][green][i]'TeamBioImage'[/i][/green][teal]).[/teal]src[teal]=[/teal]teamdata[teal][[/teal]teammate[teal]][[/teal][purple]0[/purple][teal]][/teal]
  $[teal]([/teal][green][i]'TeamBioTextOne'[/i][/green][teal]).[/teal]innerHTML[teal]=[/teal]teamdata[teal][[/teal]teammate[teal]][[/teal][purple]1[/purple][teal]][/teal]
  $[teal]([/teal][green][i]'TeamBioTextTwo'[/i][/green][teal]).[/teal]innerHTML[teal]=[/teal]teamdata[teal][[/teal]teammate[teal]][[/teal][purple]2[/purple][teal]][/teal]
[teal]}[/teal]

Next time please post your code between [tt][ignore]

[/ignore][/tt] and [tt][ignore]

[/ignore][/tt] TGML tags.

Feherke.

http://free.rootshell.be/~feherke/

 

[DenverMarc]

Thank you for the kind and tactful comments about my code.

However, your beautiful code still does not solve my problem - the image doesn't change if you move quickly between thumbnails, even thought the text does.

I'll look elsewhere for a solution.

 

[feherke]

Hi

It works for me.

Do you have installed addons ? Start FireFox with -safe-mode command line parameter and see if the problem persists.

If yes, you will have to show us a whole functional page reproducing that issue. Preferable one available on-line.


Feherke.

http://free.rootshell.be/~feherke/