Thursday, February 14, 2013

OBIEE 11g - Changing the background color on hovering dashboard

When there is a requirement to have background color to appear on hovering over the text then the below code will help you out.
Use the below code in the Text inside the section with the HTML check box enabled.

<script type="text/javascript">
function changeColor(id, color) {
element = document.getElementById(id);
event.cancelBubble = true;
oldColor = element.currentStyle.background;
element.style.background = color;
}
</script>
<div id="left1" onMouseOver="changeColor(this.id, '#81DAF5');" onMouseOut="changeColor(this.id, '#FFFFFF');"><font size=2>Sample Text</font></div>

The use of div here is to restrict the color change on the particular section only. If we use Body bgcolor, it will  change the color for the whole page. 
And in conditions where there are multiple sections, just add the above code and change the div id values.
Hope this will help many people out there. Thanks to javascript :)