Chris Pollett > Students >
Rao

    ( Print View )

    [Bio]

    [Project Blog]

    [CS297 Proposal]

    [Del1]

    [Firefox Plugin-PPT]

    [Del2]

    [DOMTest-ZIP]

    [Del3]

    [Del4]

    [Firefox Plugin to match h1 tags-ZIP]

    [CS297-PDF]

    [CS298Proposal-PDF]

    [CS298 Report-PDF]

    [CS298Presentation-PPT]

                          

























Deliverable 3 -- Block Element Highlight

Description:

The third deliverable was to create a test HTML DOM and highlight block sections such as div and table elements on mouse movements. The block elements hovered over by the mouse were given a red solid border to highlight the block element. The following listing shows the piece of code that added this functionality
The following listing shows the piece of code that highlights the <div>

var all = document.getElementsByTagName("div");
for ( var i = 0; i < all.length; i++ ) {
	// Watch for when the user moves his mouse over the element
	// and add a red border around the element
	all[i].onmouseover = function(e) {
		this.style.border = "2px solid red";
		stopBubble( e );
	};
// Watch for when the user moves back out of the element
// and remove the border that we added
	all[i].onmouseout = function(e) {
		this.style.border = "0px";
		stopBubble( e );
	};
}