unobtrusive with lowpro.js

[rubing]

I am trying to write some unobtrusive javascript using the prototype, scriptaculous, and lowpro libraries which will make an image pulsate and then open a new window.  I was doing this before in the html fine just using an onclick function.  I'm not having too much luck doing this unobtrusively. 

 

Here is the relevant html code (full page is at bookmarkmarket.com)

 

Call to javascript in head section:

 

<script src="js/scriptac/lib/prototype.js" type="text/javascript"></script>
<script src="js/scriptac/src/scriptaculous.js" type="text/javascript"></script>
<script src="js/lowpro.js type="text/javascript"></script> 
<script src="js/sm.js type="text/javascript"></script>
</head>

Code in Body:


<tr class='odd'><td class='ven'>Bar Tuti</td><td class='ban'>Bisc</td><td class ='play' align='center'><div><img src='playsmall.png' class='pulsate_demo' alt='play' /></div></td> <td class='cat'>Hip Hop</td></tr>


contents of sm.js:

Event.addBehavior({
     'img.pulsate_demo:click' :function() {alert('ya just clicked');}
});

[rubing]

I found a useful javascript for unobtrusively opening popup windows.  However my scriptaculous function is still inline  .  I would like to move this scriptaculous function to the head section preferably as part of the popup function.    Here is my included javascript file for opening popups:

 

window.onload = initPage;  
// Make sure that no other javscripts assign a fuction to window.onload
// There can be only one window.onload at a time

function initPage() {
  initPopupLinks();
  // place here any other code you wish to run when the page loads.
}

function initPopupLinks()
{
  if (!document.getElementsByTagName) return true;
  var pageLinks = document.getElementsByTagName("a");
  for (var i = 0; i < pageLinks.length; i++) 
  {
    if (((pageLinks[i].className != null) && 
         (pageLinks[i].className != "")) ||
        ((pageLinks[i].parentNode.className != null) && 
         (pageLinks[i].parentNode.className != "")))
    {
      var linkClass = " " + pageLinks[i].className + " ";
      if ((linkClass == "  ") && (pageLinks[i].parentNode.className != ""))
      {
        linkClass = " " + pageLinks[i].parentNode.className + " ";
      }
      for (var theKey in popupLinkConfig) 
      {
        if (linkClass.indexOf(" " + theKey + " ") > -1)
        {
          if ((pageLinks[i].target == "") || (pageLinks[i].target == null))
          {
            pageLinks[i].target = (popupLinkConfig[theKey][0] != "") ? popupLinkConfig[theKey][0] : theKey;
          }
          pageLinks[i].settings = popupLinkConfig[theKey][1];
          pageLinks[i].onclick = popUp;
        }
      }
    }
  }
  return true;
}

function popUp()
{
  newWin = window.open(this.href, this.target, this.settings);
  newWin.focus();
  return false;
} 
var popupLinkConfig = new Array;
// Delete/copy/modify the following lines to configure your popup windows.
popupLinkConfig["popup"] = new Array ( "", "width=350,height=450,scrollbar=yes,menubar=yes");
popupLinkConfig["glossary"] = new Array ( "help", "width=550,height=350,resizable=no,scrollbars=no");

 

 

Now, here is the relevant html:

 

<a class="popup" href="http://www.google.com"><img onClick="Effect.Pulsate('player8man')" id="player8man" src='playsmall.png' alt='play' /></a>

 

Any advise?  Thanks!!