[Zope] Javascripts again
Adam Getchell
AdamG@hrrm.ucdavis.edu
Mon, 5 Mar 2001 18:27:29 -0800
This message is in MIME format. Since your mail reader does not understand
this format, some or all of this message may not be legible.
------_=_NextPart_001_01C0A5E4.FE023D20
Content-Type: text/plain;
charset="iso-8859-1"
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>
------_=_NextPart_001_01C0A5E4.FE023D20
Content-Type: text/html;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV=3D"Content-Type" CONTENT=3D"text/html; =
charset=3Diso-8859-1">
<META NAME=3D"Generator" CONTENT=3D"MS Exchange Server version =
5.5.2653.12">
<TITLE>Javascripts again</TITLE>
</HEAD>
<BODY>
<P><FONT FACE=3D"Tahoma">Hi Andrew,</FONT>
</P>
<P><FONT FACE=3D"Tahoma">Thanks all for your directions.</FONT>
</P>
<P><FONT FACE=3D"Tahoma">I looked at Andrew's method, which requires =
setting a property Javascript=3Dyes. 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?</FONT></P>
<P><FONT FACE=3D"Tahoma">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).</FONT></P>
<P><FONT FACE=3D"Tahoma">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:</FONT></P>
<P><FONT FACE=3D"Tahoma">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" ....</FONT></P>
<P><FONT FACE=3D"Tahoma">To do a one button rollover:</FONT>
</P>
<P><FONT FACE=3D"Tahoma">1. Put into Images folder: ro3_home_up.gif, =
ro3_home_up_F2.gif</FONT>
</P>
<P><FONT FACE=3D"Tahoma">2. Put into java_script/js_Rollover DTML =
document:</FONT>
</P>
<P><FONT FACE=3D"Tahoma"><script =
language=3D"JavaScript"></FONT>
<BR><FONT FACE=3D"Tahoma">if (document.images) {</FONT>
<BR><FONT FACE=3D"Tahoma">r03_home_up_F1 =3D new Image(38,18); =
r03_home_up_F1.src =3D "images/ro3_home_up";</FONT>
<BR><FONT FACE=3D"Tahoma">r03_home_up_F2 =3D new Image(38,18); =
r03_home_up_F2.src =3D "images/ro3_home_up_F2";</FONT>
<BR><FONT FACE=3D"Tahoma">}</FONT>
</P>
<P><FONT FACE=3D"Tahoma">/* Function that swaps images. */</FONT>
</P>
<P><FONT FACE=3D"Tahoma">function di20(id, newSrc) {</FONT>
<BR><FONT FACE=3D"Tahoma"> var theImage =3D =
FWFindImage(document, id, 0);</FONT>
<BR><FONT FACE=3D"Tahoma"> if (theImage) {</FONT>
<BR><FONT FACE=3D"Tahoma"> =
theImage.src =3D newSrc;</FONT>
<BR><FONT FACE=3D"Tahoma"> }</FONT>
<BR><FONT FACE=3D"Tahoma">}</FONT>
</P>
<P><FONT FACE=3D"Tahoma">/* Functions that track and set toggle group =
button states. */</FONT>
</P>
<P><FONT FACE=3D"Tahoma">function FWFindImage(doc, name, j) {</FONT>
<BR><FONT FACE=3D"Tahoma"> var theImage =3D =
false;</FONT>
<BR><FONT FACE=3D"Tahoma"> if (doc.images) {</FONT>
<BR><FONT FACE=3D"Tahoma"> =
theImage =3D doc.images[name];</FONT>
<BR><FONT FACE=3D"Tahoma"> }</FONT>
<BR><FONT FACE=3D"Tahoma"> if (theImage) {</FONT>
<BR><FONT FACE=3D"Tahoma"> =
return theImage;</FONT>
<BR><FONT FACE=3D"Tahoma"> }</FONT>
<BR><FONT FACE=3D"Tahoma"> if (doc.layers) {</FONT>
<BR><FONT FACE=3D"Tahoma"> =
for (j =3D 0; j < doc.layers.length; j++) {</FONT>
<BR><FONT =
FACE=3D"Tahoma"> &n=
bsp; theImage =3D FWFindImage(doc.layers[j].document, name, =
0);</FONT>
<BR><FONT =
FACE=3D"Tahoma"> &n=
bsp; if (theImage) {</FONT>
<BR><FONT =
FACE=3D"Tahoma"> &n=
bsp; return (theImage);</FONT>
<BR><FONT =
FACE=3D"Tahoma"> &n=
bsp; }</FONT>
<BR><FONT FACE=3D"Tahoma"> =
}</FONT>
<BR><FONT FACE=3D"Tahoma"> }</FONT>
<BR><FONT FACE=3D"Tahoma"> return (false);</FONT>
<BR><FONT FACE=3D"Tahoma">}</FONT>
</P>
<P><FONT FACE=3D"Tahoma">// stop hiding --></FONT>
</P>
<P><FONT FACE=3D"Tahoma">function MM_preloadImages() { //v2.0</FONT>
<BR><FONT FACE=3D"Tahoma"> if (document.images) {</FONT>
<BR><FONT FACE=3D"Tahoma"> var imgFiles =3D =
MM_preloadImages.arguments;</FONT>
<BR><FONT FACE=3D"Tahoma"> if =
(document.preloadArray=3D=3Dnull) document.preloadArray =3D new =
Array();</FONT>
<BR><FONT FACE=3D"Tahoma"> var i =3D =
document.preloadArray.length;</FONT>
<BR><FONT FACE=3D"Tahoma"> with (document) for (var =
j=3D0; j<imgFiles.length; j++) if =
(imgFiles[j].charAt(0)!=3D"#"){</FONT>
<BR><FONT FACE=3D"Tahoma"> =
preloadArray[i] =3D new Image;</FONT>
<BR><FONT FACE=3D"Tahoma"> =
preloadArray[i++].src =3D imgFiles[j];</FONT>
<BR><FONT FACE=3D"Tahoma"> } }</FONT>
<BR><FONT FACE=3D"Tahoma">}</FONT>
</P>
<P><FONT FACE=3D"Tahoma">function MM_swapImgRestore() { //v2.0</FONT>
<BR><FONT FACE=3D"Tahoma"> if (document.MM_swapImgData !=3D =
null)</FONT>
<BR><FONT FACE=3D"Tahoma"> for (var i=3D0; =
i<(document.MM_swapImgData.length-1); i+=3D2)</FONT>
<BR><FONT FACE=3D"Tahoma"> =
document.MM_swapImgData[i].src =3D document.MM_swapImgData[i+1];</FONT>
<BR><FONT FACE=3D"Tahoma">}</FONT>
</P>
<P><FONT FACE=3D"Tahoma">function MM_swapImage() { //v2.0</FONT>
<BR><FONT FACE=3D"Tahoma"> var i,j=3D0,objStr,obj,swapArray=3Dnew =
Array,oldArray=3Ddocument.MM_swapImgData;</FONT>
<BR><FONT FACE=3D"Tahoma"> for (i=3D0; i < =
(MM_swapImage.arguments.length-2); i+=3D3) {</FONT>
<BR><FONT FACE=3D"Tahoma"> objStr =3D =
MM_swapImage.arguments[(navigator.appName =3D=3D =
'Netscape')?i:i+1];</FONT>
<BR><FONT FACE=3D"Tahoma"> if =
((objStr.indexOf('document.layers[')=3D=3D0 && =
document.layers=3D=3Dnull) ||</FONT>
<BR><FONT FACE=3D"Tahoma"> =
(objStr.indexOf('document.all[') =3D=3D0 && =
document.all =3D=3Dnull))</FONT>
<BR><FONT FACE=3D"Tahoma"> objStr =3D =
'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);</FON=
T>
<BR><FONT FACE=3D"Tahoma"> obj =3D =
eval(objStr);</FONT>
<BR><FONT FACE=3D"Tahoma"> if (obj !=3D null) =
{</FONT>
<BR><FONT FACE=3D"Tahoma"> swapArray[j++] =
=3D obj;</FONT>
<BR><FONT FACE=3D"Tahoma"> swapArray[j++] =
=3D (oldArray=3D=3Dnull || =
oldArray[j-1]!=3Dobj)?obj.src:oldArray[j];</FONT>
<BR><FONT FACE=3D"Tahoma"> obj.src =3D =
MM_swapImage.arguments[i+2];</FONT>
<BR><FONT FACE=3D"Tahoma"> } }</FONT>
<BR><FONT FACE=3D"Tahoma"> document.MM_swapImgData =3D swapArray; =
//used for restore</FONT>
<BR><FONT FACE=3D"Tahoma">}</FONT>
</P>
<P><FONT FACE=3D"Tahoma">function MM_displayStatusMsg(msgStr) { =
//v2.0</FONT>
<BR><FONT FACE=3D"Tahoma"> status=3DmsgStr;</FONT>
<BR><FONT FACE=3D"Tahoma"> document.MM_returnValue =3D =
true;</FONT>
<BR><FONT FACE=3D"Tahoma">}</FONT>
<BR><FONT FACE=3D"Tahoma">//--></FONT>
<BR><FONT FACE=3D"Tahoma"></script></FONT>
</P>
<P><FONT FACE=3D"Tahoma">3. Put into standard_html_header:</FONT>
</P>
<P><FONT FACE=3D"Tahoma"><html></FONT>
<BR><FONT FACE=3D"Tahoma"><head></FONT>
<BR><FONT FACE=3D"Tahoma"><title><dtml-var =
title_or_id></title></FONT>
</P>
<P><FONT FACE=3D"Tahoma"><dtml-if scripts></FONT>
<BR><FONT FACE=3D"Tahoma"> <dtml-comment></FONT>
<BR><FONT FACE=3D"Tahoma"> Include Java =
Scripts Specified by Scripts Property</FONT>
<BR><FONT FACE=3D"Tahoma"> </dtml-comment></FONT>
<BR><FONT FACE=3D"Tahoma"> <META =
HTTP-EQUIV=3D"Content-Script-Type" =
CONTENT=3D"text/javascript"></FONT>
<BR><FONT FACE=3D"Tahoma"> <dtml-with =
java_script></FONT>
<BR><FONT FACE=3D"Tahoma"> <dtml-in =
scripts></FONT>
<BR><FONT =
FACE=3D"Tahoma"> =
<SCRIPT language=3D"JavaScript"</FONT>
<BR><FONT =
FACE=3D"Tahoma"> &n=
bsp; src=3D"<dtml-var BASE0>/java_script/<dtml-var =
sequence-item>"</FONT>
<BR><FONT =
FACE=3D"Tahoma"> =
</SCRIPT></FONT>
<BR><FONT FACE=3D"Tahoma"> =
</dtml-in></FONT>
<BR><FONT FACE=3D"Tahoma"> </dtml-with></FONT>
<BR><FONT FACE=3D"Tahoma"></dtml-if scripts></FONT>
</P>
<P><FONT FACE=3D"Tahoma"></head></FONT>
<BR><FONT FACE=3D"Tahoma"><dtml-comment>By using the method in =
the header, it opens the style sheet once for the entire site.</FONT>
<BR><FONT FACE=3D"Tahoma">global_css is the a DTML method in the root =
folder. </dtml-comment></FONT>
</P>
<P><FONT FACE=3D"Tahoma"><link HREF=3D"<dtml-var =
"global_css.absolute_url()">" =
rel=3D"stylesheet" type=3D"text/css"></FONT>
</P>
<P><FONT FACE=3D"Tahoma"><body =
bgcolor=3D"#FFFFFF"></FONT>
</P>
<P><FONT FACE=3D"Tahoma"><DIV ALIGN=3D"RIGHT"></FONT>
<BR><FONT FACE=3D"Tahoma"><img =
src=3D"Images/ro1_home_up"><img =
src=3D"Images/ro1_contact_up"><img =
src=3D"Images/ro1_search_up"><img =
src=3D"Images/ro1_index_up"></FONT></P>
<P><FONT FACE=3D"Tahoma"><br></FONT>
</P>
<BR>
<P><FONT FACE=3D"Tahoma"><i><b><div =
align=3D"right"><font face=3D"Arial, Helvetica, =
sans-serif" size=3D"5" =
color=3D"#003366"><dtml-var title =
upper><br></font></b></i></FONT></P>
<P><FONT FACE=3D"Tahoma"><font size=3D"1" =
face=3D"Arial, Helvetica, sans-serif"><dtml-var =
breadcrumbs></font> </div></FONT>
</P>
<BR>
<P><FONT FACE=3D"Tahoma"><div align=3D"left"></FONT>
</P>
<P><FONT FACE=3D"Tahoma"><table></FONT>
<BR><FONT FACE=3D"Tahoma"><td></FONT>
<BR><FONT FACE=3D"Tahoma"><a href=3D"index_html" =
onMouseOut=3Ddi20('ro3_home_up','Images/ro3_home_up');"</FONT>
<BR><FONT =
FACE=3D"Tahoma">onMouseOver=3D"di20('ro3_home_up','Images/ro3_home_=
up_F2');MM_displayStatusMsg('Human</FONT>
<BR><FONT FACE=3D"Tahoma">Resources Home Page');return =
document.MM_returnValue"><img SRC=3Dro3_home_up"</FONT>
<BR><FONT FACE=3D"Tahoma">NAME=3D"ro3_home_up" =
ALT=3D"Human Resources Home Page" BORDER=3D0 HEIGHT=3D18 =
WIDTH=3D38></FONT>
<BR><FONT FACE=3D"Tahoma"></a></FONT>
<BR><FONT FACE=3D"Tahoma"></td></FONT>
<BR><FONT FACE=3D"Tahoma"></table></FONT>
<BR><FONT =
FACE=3D"Tahoma"></div>width=3D38></a></td></FONT>
</P>
</BODY>
</HTML>
------_=_NextPart_001_01C0A5E4.FE023D20--