How to Create a Flashing Border on DIV
- 1). Open the .HTML or .PHP file that contains your webpage. Because rich-text editors like Word can introduce formatting errors that reduce compatibility, use a simple editor like Notepad or TextEdit to make changes to the HTML code.
- 2). Scroll down to the header section of the HTML document. Add the following code immediately following the "<head>" opening tag:
<script type="Text/JavaScript">
<!--
var state = 0;
var flashtime = 100;
function flash(div_id) { self.setInterval("changeBorder('" + div_id + "')",flashtime); }
function changeBorder(div_id) {
if(state==0) { document.getElementById(div_id).style.borderColor='#ffffff'; state=1; }
else{ document.getElementById(div_id).style.borderColor='#000000'; state=0;}
}
-->
</script> - 3). Change "#ffffff" -- solid white -- and "#000000" -- solid black -- if needed, to colors that fit your website better. Use standard HTML color notation, with "#" followed by two hexadecimal numbers for the red value, two for the green and two for the blue.
- 4). Add a new <DIV> element in the body section of your webpage using the following code:
<div onclick="flash('flashing')" style="border: 4px solid #000000;">Start Flashing</div>
This will create a new DIV, with a thick border around the words "Start Flashing" that, when clicked, flashes the DIV border rapidly.
Source...