<pre>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;Ajax Script4All_DIV - www.bei123.de - Alles aus baseportal herausholen&lt;/title&gt;
&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot;&gt;
&lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot;&gt;
&lt;meta http-equiv=&quot;Content-Script-Type&quot; content=&quot;text/javascript&quot;&gt;
&lt;script type=&quot;text/javascript&quot; language=&quot;JavaScript&quot;&gt;function _DO(x){eval(x);}&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
body{
    background-image:url(http://bei123.de/images/bg-page.jpg);
    background-repeat:repeat-x;
    background-color:#FFFFFF;
    color: black; 
    font-size: 100.01%;
    font-family: helvetica,georgia,arial,sans-serif;
    }

var {
    font-family:arial;
    font-style:normal;
    }

&lt;/style&gt;
&lt;/head&gt;&lt;body&gt;
&lt;perl&gt;
$clgif=&quot;&lt;img src='http://bei123.de/images/close1.gif' border=0 alt='(close)' align='right'&gt;&quot;;
$INTRO=&quot;&lt;img src='http://bei123.de/files/bei123_bp_office.gif' border=0 alt='' align='right'&gt;&lt;font size=6&gt;...&amp;copy;DEMO der DIV-Verwaltung&lt;/font&gt;&lt;br&gt;&lt;br&gt;&quot;;
$INTRO.=&quot;&lt;br&gt;&lt;b&gt;;-)&lt;/b&gt; ...Es werden jetzt auch die Links mit &lt;i&gt;Sonder- und Leerzeichen&lt;/i&gt; von AJAX verarbeitet&lt;br&gt;&quot;;
$INTRO.=&quot;Getestet mit den Browsern:&lt;ul&gt;&quot;;
$INTRO.=&quot;&lt;li&gt;Google Chrome 1.0.154.36&lt;/li&gt;&quot;;
$INTRO.=&quot;&lt;li&gt;Firefox 3.0.5&lt;/li&gt;&quot;;
$INTRO.=&quot;&lt;li&gt;Internet Explorer 7.0.5730.13&lt;/li&gt;&quot;;
$INTRO.=&quot;&lt;li&gt;Opera 9.61&lt;/li&gt;&quot;;
$INTRO.=&quot;&lt;/ul&gt;&quot;;
$INTRO.=&quot;&lt;br&gt;Der Code : &lt;b&gt;&lt;a href='http://baseportal.de/cgi-bin/baseportal.pl?show=&quot;.$htx.&quot;' target='_BLANK'&gt;&quot;.$htx.&quot;&lt;/a&gt;&lt;/b&gt;&lt;br&gt;&quot;;
$INTRO.=&amp;colorfull(&quot;Ajax Script4All_DIV&quot;, [255,0,0], [0,0,255],60);
$INTRO=&quot;&lt;div style='padding:2px'&gt;$INTRO&lt;/div&gt;&lt;br&gt;&quot;;
&amp;DEFINITION();
#-------------------------------------------------------------------------------------------------- MEN&Uuml;
out &quot;&lt;DIV style='border:1px solid silver'&gt;&quot;;
out &quot;&lt;div style='border:1px solid silver;border-bottom:1px solid #a0a0a0;border-right:1px solid #a0a0a0;border-top:1px solid #f0f0f0;border-left:1px solid #f0f0f0;background-image:url(http://bei123.de/images/grad1.jpg);background-repeat:repeat-y;background-color:#ffd700'&gt;&amp;nbsp;&lt;var id='menu'&gt;&lt;font color='#ffffff'&gt;&lt;b&gt;Datei&lt;/b&gt;&lt;/font&gt;&lt;/var&gt;&amp;nbsp;&quot;.$show{BaseLink}-&gt;('M&uuml;&szlig;li-Produktion').&quot;&amp;nbsp;&amp;nbsp;&quot;.$show{BaseLink}-&gt;('Gut@B&ouml;se $VAR %HASH').&quot;&amp;nbsp;&amp;nbsp;&quot;.$show{BaseLink}-&gt;('Phantom Coupé').&quot;&amp;nbsp;&amp;nbsp;&quot;.$show{BaseLink}-&gt;('Be&szlig;mann &amp; M&uuml;ller');
out &quot;&lt;/div&gt;&quot;; 
out &quot;&lt;div id='DIV1' style='background-color:#ffffff;'&gt;$INTRO&lt;/div&gt;&quot;; ## siehe 2.)
out &quot;&lt;/DIV&gt;&quot;;
#-------------------------------------------------------------------------------------------------------
sub DEFINITION
{##--------------------------------------------------------------------------------- Hauptmen&uuml; definieren
%show =
(
BaseLink =&gt; sub{my $BL=convert_html($_[0]);return qq{&lt;a name=&quot;$BL&quot; onclick='DO(&quot;div=DIV1&quot;+&quot;&amp;&quot;+&quot;P=&quot;+encodeURIComponent(this.name)+&quot;&quot;)' style=&quot;padding:2px;border-left:1px solid #ffffff;border-right:1px solid #f0f0f0;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;background-color:#e0e0e0;color:blue;font-weight:normal;cursor:pointer;font-size:1em&quot; onMouseOver='this.style.backgroundColor=&quot;#ffffff&quot;,this.style.color=&quot;#000000&quot;,this.style.fontWeight=&quot;normal&quot;' onMouseOut='this.style.backgroundColor=&quot;#e0e0e0&quot;,this.style.color=&quot;blue&quot;,this.style.fontWeight=&quot;normal&quot;'&gt;&amp;nbsp;$BL&amp;nbsp;&lt;/a&gt;}},
);
}## &amp;nbsp;


################################################################################ die Ausf&uuml;hrungsroutinen ##

sub MY_DIV1
{##
$MY_DIV1=&quot;&lt;img src='http://bei123.de/files/bei123_bp_office.gif' border=0 alt='' align='right'&gt;&lt;b&gt;$div&lt;/b&gt;&lt;br&gt;&quot;;
$MY_DIV1.=&quot;Aufruf von: &lt;b&gt;$P&lt;/b&gt; &quot;;
#-------------------------------------------------------------------------------------------- AnwendungLink
my $wert1=&quot;STARTDIV&quot;;
my $wert2=&quot;zum_TESTEN&quot;;
my $dps=&quot;wert1=$wert1&amp;wert2=$wert2&quot;;     #--------------------------------- zu &uuml;bergebende Div-Params
#------------------------------------------------
$Option1=&amp;DIV_OPEN(&quot;DIV2&quot;,&quot;more&quot;,&quot;$dps&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;Jetzt zeig mal, was Du kannst&quot;);# Option1
$CLOSE=&amp;DIV_CLOSE(&quot;DIV2&quot;,&quot;div2 beenden&quot;,&quot;&quot;,&quot;color:#d80000;font-weight:bold;cursor:pointer&quot;);# - Close
#---------------------------------------------- Anzeige
$MY_DIV1.=&quot;&lt;p&gt;TEST, Mal ein paar Variablen durchschleusen:&lt;br&gt;\$wert1=$wert1 - \$wert2=$wert2&lt;/p&gt;&lt;br&gt;I want $Option1 Div's&lt;br&gt;&lt;br&gt;&lt;br&gt;&quot;;
$MY_DIV1.=&quot;$CLOSE&lt;div id='DIV2'&gt;&lt;/div&gt;&quot;;
#----------------------------------------------
return(&quot;&lt;div style='padding:2px'&gt;$MY_DIV1&lt;/div&gt;&lt;br&gt;&quot;);
}##

sub MY_DIV2
{##
#------------------------------------------------------------------------------------- Closer aktivieren
out(qq|document.getElementById(&quot;c$div&quot;).style.display=&quot;block&quot;;|); 
#----------------------------------------------------------------------- neue Optionen &amp; Close definieren
my $wert1=&quot;$wert1&quot;;
my $wert2=&quot;WAS_NEUES&quot;;
my $dps=&quot;wert1=$wert1&amp;wert2=$wert2&quot;; 
$Option1=&amp;DIV_OPEN(&quot;DIV3&quot;,&quot;Open transparent&quot;,&quot;$dps&quot;,&quot;Information&quot;,&quot;&quot;,&quot;&quot;,&quot;Und los gehts mit $wert1 und $wert2 - transparent&quot;);#--- Option1
$CLOSE=&amp;DIV_CLOSE(&quot;DIV3&quot;,&quot;$clgif&quot;,&quot;$dps&quot;);# --------------------------------------------------------- Close
#-------------------------------------------------------------------------------------------- Inhalt DIV2
$MY_DIV2=&quot;&lt;b&gt;$div&lt;/b&gt; zu &lt;b&gt;$P&lt;/b&gt;&lt;br&gt;&quot;;
$MY_DIV2.=&quot;$wert1 $wert2 &lt;p&gt;Und noch ein paar Divs: $Option1&lt;/p&gt;&quot;;
#------------------------------------------------------------------------------------- ein kleines Formular
$MY_DIV2.=&quot;&lt;dfn id='FORMULAR' style='font-weight:bold'&gt;Meine Anfrage&lt;/dfn&gt; Name:&lt;input type='text' id='NAME' style='width:150px'&gt;&lt;textarea id='TEXTAREA' rows=5 style='width:100%'&gt;&lt;/textarea&gt;&lt;br&gt;&quot;;
#--------------------------------------------------------------------------------------- Eingabe &uuml;bernehmen 
# 4.SubroutinenWert = javascript Anweisung, kann man f&uuml;r Felder-Verarbeitung (foreach())nutzen
#
$Option2=&amp;DIV_OPEN(&quot;DIV3&quot;,&quot;(Senden)&quot;,&quot;wert1=Irgednwas&amp;wert2=NICHTS&quot;,&quot;TEST&quot;,&quot;'+encodeURIComponent(document.getElementById('FORMULAR').innerHTML)+'&amp;'+'Text='+encodeURIComponent(document.getElementById('TEXTAREA').value)+'&amp;'+'Name='+encodeURIComponent(document.getElementById('NAME').value)+'&quot;,&quot;color:green;font-weight:bold;cursor:pointer&quot;,&quot;KLICK Senden, wenn Sie einen Text eingegeben haben&quot;);#--- Option2
#-------------------------------------------------------------------------------------- WEITERER Inhalt DIV2
$MY_DIV2.=&quot;Ein Div mit Text $Option2 (Demo)&quot;;
#------------------------------------------------------------------------------------------------------------
$MY_DIV2.=&quot;&lt;DIV style='position:absolute;top:50;left:300;width:500px;'&gt;&lt;DIv style='background-image:url(http://bei123.de/images/grad1.jpg);background-repeat:repeat-y;background-color:#ffd700;width:100%;text-align:right;font-size:0.8em;'&gt;$CLOSE&lt;/DIv&gt;&lt;Div style='text-align:left;position:absolute;background-color:#f0f0f0;opacity:0.9;filter:alpha(opacity=90);height:400px'&gt;&lt;div id='DIV3'&gt;&lt;/div&gt;&lt;/Div&gt;&lt;/DIV&gt;&quot;;
#------------------------------------------------------------------------------------------------------------
return(&quot;&lt;div style='border:2px dotted #d80000;width:50%'&gt;$MY_DIV2&lt;/div&gt;&quot;);
}##

sub MY_DIV3
{##
out(qq|document.getElementById(&quot;c$div&quot;).style.display=&quot;block&quot;;|);
#---------------------------------------------------------------
$MY_DIV3=&quot;&lt;b&gt;$div&lt;/b&gt;(transparent) zu &lt;b&gt;$P&lt;/b&gt;&quot;;
#------------------------------------------------------------------------------------------ crazy HACK
$MY_DIV3.=&quot;&lt;br&gt;&lt;br&gt;\$wert1 = $wert1 &lt;br&gt;\$wert2 = $wert2&lt;br&gt;\$M = &lt;font color=red&gt;$M&lt;/font&gt; &lt;br&gt;js-\$JS &quot;.eval($JS).&quot; &quot;.($JS ne &quot;&quot; ? &quot; Wert mit &lt;b&gt;eval(\$JS)&lt;/b&gt; geholt ;-) &lt;br&gt;&quot;:&quot;&quot;); #### ausbauf&auml;hig !!!!!
#-----------------------------------------------------------------------------------------------------
if($JS ne &quot;&quot;)#---- JavaScript &uuml;bergeben ?
{#--------------------------------------------------------------------------------------- convertieren
$JS=convert_utf8($JS);
$JS=convert_html($JS);
#-------------------------
$Text=convert_html($Text);
$Text=convert_br($Text);
#----------------------------------------------------------------------------------------------------
$MY_DIV3.=&quot;&lt;br&gt;Anzeige in neuem DIV&lt;div id='JS$div' style='width:100%;color:#000000;font-size:0.8em;background-color:#ffffff;height:100px;overflow:auto'&gt;&lt;div style='padding:2px'&gt;&lt;b&gt;$JS&lt;/b&gt;&lt;br&gt;&lt;font color='blue'&gt;&quot;.($Name ne &quot;&quot; ? html2text($Name):&quot;n.n.&quot;).&quot;&lt;/font&gt;&lt;br&gt;$Text&lt;/div&gt;&lt;br&gt;&lt;/div&gt; u.s.w.&quot;;
}
#-----------------------------------------------------------------------------------------------------
$MY_DIV3.=&quot;&lt;b&gt;.. zuvor noch kein Text eingegeben!&lt;/b&gt;&quot; if($Text eq &quot;&quot; &amp;&amp; $M eq &quot;TEST&quot;);
return(&quot;&lt;div style='width:500px;border-top:1px solid #a0a0a0;'&gt;&lt;div style='padding:2px'&gt;$MY_DIV3&lt;/div&gt;&lt;/div&gt;&quot;);
}##

############################################################################# Ausf&uuml;hrungsroutinen Ende ##

#********************************************************************** N&uuml;tzliche/hilfreiche Subroutinen#
sub colorfull
{#####################------------------------------------------------------------ Farbe ins Spiel bringen
my($str,$left,$right,$size)=@_;
my @step;
$step[$_] = ($right-&gt;[$_] - $left-&gt;[$_]) / (length($str) - 1) for (0 .. 2);
my @chars = split //, $str;
@chars=map{sprintf(&quot;&lt;font style='font-size:%dpx;color:#%02x%02x%02x'&gt;$chars[$_]&lt;/font&gt;&quot;, $size, $left-&gt;[0] + $_ * $step[0], $left-&gt;[1] + $_ * $step[1], $left-&gt;[2] + $_ * $step[2])}(0 .. $#chars);
return join(&quot;&quot;, @chars);
}#####################

sub html2text 
{#####################----------------------------- entfernt html-tags und gibt nur Text ohne HTML zur&uuml;ck
my $html=$_[0];
($text = $html) =~ s/&lt;(\/|!)?[-.a-zA-Z0-9]*.*?&gt;//g;
return($text);
}#####################

#**********************************************************************************************************


#################################### DIV-Funktions-Subroutinen #############################################
sub DIV_OPEN
{## ------------------------------------------------------------------------- Funktion: neues Div &ouml;ffnen
my($wid,$wnn,$wp,$wm,$wjs,$wcss,$wt)=@_;
#-------------------------------------------------------------- und evtl. noch weitere
#1. $wid  = Name des zu &ouml;ffenenden Div, 
#2. $wnn  = LinkText,
#3. $wp   = Parameter z.b. &quot;wert1=16&amp;eingabe=Halo&quot;
#4. $wm   = Modul lt. %hash noch zu definieren !!!!!!!!!!!
#5. $wjs  = js-Routinen &uuml;bernehmen
#6. $wcss = CSS-Style des OpenLinks
#7. $wt   = title
#---------------------------------------------------------------
$wcss     = $wcss||&quot;color:blue;font-weight:bold;cursor:pointer&quot;;
$wt       = $wt||&quot;Zeige $wid zu $P&quot;;
#--------------------------------------------------------------------------------------------------------
my $wo=&quot;&lt;a name='$P' onclick=(DO('div=$wid&amp;P='+encodeURIComponent(this.name)+'&amp;$wp&amp;M=$wm&amp;JS=&quot;.$wjs.&quot;')) style='$wcss' title='$wt'&gt;$wnn&lt;/a&gt;&quot;;
return($wo);
}##

sub DIV_CLOSE
{## ------------------------------------------------------------- Funktion: offenes Div wieder schlie&szlig;en
my($wid,$wnn,$wp,$wcss,$wt)=@_;
#-------------------------------------------------- DA kann man beim Schlie&szlig;en auch noch MEHR machen !!!   
#1. $wid  = Name des zu &ouml;ffenenden Div,
#2. $wnn  = LinkText,
#3. $wp   = Parameter z.b. &quot;wert1=16&amp;eingabe=Halo&quot;
#4. $wcss = CSS-Style des CloseLinks
#5. $wt   =title
#--------------------------------------------------------------
$wnn      = $wnn||&quot;(close $wid)&quot;;
$wcss     = $wcss||&quot;color:#000000;font-weight:normal;cursor:pointer&quot;; 
$wt       = $wt||&quot;Beende $wid zu $P&quot;;
#--------------------------------------------------------------------------------------------------------
my $wc=&quot;&lt;var id='c$wid' style='display:none'&gt;&lt;a name='$P' onclick=(DO('div=$div&amp;P='+encodeURIComponent(this.name)+'&amp;$wp')) style='$wcss' title='$wt'&gt; $wnn &lt;/a&gt;&amp;nbsp;&lt;/var&gt;&quot;;
return($wc);
}##

sub NULL
{##
out(qq|document.getElementById(&quot;menu&quot;).innerHTML=&quot;&lt;font color='#ffffff'&gt;&lt;b&gt;Datei&lt;/b&gt;&lt;/font&gt;&quot;;|);
#--------------------------------------------------------------------
return(qq|document.getElementById(&quot;DIV1&quot;).innerHTML=&quot;$INTRO&quot;;|); #-- Zur&uuml;ck
}##

sub DIV1
{##
$W1=&amp;MY_DIV1();
return(qq|document.getElementById(&quot;DIV1&quot;).innerHTML=&quot;$W1&quot;;|);
}########

sub DIV2
{##
$W2=&amp;MY_DIV2();
return(qq|document.getElementById(&quot;DIV2&quot;).innerHTML=&quot;$W2&quot;;|);
}##

sub DIV3
{##
$W3=&amp;MY_DIV3();
return(qq|document.getElementById(&quot;DIV3&quot;).innerHTML=&quot;$W3&quot;;|);
}##
sub Modus_Option
{############################# Auswahl als Optionionen darstellen
($SUB)=@_;
#---------------------------------------------------------------------------------------------------
$m=&quot;&lt;form style='float:left;margin:0px;'&gt;&lt;select name='Liste' style='width:15em;padding:0px;font-size:0.9em;background-color:#f0f0f0;'&quot;; 

#onchange=showquote(1,'key='+this.form.Liste.options[this.form.Liste.selectedIndex].value+'')&gt;&lt;option value='' style='color:blue' &gt;Auswahl&lt;/option&gt;&lt;optgroup label=&quot;&quot;&gt;&quot;;

# onclick=(DO('div=$wid&amp;P='+encodeURIComponent(this.name)+'&amp;$wp&amp;M=$wm&amp;JS=&quot;.$wjs.&quot;'))

#$m.=&quot; onchange=(DO('div=DIV2&amp;P='+this.form.Liste.options[this.form.Liste.selectedIndex].value+'&amp;$wp&amp;M=$wm&amp;JS=&quot;.$wjs.&quot;'))&gt;&quot;;

$m.=&quot; onchange=(DO('div=DIV2&amp;P='+encodeURIComponent(this.form.Liste.options[this.form.Liste.selectedIndex].value)+'&amp;$wp&amp;M=$wm&amp;JS=&quot;.$wjs.&quot;'))&gt;&quot;;

#$m.=&quot;&lt;optgroup&gt;&lt;option&gt;&lt;/option&gt;&lt;option style='color:blue'&gt;Auswahl &quot;.convert_html(convert_utf8($SUB)).&quot;&lt;/option&gt;&lt;/optgroup&gt;&lt;optgroup&gt;&quot;;

$m.=&quot;&lt;optgroup label='Auswahl $SUB'&gt;&lt;/optgroup&gt;&lt;optgroup&gt;&quot;;

foreach(@menu1)
{#------------------------------------------------------------------------------
$m.= &quot;&lt;option value=&quot;.convert_utf8($_).&quot;&gt;&quot;.convert_html(convert_utf8($_)).&quot;&lt;/option&gt;&quot;;
}#------------------------------------------------------------------------------
$m.=&quot;&lt;/optgroup&gt;&quot;;
$m.= &quot;&lt;/select&gt;&lt;/form&gt;&amp;nbsp;&quot;;
return($m);
}###########################
sub script
{## ------------------------------------------------------------------------------ ein Script f&uuml;r alle !!
out(qq|document.getElementById(&quot;menu&quot;).innerHTML=&quot;&lt;a onclick=(DO('div=NULL')) style='color:#ffffff;font-weight:bold;cursor:pointer;'&gt;Home&lt;/a&gt;&quot;;|);
#--------------------------------------------------------------------------------- Men&uuml;namen convertieren
$P=convert_utf8($P);
$P=convert_html($P);
out &amp;$div(); #-------------------------------------------------------------------- die DIV-Subs ausf&uuml;hren
}##
&lt;/perl&gt;
&lt;/body&gt;&lt;/html&gt;
&lt;perl script=DO&gt;&amp;script();&lt;/perl&gt;
&lt;div style=&quot;display:block&quot;&gt;&lt;center&gt;&lt;banner type=&quot;banner&quot;&gt;&lt;/center&gt;&lt;/div&gt; 
</pre>