Blink hyperlink : HyperLink « Ajax Layer « JavaScript DHTML

Blink hyperlink

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999

<html>
<head>
<title>DynAPI Examples - Template Manager</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.api');
dynapi.library.include('TemplateManager');
dynapi.library.include('HTMLCalendar');
dynapi.library.include('HTMLRollover');
dynapi.library.include('HTMLClock');
dynapi.library.include('HTMLMenu');
</script>
<script language="Javascript">
// HTML code/templates
var template1='<table cellSpacing=0 cellPadding=0 width=340 border=0>\n  <tr>\n    <td width=10><img src="./dynapiexamples/images/edge.tplt.gif" border=0 width="10" height="10" /></td>\n    <td width=320 background="./dynapiexamples/images/edge.tp.gif"><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0 /></td>\n    <td width=10><img height=10 src="./dynapiexamples/images/edge.tprt.gif" width="10" border="0" /></td>\n  </tr>\n  <tr>\n      <td width=10 background="./dynapiexamples/images/edge.lt.gif"><img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0></td>\n      <td vAlign=top width=320 bgColor=#f5f5f5>\n      <table cellSpacing=0 cellPadding=4 width="100%" border=0>\n      <tr>\n        <td noWrap align=center bgcolor="#FFFFFF" width="100%">\n        <table border="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">\n          <tr>\n          <td width="100%">\n          <img border=0 src="./dynapiexamples/images/htmlcomponents.gif" width="285" height="42"></td>\n          </tr>\n          <tr>\n          <td width="100%" bgcolor="003366">\n          {@hmenu}\n          </td>\n          </tr>\n          <tr>\n          <td width="100%">\n          <table border="0" cellpadding="4" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" cellspacing="3">\n            <tr>\n            <td valign="top">\n            <table border="0" cellpadding="2" cellspacing="1" style="border-collapse: collapse" bordercolor="#111111" width="103" id="AutoNumber2">\n              <tr>\n              <td width="93" align="center">{@hbtn1}</td>\n              </tr>\n              <tr>\n              <td width="93" align="center">{@hbtn2}</td>\n              </tr>\n              <tr>\n              <td width="93" align="center"><br>\n                {@hclk}</td>\n              </tr>\n            </table>\n            </td>\n            <td valign="top">{@hcal}</td>\n            </tr>\n          </table>\n          </td>\n          </tr>\n          <tr>\n          <td width="100%" align="right">{@lyr1}</td>\n          </tr>\n          <tr>\n          <td width="100%" align="center" style="border-top: 1px solid #000000" bgcolor="#F5F5F5"><b>\n        <font face="Arial, Helvetica, sans-serif" size="2" color="#800000">DynAPI</font></b><font color=#333333 \n        face="Arial, Helvetica, sans-serif" size=2> |&nbsp; {@hlink}</font></td>\n          </tr>\n        </table>          \n        </td>\n      </tr>\n      </table>\n    </td>\n      <td width=10 background="./dynapiexamples/images/edge.rt.gif"><img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0></td>\n  </tr>\n  <tr>\n      <td width=10><img height=10 src="./dynapiexamples/images/edge.bmlt.gif" width=10 border=0></td>\n      <td width=320 background="./dynapiexamples/images/edge.bm.gif"><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0></td>\n      <td width=10><img height=10 src="./dynapiexamples/images/edge.bmrt.gif" width=10 border=0></td>\n    </tr>\n</table>';

var tp = new Template(template1,150,40,400,360);

var imgPath = "./dynapiexamples/images/";;
var btn_home = imgPath+"btn_home_";
var btn_contact = imgPath+"btn_contact_";
var btnE = {
  onclick:function(e){
    alert("Hello from  "+e.getSource()._tmplFld)
  }
};

// HTMLMenu
var mbar;
tp.addChild(new HTMLMenu(),'hmenu');
// Main Menu
mbar= tp.hmenu.createMenuBar('main',40,20);
mbar.addItem(null,'File','file');
mbar.addItem(null,'Edit','edit');
mbar.addItem(null,'View','view');
mbar.addItem(null,'Tools','tools');
mbar.addItem(null,'Help','help');
  //File menu
  mbar = tp.hmenu.createMenuBar('file',130);
  mbar.addItem(null,'New');
  mbar.addItem(null,'Open',null,'alert("Open files")',null,null,'navy','red');
  mbar.addItem(null,'Save');
  mbar.addItem(null,'Save As ...');
  mbar.addItem(null,'Recent Files','recent');
  mbar.addItem(null,'Exit');
    //Recent menu
    mbar = tp.hmenu.createMenuBar('recent',120);
    mbar.addItem(null,'Dynapi.js');
    mbar.addItem(null,'Quickref.html');
    mbar.addItem(null,'Changelog.html');
    mbar.addItem(null,'Index.html');
  //edit menu
  mbar = tp.hmenu.createMenuBar('edit',120);
  mbar.addItem(null,'Undo');
  mbar.addItem(null,'Cut');
  mbar.addItem(null,'Copy');
  mbar.addItem(null,'Paste');
  //view menu
  mbar = tp.hmenu.createMenuBar('view',130);
  mbar.addItem(null,'Go');
  mbar.addItem(null,'Stop');
  mbar.addItem(null,'Toolbars','tbar');
  mbar.addItem(null,'Status Bar');
    // tbar
    mbar = tp.hmenu.createMenuBar('tbar',120);
    mbar.addItem(null,'Header');
    mbar.addItem(null,'Footer');
    mbar.addItem(null,'Standard');
    mbar.addItem(null,'Drawing');
  //tools menu
  mbar = tp.hmenu.createMenuBar('tools',120);
  mbar.addItem(null,'Options');
  mbar.addItem(null,'Macro');
  mbar.addItem(null,'Convert...');
  mbar.addItem(null,'Run...');

//HTMLRollovers
tp.addChild(new HTMLRollover(null,85,29,btn_home+'off.gif',btn_home+'on.gif'),'hbtn1');
tp.addChild(new HTMLRollover(null,85,29,btn_contact+'off.gif',btn_contact+'on.gif'),'hbtn2');
tp.hbtn1.addEventListener(btnE);
tp.hbtn2.addEventListener(btnE);

//HTMLHyperLink
tp.addChild(new HTMLHyperLink(null,'Click Here','http://dynapi.sf.net'),'hlink');
tp.hlink.startFlash('blue','black')
tp.hlink.addEventListener({
  onclick:function(e){
    var o=e.getSource();
    alert("A link to DynAPI's website")
    // o.allowEvent(); // By default HyperLink events are canceled (return false)
  }
});


//HTMLClock
tp.addChild(new HTMLClock(),'hclk');


// HTML Calender
hc = tp.addChild(new HTMLCalendar(),'hcal');
// modify colors
hc.borCol = '#000000';
hc.titleBgCol ='maroon';
hc.titleFgCol ='white';
hc.wkDayBgCol ='beige';
hc.selBorCol = '#CCCCCC';
hc.selBgCol = '#DEDEFF';
hc.selTDayBgCol = 'beige';
hc.addEventListener({
  onchange:function(e){
    var o=e.getSource();
    var l=o.parent.lyr1;
    if(l) {
      var dt = o.getDate();
      dt=(!dt)? '':(dt.getMonth()+1)+'/'+dt.getDate()+'/'+dt.getFullYear();
      o.parent.lyr1.setHTML('<font face="arial" size="2">Date is '+dt+'</font>');
    }
  }
});

//DynLayer
tp.addChild(new DynLayer(null,0,0,200,20),'lyr1');

dynapi.document.addChild(tp);

</script></head>

<body>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>
dynapi.zip( 791 k)
Related examples in the same category

HyperLink control in JavaScript