DHTML – Update DIVs, Hide and Show DIVs

[Total: 0    Average: 0/5]

This shows how to hide and show DIVs on user events. The user events used here are mouse over.

Head Code:

<script type=text/javascript src="http://www.js-examples.com/bin/div_construct.js"></script>
<script type=text/javascript>
var _m1 = "";
	_m1 += "<a href='#' onmouseover='doIt()'>";
    _m1 += "Mouse Over - Watch new text appear <BR> 5 seconds later I'll hide!"
	_m1 += "</a>";
var div1 = new NewDiv(window, "bulb", _m1);

var _m2  = "";
    _m2 += 'I'm here now to stay...';
var div2 = new NewDiv(window, "d2", _m2, 50, 50, 130, 97, -1, "ABSOLUTE");
function doIt() {
  div2.show();
  setTimeout('div1.hide();div2.setBody("I'm all alone now...")',5000) // 5 seconds.
}
</script>

Body Code:

<style type=text/css>
#d2 {visibility:hidden}
</style>
<script type=text/javascript>
div1.output();
div2.output();
</script>
The second DIV that appears on the
mouse-over will be in the upper left
area of the page

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *