Sunday, February 8, 2009

Highlight a DIV Element onClick

This is just a quick script to highlight a DIV element when a user clicks on an enclosed link. It's a little small/silly, but I've had more than request for something like this come in.


<html>
<head>
<title>Highlight</title>
<style type="text/css">
 .highlight { background-color:#ffff00; }
</style>
</head>
<body>
<div id="div1">Row one <a href="javascript:changeHighlight('div1');">HIGHLIGHT</a></div>
<div id="div2">Row two <a href="javascript:changeHighlight('div2');">HIGHLIGHT</a></div>
<div id="div3">Row three <a href="javascript:changeHighlight('div3');">HIGHLIGHT</a></div>
<input type="hidden" id="currentDiv" />
<script language="javascript" type="text/javascript">
function changeHighlight(myElement)
{
 document.getElementById(myElement).className = 'highlight';
 var lastHighlight = document.getElementById('currentDiv').value;
 if(lastHighlight != '')
 {
  document.getElementById(lastHighlight).className = '';
 }
 document.getElementById("currentDiv").value = myElement;
}
</script>
</body>
</html>

UPDATE: This is OLD. You should look for a better solution.
Posted by at
Labels:

No comments:

Post a Comment