Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    swapping DIVs on mouseover

    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/...-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/fe...r_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?

    Code:
    <!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"><!--
    function HideDIV(d) { document.getElementById(d).style.display = "none"; }
    function DisplayDIV(d) { document.getElementById(d).style.display = "block"; }
    --></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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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>.
    Last edited by Old Pedant; 01-02-2012 at 02:23 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    johnsankey (01-02-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    johnsankey (01-02-2012)

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    johnsankey (01-03-2012)

  • #8
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile many thanks Vic

    Changing width to full and background to transparent works perfectly.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •