swapping DIVs on mouseover

johnsankey

01-01-2012, 04:16 PM

I'm a total beginner at both CSS and Javascript. What I want to do is to swap things on mouseover, and keep the code as simple as possible both so I have a chance of understanding it and so it will work on as many browsers as possible.

I've got an image swap to work as I hoped using the method at http://acmeous.blogspot.com/2008/07/simplest-way-to-change-images-on-mouse.html, and am hoping to swap DIVs in the same way, with the initial DIV containing text and a thumbnail, and the replacement DIV a full size image.

I started with http://www.willmaster.com/library/features/mouseover_div_swap.php
In the following, mousing over should cause initDiv to disappear and imageDiv to appear; mousing out should cause imageDiv to disappear and initDiv to appear. Instead, I see imageDiv flickering over initDiv whenever the mouse is moved within the div.

What's the simplest way to correct my error?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<style type="text/css">
.mybox { width:full; height:115px; border-color:black; border-style:solid; border-width:1px; padding:0px; }
</style>

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

<div id="imageDiv" class="mybox" style="display:none;">
large image here of same dimensions as DIV
</div>

<span onmouseover="HideDIV('initDiv');DisplayDIV('imageDiv')" onmouseout="HideDIV('imageDiv');DisplayDIV('initDiv')" style="cursor:pointer">
<div id="initDiv" class="mybox">
<table><tr><td>lots of text<td>thumbnail</table>
</div>
</span>

</html>

Old Pedant

01-02-2012, 01:21 AM

You can't put a <div> inside a <span>. It's illegal nesting. (A <span> is not a "block level element" but a <div> is.)

However, the poor browser is trying to accommodate your illegal HTML.

ANd it makes sense: The mouse is over the <span>. Then the <div> disappears from inside that <span> and the mouse is no longer over the <span> because there is no longer any content in the <span>. So that triggers the onmouseout. Oh, but wait, the <div> is now here and the mouse is again over the <span>'s contents so that triggers the onmouseover. Oh wait, the... Well, you get the idea.

Move the <div> out of the <span>. And give some content to the span other than the <div>.

johnsankey

01-02-2012, 01:29 PM

Thanks Old Pedant. So the mouseover works with images because there is always an image there, either init or swap. I thought that because I defined div.mybox with fixed dimensions that it would always be there too - obviously it isn't. So, if I can figure out how to put a background image in initDiv with the same dimensions as the image in imageDiv, might that solve this problem? (I might have to confine the span of the mouseover to the image in case the "lots of text" is larger.)

I note that the following code seems to meet the HTML 4.01 spec on div and span, and it verifies with the W3C validator.But, it still gets the blinking because of the above?

Stepping back a bit, have you any thoughts on how to approach the job more cleanly? Particularly as I'll eventually want to objectify the code for multiple use on a page.

<div id="initDiv" class="mybox" onmouseover="HideDIV('initDiv');DisplayDIV('imageDiv')" onmouseout="HideDIV('imageDiv');DisplayDIV('initDiv')" style="cursor:pointer" >

<table><tr><td>lots of text<td>thumbnail</table>

</div>

vwphillips

01-02-2012, 04:26 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<style type="text/css">
.mybox { height:150px; width:200px;border-color:black; border-style:solid; border-width:1px; padding:0px;background-Color:red; }
.image IMG {width:100%}
</style>

<script type="text/javascript" >

function HideDIV(obj,hide,show) {
var divs=obj.getElementsByTagName('DIV');
divs[show].style.display='block';
divs[hide].style.display='none';
}

</script>

<div id="initDiv" class="mybox"onmouseover="HideDIV(this,0,1);" onmouseout="HideDIV(this,1,0);">
<div><table><tr><td>lots of text<td>thumbnail</table></div>
<div class="image" style="display:none;">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg">
</div>
</div>
</span>

</html>

johnsankey

01-02-2012, 05:26 PM

That's almost there, vwphilips, it's doing what I would like. However, I haven't found a way to display the full image at its proper size. If I set .mbox width:full then the image pops up the full width of the page, although in proper proportion. Of course I tried setting width & height for it, but that is ignored.

Browsers fit text into a div of size set by the viewer without expanding it to fit - is there a way I've not been able to spot to do the same with an image in this code?

johnsankey

01-02-2012, 05:55 PM

Actually, vwphillips, that's a fantastic effect, because the popup image doesn't have to fit within the original div. So, the div dimensions could be determined entirely by the text, without a thumbnail being needed. The only need is for the popup image to be displayed at a defined size (its native resolution) then it would be perfect.

vwphillips

01-03-2012, 10:02 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<style type="text/css">
.mybox { height:150px; width:200px;border-color:black; border-style:solid; border-width:1px; padding:0px;background-Color:red; }
</style>

<script type="text/javascript" >

function HideDIV(obj,hide,show) {
var divs=obj.getElementsByTagName('DIV');
divs[show].style.display='block';
divs[hide].style.display='none';
}

</script>

<div id="initDiv" class="mybox"onmouseover="HideDIV(this,0,1);" onmouseout="HideDIV(this,1,0);">
<div><table><tr><td>lots of text<td>thumbnail</table></div>
<div style="display:none;">
<img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg">
</div>
</div>
</span>

</html>

johnsankey

01-03-2012, 12:59 PM

Changing width to full and background to transparent works perfectly.