Flashing image border
Description: Use this script to decorate any image(s) with a dynamic, flashing border. Great for drawing attention to images that require it, such as a banner ad. Functional in IE4+ and NS6+, with support for multiple flashing borders per page.
Step 1: Add the following stylesheet into the <HEAD> section of your page:
<style>
<!--
.flashgroup{
border:3px solid green;
}
-->
</style>
<!--
.flashgroup{
border:3px solid green;
}
-->
</style>
Step 2: Insert the below at the VERY end of your webpage (ie: right above </body> tag):
<script language="JavaScript1.2">
/*
Flashing Border image script (credit must stay enclosed)
By javascriptkit.com
For this and over 400+ JavaScripts,
Visit http://www.javascriptkit.com
*/
//specify color of flash
var flashcolor="yellow"
//specify speed (less is faster ie: 50)
var speed=150
/////No need to edit below here////
var curborder=new Array()
var increment=0
var flashobject=new Array()
if (document.all||document.getElementById){
while (document.getElementById("flash"+increment)!=null){
flashobject[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style")
curborder[increment]=0
increment++
}
}
function flash(which){
if (curborder[which]==1){
flashobject[which].borderLeftColor=flashcolor
flashobject[which].borderBottomColor=flashobject[which].borderRightColor
}
else if (curborder[which]==2){
flashobject[which].borderTopColor=flashcolor
flashobject[which].borderLeftColor=flashobject[which].borderBottomColor
}
else if (curborder[which]==3){
flashobject[which].borderRightColor=flashcolor
flashobject[which].borderTopColor=flashobject[which].borderLeftColor
}
else if (curborder[which]==4){
flashobject[which].borderBottomColor=flashcolor
flashobject[which].borderRightColor=flashobject[which].borderTopColor
}
if (curborder[which]<=3)
curborder[which]++
else
curborder[which]=1
}
if (document.all||document.getElementById){
for (z=0;z<flashobject.length;z++){
var temp='setInterval("flash('+z+')",'+speed+')'
eval(temp)
}
}
</script>
/*
Flashing Border image script (credit must stay enclosed)
By javascriptkit.com
For this and over 400+ JavaScripts,
Visit http://www.javascriptkit.com
*/
//specify color of flash
var flashcolor="yellow"
//specify speed (less is faster ie: 50)
var speed=150
/////No need to edit below here////
var curborder=new Array()
var increment=0
var flashobject=new Array()
if (document.all||document.getElementById){
while (document.getElementById("flash"+increment)!=null){
flashobject[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style")
curborder[increment]=0
increment++
}
}
function flash(which){
if (curborder[which]==1){
flashobject[which].borderLeftColor=flashcolor
flashobject[which].borderBottomColor=flashobject[which].borderRightColor
}
else if (curborder[which]==2){
flashobject[which].borderTopColor=flashcolor
flashobject[which].borderLeftColor=flashobject[which].borderBottomColor
}
else if (curborder[which]==3){
flashobject[which].borderRightColor=flashcolor
flashobject[which].borderTopColor=flashobject[which].borderLeftColor
}
else if (curborder[which]==4){
flashobject[which].borderBottomColor=flashcolor
flashobject[which].borderRightColor=flashobject[which].borderTopColor
}
if (curborder[which]<=3)
curborder[which]++
else
curborder[which]=1
}
if (document.all||document.getElementById){
for (z=0;z<flashobject.length;z++){
var temp='setInterval("flash('+z+')",'+speed+')'
eval(temp)
}
}
</script>
Now, to apply the flashing border effect to any image, simply add the following attributes inside its <IMG> tag:
id="flash0" class="flashgroup"
incrementing "0" if you add the effect to more than one image. Here's an example:
<img src="table.gif" id="flash0" class="flashgroup">
<img src="desk.gif" id="flash1" class="flashgroup">
<img src="desk.gif" id="flash1" class="flashgroup">
FYI, you may configure the border color and flash speed/color by changing the color inside Step 1 and variables inside Step 2, respectively.
Enjoy!
ليست هناك تعليقات:
إرسال تعليق