[Zope] Javascripts again

6 Mar 2001

      Hi Andrew,

Thanks all for your directions.

I looked at Andrew's method, which requires setting a property
Javascript=yes. Unfortunately, being a neophyte, I don't see where to add
properties to DTML Methods (though I do see it for DTML documents).
Something simple?

The client script howto advocates creating separate methods for each
function. So, I would have to create a separate file for each function
(there seem to be 6) ... then where would the script itself go? I'd like to
use the second method (which passes scripts by reference).

I'd be more than happy to write this up as a "Javascript rollovers for
newbies" (with CSS and breadcrumbs thrown in, since we got those to work) if
someone can troubleshoot this logic:

I currently don't have an image listed. Perhaps another newbie mistake, but
I'm assuming (with the consequences) that I can specify "Images/home" for
"Images/home.gif" ....

To do a one button rollover:

1. Put into Images folder: ro3_home_up.gif, ro3_home_up_F2.gif

2. Put into java_script/js_Rollover DTML document:

<script language="JavaScript">
if (document.images) {
r03_home_up_F1 = new Image(38,18); r03_home_up_F1.src =
"images/ro3_home_up";
r03_home_up_F2 = new Image(38,18); r03_home_up_F2.src =
"images/ro3_home_up_F2";
}

/* Function that swaps images. */

function di20(id, newSrc) {
    var theImage = FWFindImage(document, id, 0);
    if (theImage) {
        theImage.src = newSrc;
    }
}

/* Functions that track and set toggle group button states. */

function FWFindImage(doc, name, j) {
    var theImage = false;
    if (doc.images) {
        theImage = doc.images[name];
    }
    if (theImage) {
        return theImage;
    }
    if (doc.layers) {
        for (j = 0; j < doc.layers.length; j++) {
            theImage = FWFindImage(doc.layers[j].document, name, 0);
            if (theImage) {
                return (theImage);
            }
        }
    }
    return (false);
}

// stop hiding -->

function MM_preloadImages() { //v2.0
  if (document.images) {
    var imgFiles = MM_preloadImages.arguments;
    if (document.preloadArray==null) document.preloadArray = new Array();
    var i = document.preloadArray.length;
    with (document) for (var j=0; j<imgFiles.length; j++) if
(imgFiles[j].charAt(0)!="#"){
      preloadArray[i] = new Image;
      preloadArray[i++].src = imgFiles[j];
  } }
}

function MM_swapImgRestore() { //v2.0
  if (document.MM_swapImgData != null)
    for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
      document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
}

function MM_swapImage() { //v2.0
  var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
  for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
    objStr = MM_swapImage.arguments[(navigator.appName ==
'Netscape')?i:i+1];
    if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
        (objStr.indexOf('document.all[')   ==0 && document.all   ==null))
      objStr =
'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
    obj = eval(objStr);
    if (obj != null) {
      swapArray[j++] = obj;
      swapArray[j++] = (oldArray==null ||
oldArray[j-1]!=obj)?obj.src:oldArray[j];
      obj.src = MM_swapImage.arguments[i+2];
  } }
  document.MM_swapImgData = swapArray; //used for restore
}

function MM_displayStatusMsg(msgStr) { //v2.0
  status=msgStr;
  document.MM_returnValue = true;
}
//-->
</script>

3. Put into standard_html_header:

<html>
<head>
<title><dtml-var title_or_id></title>

<dtml-if scripts>
   <dtml-comment>
      Include Java Scripts Specified by Scripts Property
   </dtml-comment>
   <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
   <dtml-with java_script>
      <dtml-in scripts>
         <SCRIPT language="JavaScript"
            src="<dtml-var BASE0>/java_script/<dtml-var sequence-item>"
         </SCRIPT>
      </dtml-in>
   </dtml-with>
</dtml-if scripts>

</head>
<dtml-comment>By using the method in the header, it opens the style sheet
once for the entire site.
global_css is the a DTML method in the root folder. </dtml-comment>

<link HREF="<dtml-var "global_css.absolute_url()">" rel="stylesheet"
type="text/css">

<body bgcolor="#FFFFFF">

<DIV ALIGN="RIGHT">
<img src="Images/ro1_home_up"><img src="Images/ro1_contact_up"><img
src="Images/ro1_search_up"><img src="Images/ro1_index_up">
<br>

<i><b><div align="right"><font face="Arial, Helvetica, sans-serif" size="5"
color="#003366"><dtml-var title upper><br></font></b></i>
<font size="1" face="Arial, Helvetica, sans-serif"><dtml-var
breadcrumbs></font> </div>

<div align="left">

<table>
<td>
<a href="index_html" onMouseOut=di20('ro3_home_up','Images/ro3_home_up');"
onMouseOver="di20('ro3_home_up','Images/ro3_home_up_F2');MM_displayStatusMsg
('Human
Resources Home Page');return document.MM_returnValue"><img SRC=ro3_home_up"
NAME="ro3_home_up" ALT="Human Resources Home Page" BORDER=0 HEIGHT=18
WIDTH=38>
</a>
</td>
</table>
</div>width=38></a></td>

[Zope] Javascripts again

Adam Getchell