onMouseOver and Out events...

kizmar2 · Sep 22, 2005

I'm seeing in interesting thing happening... I'm not sure how much code I need to show off hand so i'm just going to explain the phenomenon and see what I get...

I'm using Dreamweaver to create rollover images (using their JS code for the swapping of images). I'm noticing that when I use that in conjunction with another funcion (ie - showing/hiding a span on rollover), the pictures dissapear in IE. This all works fine in Firefox though...

To see what I'm talking about check out this url:

http://www.crossroads-bible.org/main.php

The first row of images are set up to display a span in the blue area when someone rolls over the image. That whole row dissapears when you roll over the whole thing.

You can also see similar issues here:

http://www.kizmar.net

- but only on the right side roll over images... I don't understand!!

KizMar
------------

http://www.kizmar.net

LFI · Sep 22, 2005

The IMG tags that include the first row of pix (see

http://www.crossroads-bible.org/iframe/community.php)

include onmouseover and onmouseout commands, even though the A (anchor) tags that wrap them already contain them. These ones are different, though, and unique to the first row.

Specifically, these IMG's, for some mysterious reason, call the following function when you mouseover them (see

http://www.crossroads-bible.org/includes/span_toggle.js

for the code):

Code:

function toggleSpan(i) {
	// Pull item
	thing = document.getElementById(i);
	
	// Allow them to collapse the menu if they want to
	if (thing.style.display == 'block') thing.style.display = 'none';
		else thing.style.display = 'block';
	
	return;
}

Since the IMG's are not specifically style.display anything, the function sets them to 'block' when you mouseover. When the onmouseout event occurs, this function is called again and, since the display is 'block' now, it is set to 'none,' thereby making it impossible to mouseover and bring back.

This must have been included as some sort of test and then someone forgot to take it out. The fix is to remove the onmouseover/onmouseout calls in the IMG tag (or comment out the body of the above code).

'hope that helps.

--Dave

Vragabond · Sep 22, 2005

LookingForInfo said:
Since the IMG's are not specifically style.display anything

While I am completely sure everything else is to the point and correct, images actually have a very specific style.display set to them. It is however inline, so applying the aforementioned function upon them would be a good cause for confusion.

LFI · Sep 22, 2005

Well, IMG's may behave like they're inline, but they don't know it. Not in IE6 anyway.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<script>
function showDisplay(img)
{
 alert(img.style.display);
 alert(img.style.display == 'inline');

 //now explicitly set it
 img.style.display='inline';
}
</script>
</head>
<body>
<img src='anything.bmp' onmouseover='showDisplay(this);' />
</body>
</html>

Mouseover once and see what the display value is. Mouseover again (once the function explicitly sets it) and see the change.

--Dave

kizmar2 · Sep 22, 2005

In a round about way you guys helped me find the problem... It's actually an easy one... I was naming the image and the span the same... so it was getting confused because of that. I named the span's the person's name + "Span", and it works.

KizMar
------------

http://www.kizmar.net

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

onMouseOver and Out events...

kizmar2

Programmer

LFI

Programmer

Vragabond

Programmer

LFI

Programmer

kizmar2

Programmer

Similar threads

Part and Inventory Search

Sponsor