[JS / DHTML] Div hide on mouseover, show on mouseout - Softwareontwikkeling

woensdag 12 maart 2008 10:44

Acties:

Verwijderd

Topicstarter

Good morning,

Momenteel ben ik bezig met een scriptje dat een foto over een div legt, maar die foto verdwijnt vervolgens on mouse over. Vervolgens verschijnt dan de onderliggende div met wat teksten en wat linkjes en on mouse out op deze div moet de foto weer terug komen.

Nu werkt mijn script goed wanneer ik geen nieuwe <a> of <div> tags open binnen de div met tekst. Maar zodra ik dit wel doe, zie je de div met foto er even doorheen knipperen wanneer ik over deze elementen hover. Dit komt denk ik omdat je toch een soort mouseout doet op de div met tekst. Hier volgt mijn gehele code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="Javascript">
  function hide(id) {
      document.getElementById(id).style.display = 'none';
  }
  function show(id) {
      document.getElementById(id).style.display = 'block';
  }
</script>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
}
#div1 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff0000;
    width: 300px;
    height: 300px;
}

#div2 {
    width: 300px;
    height: 300px;
    background-color: #006600;
}
</style>
</head>
<body>
<div id="div1" onmouseover="hide('div1');">foto</div>
<div id="div2" onmouseout="show('div1');">
    hover over normale tekst prima<br /><br /><br /><br /><br /><br /><br />
    <a href="#">waarom zie ik on hover nog steeds wat rood?</a>
</div>
</body>
</html>

Ik denk toch dat ik een andere manier moet vinden om dit voor elkaar te krijgen, maar ik kan geen geen oplossing meer bedenken. Ik vond eigenlijk dat ik met mijn javascript skills al een heel end ben gekomen, maar helaas niet ver genoeg.

Wie kan mij helpen? Veel googlen en dit forum afzoeken heeft me niet geholpen.. Het probleem is ook browser-onafhankelijk; treedt altijd op.

Thnx alvast!

woensdag 12 maart 2008 11:14

Acties:

Rekcor

Als je vraag in het Engels zou zijn

If an element and one of its ancestors have an event handler for the same event, which one should fire first?

is dit een goede tutorial: http://www.quirksmode.org/js/events_order.html

woensdag 12 maart 2008 11:16

Acties:

Rekcor

Wat ik net bedenk: je zou ook de onmouseover/onmouseout-event van de niet-zichtbare div tijdelijk leeg kunnen maken (lees: opslaan in een ander attribute: onmouseover_temp o.i.d.). Zodra de div weer zichtbaar wordt, zet je hem weer goed.

woensdag 12 maart 2008 11:28

Acties:

Verwijderd

Topicstarter

Rekcor schreef op woensdag 12 maart 2008 @ 11:16:de onmouseover/onmouseout-event van de niet-zichtbare div tijdelijk leeg kunnen maken

klinkt logisch, maar heb werkelijk geen idee hoe ik dat met javascript voor elkaar krijg.. daar heb ik echt onvoldoende kennis voor.. maar neem aan dat dit niet te ingewikkeld is? zou je me hiermee kunnen en willen helpen?

woensdag 12 maart 2008 11:49

Acties:

Rekcor

Zoiets?

JavaScript:

 function hide(id) {
  var oDiv = document.getElementById(id);

  //remove onclick
  oDiv.onclick = '';
  
  //hide
  oDiv.style.display = 'none';
  } 

 function show(id) {
  var oDiv = document.getElementById(id);
  
  //add onclick
  oDiv.onclick = function(){hide('div1');}
  
  //show
  oDiv.style.display = 'block';
  }

woensdag 12 maart 2008 12:04

Acties:

Verwijderd

Topicstarter

Rekcor schreef op woensdag 12 maart 2008 @ 11:49:
Zoiets?

ik snap het principe, maar het werkt helaas niet.. ook niet wanneer ik 'onclick' vervang voor 'onmouseover'..

woensdag 12 maart 2008 12:06

Acties:

Bram77

Onderstaande zou moeten werken (niet getest)

code:

function addToggleDisplayEvent( objId )
{
 var obj = document.getElementById(objId);
 obj.addEventListener('mouseover', toggleDisplay(obj), false);
 obj.addEventListener('mouseout', toggleDisplay(obj), false);
}

function toggleDisplay( obj )
{
   obj.style.display = (elm.style.display=="")? "none" : "" ;
}

window.onload = addToggleDisplayEvent('objectId');

En anders zo....

code:

function addToggleDisplayEvent( objId )
{
 var obj = document.getElementById(objId);
 obj.addEventListener('mouseover',function (){ obj.style.display="none" }, false);
 obj.addEventListener('mouseout', ,function (){ obj.style.display="" }, false);
}

window.onload = addToggleDisplayEvent('objectId');

Als je het cross browser wil laten werken kun je niet de "block" property gebruiken. Gebruik daarvoor in de plaats een lege waarde (""). Als je dus in eerste instantie (bij het laden van de pagina) de plaatjes WEL wil weergeven zou je de css property als volgt moeten definieren...

code:

1	<img src="plaatje.jpg" id="objectId" style="display:;" />

[ Voor 15% gewijzigd door Bram77 op 12-03-2008 12:11 ]

woensdag 12 maart 2008 12:25

Acties:

Verwijderd

Topicstarter

thnx! hoe roep ik hem nu correct aan?

code:

1	<div id="div1" onload="addToggleDisplayEvent('div1');">

of toch met body onload? wanneer ik dat doe wordt de image niet

ik vind het heel tof dat jullie met scripts komen, maar mijn javascript kennis blijft te nihil om het ook juist toe te passen...

ik krijg in de foutconsole van FF webdeveloper de volgende errors:
Fout: obj has no properties
Bronbestand: file:///..../test2.htm
Regel: 8

Waarschuwing: Fout tijdens het parsen van waarde voor eigenschap ‘display’. Declaratie genegeerd.
Bronbestand: file:///..../test2.htm
Regel: 0

mijn code is nu:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="Javascript">
    function addToggleDisplayEvent(objId)
    {
        var obj = document.getElementById(objId);
        obj.addEventListener('mouseover', toggleDisplay(obj), false);
        obj.addEventListener('mouseout', toggleDisplay(obj), false);
    }
    
    function toggleDisplay(obj)
    {
       obj.style.display = (obj.style.display=='') ? 'none' : '';
    }
    
    window.onload = addToggleDisplayEvent('objectId');
</script>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
}
#div1 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff0000;
    width: 128px;
    height: 338px;
}

#div2 {
    width: 128px;
    height: 338px;
    background-color: #006600;
}
</style>
</head>
<body>
<div id="div1">
    <img src="dummy.jpg" id="objectId" style="display:;" />
</div>
<div id="div2">
    hover over normale tekst prima<br /><br /><br /><br /><br /><br /><br />
    <a href="#">waarom zie ik on hover nog steeds wat rood?</a>
</div>
</body>
</html>

[ Voor 49% gewijzigd door Verwijderd op 12-03-2008 12:27 ]

woensdag 12 maart 2008 12:35

Acties:

Verwijderd

Topicstarter

ik heb nu:

HTML:

<div id="div1" onmouseover="addToggleDisplayEvent('div1');">
    <img src="dummy.jpg" alt="" border="0" />
</div>
<div id="div2" onmouseout="addToggleDisplayEvent('div1');">
    hover over normale tekst prima<br /><br /><br /><br /><br /><br /><br />
    <a href="#">waarom zie ik on hover nog steeds wat rood?</a>
</div>

daarmee werkt het een heel end, alleen loop ik tegen mijn eerste probleem aan: als ik over <a> tag hover verschijnt de afbeelding weer.. iemand een idee?

ik krijg dan wel een js error in m'n console:
Fout: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///.../test2.htm# :: addToggleDisplayEvent :: line 8" data: no]

[ Voor 71% gewijzigd door Verwijderd op 12-03-2008 12:40 ]

woensdag 12 maart 2008 14:17

Acties:

Rekcor

volgens mij is in

code:

1	obj.addEventListener('mouseover', toggleDisplay(obj), false);

niet toegestaan: toggleDisplay(obj). Je kunt op deze manier geen parameters meegeven.

Ik vrees echter dat het beter is als je je Javascript-skills nog wat opvijzelt, want wat je wilt is op zich niet moeilijk, maar je moet wel een beetje Javascript kennen...

woensdag 12 maart 2008 15:08

Acties:

Verwijderd

Topicstarter

Rekcor schreef op woensdag 12 maart 2008 @ 14:17:Ik vrees echter dat het beter is als je je Javascript-skills nog wat opvijzelt, want wat je wilt is op zich niet moeilijk, maar je moet wel een beetje Javascript kennen...

ja dat begrijp ik.. maar aangezien het niet mijn specialiteit is, kom ik hier om hulp vragen....

woensdag 12 maart 2008 16:52

Acties:

Bram77

Rekcor schreef op woensdag 12 maart 2008 @ 14:17:
volgens mij is in
code:
1
obj.addEventListener('mouseover', toggleDisplay(obj), false);
niet toegestaan: toggleDisplay(obj). Je kunt op deze manier geen parameters meegeven.

Klopt, ik heb er net nog wat mee gestoeit en kwam tot dit. Maar het werkt niet, al zou het naar mijn idee wel de mooiste manier zijn omdat je JS en HTML volledig scheid. Misschien heeft iemand een idee?

HTML:

<html>
    <head>
        <title></title>
        <script>
            document.getElementsByClassName = function(cl) 
            {
                var retnode = [];
                var myclass = new RegExp('\\b'+cl+'\\b');
                var elem = this.getElementsByTagName('*');
                for (var i = 0; i < elem.length; i++) 
                {
                    var classes = elem[i].className;
                    if (myclass.test(classes)) retnode.push(elem[i]);
                }
                return retnode;
            };
            
            var classIdentifier = "imageContainer";     //Dit moet overeenkomen met de class van de div waarbinnen het object dat je wil verbergen staat
        
            function addToggleDisplayEvent()
            {
                obj = document.getElementsByClassName(classIdentifier);
                for(var x=0; x<obj.length; x++) 
                {
                    childObj = obj[x].firstChild;
                    obj[x].addEventListener('mouseover', function(childObj){childObj.style.display='none'}, false);
                    obj[x].addEventListener('mouseout', function(childObj){childObj.style.display=''}, false);
                }
            }
            
            window.onload = addToggleDisplayEvent;
        </script>
        <style>
            .imageContainer             { width:200px; }
            .imageContainer>img         { display:; width:100%; }
        </style>
    </head> 
    <body>
        <div class="imageContainer"><img src="http://digilander.libero.it/Logiko2031/BMW%20M3%20GTR%20Strassenversion.jpg" /></div>
        <div class="imageContainer"><img src="http://www.autosport.nl/cms/images/stories/2005/Winter_2005-2006/WTCC_BMW_1_3228.jpg" /></div>
    </body>
</html>

[ Voor 6% gewijzigd door Bram77 op 12-03-2008 17:01 ]

donderdag 13 maart 2008 12:49

Acties:

Bosmonster

*zucht*

Bram77 schreef op woensdag 12 maart 2008 @ 16:52:
[...]

Klopt, ik heb er net nog wat mee gestoeit en kwam tot dit. Maar het werkt niet, al zou het naar mijn idee wel de mooiste manier zijn omdat je JS en HTML volledig scheid. Misschien heeft iemand een idee?
HTML:
1
2
<html>
 ...

Als je zo ingewikkeld bezig gaat zou ik aanraden eens naar een library als Mootools te kijken.

donderdag 13 maart 2008 16:47

Acties:

Bram77

Ik ken mootools wel. Prachtig framework. Maar wat ik doe is niet zo ingewikkeld hoor. Bovendien is het juist leuk om zelf uit te vogelen.

Pagina: 1

Reageer