JavaScript Rollover effect for whole paragraphs and tables code

JavaScript Rollover effect for whole paragraphs and tables code

Even my granny knows how to add rollover effects to text links and buttons. Yet how do you create rollover effects that will highlight whole paragraphs, tables, div's and spans? Much easier than you think! Internet Explorer 4 or higher.

Move your mouse around this page in order to see how the script highlights paragraphs, links, textfields and more.

Configuration:

Step 1: Open your web page and paste the following code into the <head>section:

<SCRIPT>
// CREDITS:
// Rollovereffect for whole paragraphs and tables
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com & http://www.designerwiz.com
// info@24fun.com
// 03/09/2001

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.24fun.com on the webpage 
// where this script will be running.

// CONFIGURATION:
// Go to www.24fun.com, open category 'utility' and download 
// the full-version of this script as ZIP-file with
// step-by-step instructions for non-programmers.

// rollover-color
var color_onmouseover="FFFF00"

// do not edit the varibales below
var obj     
var color_onmouseout

if (document.all) {
    document.onmouseover=showmouseovercolor;
    document.onmouseout=showmouseoutcolor;
}

function showmouseovercolor() {
	obj=event.srcElement
    if (obj.tagName!='BODY') {
		color_onmouseout=obj.style.backgroundColor
		obj.style.backgroundColor=color_onmouseover
	}								
}

function showmouseoutcolor() {
	obj=event.srcElement
    if (obj.tagName!='BODY') {
		obj.style.backgroundColor=color_onmouseout
	}
}
</script>

Step 2: Open your web page, go to the top of the script and configure the rollover-color (red code below):
// rollover-color
var color_onmouseover="yellow"

Step 3: Put the content of your web page into tables, paragraphs, DIV's, spans and more and test the rollover-effect by trial and error.

Step 4: Have fun!

Download 500 free copy-and-paste scripts.