Kommentare

Vorwort:

Dieses Werkzeug in der Excel Jeanie Html ist nur unter einigen Voraussetzungen anzuwenden.
JavaScript Kenntnisse sind nützlich - aber nicht notwendig.
(Wenn Sie aber die Positionen usw.. selber einstellen wollen aber absolut erforderlich. Auch ist der JavaScript Code noch nicht 100 % -Browserfest, d.H. er muss sicherlich noch auf verschiedene Browser angepasst werden.)
Auch die Kenntnisse über ein <div></div> TAG helfen, aber auch dies erhalten Sie als Vorschlagshtml.
Html Kenntnisse setze ich aber voraus, da Sie ja Ihre HP damit bestücken.

Trotzdem müssen Sie auf Ihrer HP - Seite ein wenig selbst Hand anlegen, damit das ganze funktioniert.

Vor allem sollten Sie nachfolgende Hilfe sorgfältig studieren, damit Sie dieses Werkzeug anwenden können.


Um was geht es überhaupt?

In Excel haben Sie beispielsweise folgendes hergestellt mit 2 Kommentaren:
Screenshot:



Nun haben Sie im Register HP Kom den Haken bei Kommentare auslesen gesetzt und als Option für den Evanthandler onClick ausgewählt.
Danach haben Sie die Schaltfläche Kompakt betätigt.
Es ist ein Html Code entstanden, der folgendes auf der Seite darstellt:
( Wichtiger Hinweis: JavaScript muss aktiviert sein bei dem Leser Ihrer Website - also jetzt auch bei Ihnen)
(Getestet wurde es bisjetzt nur mit dem Internetexplorer und dem FireFox)

Klick mich für mehr
Ohne Kommenar
Ohne Kommenar
Ohne Kommenar
Klick mit Bild

Klicken Sie einfach auf die entsprechenden Zellen, bzw dann auf den erscheinenden Kommentar.

Erste Analyse:

Wie Ihnen sicherlich gleich aufgefallen ist, wurde im ersten Kommentar weder die Fettschrift noch der Umbruch hinter Kommentar berücksichtigt.

Dies hat einen einfachen Grund:
Der Kommentar wird so ausgelesen, wie er ist und nicht wie er erscheint.
Praktisch als Html.
Das Einzige, was zusätzlich geschieht ist, dass manuelle Zeilenumbrüche durch ein <br /> ersetzt werden und das Umlaute und ß codiert werden.
Ansonsten ist es html, welches angenommen wird. (Ähnlich der Maskierung einer Zelle)
Wollen Sie also formatieren, so müssen Sie dies selbst html codiert in den Kommentar schreiben.
Aber dadurch erhalten wir auch die Möglichkeit, z.B. Bilder einzubinden.

Im zweiten Kommentar können wir diese Wirkung gut sehen.
Zum einen wurde ein Bild TAG erstellt, zum anderen der nachfolgende Text in <b></b> Tags für fett eingerahmt.

Sie sehen, Ihrer Fantasie sind hier wenig Grenzen gesetzt.

Ein Beispiel html Code

Sie können nachfolgenden Code, so wie er ist, als html Seite aufbauen.
Er ist ganz simple gestrickt und soll nur die wichtigen Punkte herausheben:
<html><head>
<script type="text/javascript">
<!--
function ohide() { o=document.getElementById("ko"); o.style.visibility="hidden";}
function akt(o,h) { w= (o.offsetWidth); g= (o.offsetHeight); var x =0, y = 0; if (o.offsetParent) { x = o.offsetLeft;y = o.offsetTop; while (o = o.offsetParent) { x += o.offsetLeft;y += o.offsetTop;} } od=document.getElementById("ko");od.style.position="absolute"; od.style.visibility = "visible";od.style.top=(y) + "px";od.style.left=(x + w) +"px"; od.innerHTML=h;}
-->
</script>


</head>

<body onload="ohide();"


<!-- ######### Start Erzeugter Html Code zum Kopieren ########## -->


<table border="1" cellspacing="0" cellpadding="0" style="font-family:Arial,Arial; font-size:10pt; background-color:#ffffff; padding-left:2pt; padding-right:2pt; ">
<colgroup>
<col style="width:132px;" />
</colgroup>
<tr style="height:17px ;">
<td style="background-color:#008080; color:#ffffff; font-weight:bold; vertical-align:bottom; "
onClick="akt(this,'Peter Haserodt&#58;<br /><br />Na so was, dies ist ein Kommentar der in der HP erscheint.');">Klick mich f&uuml;r mehr</td>
</tr>
<tr style="height:17px ;">
<td style="vertical-align:bottom; ">Ohne Kommenar</td>
</tr>
<tr style="height:17px ;">
<td style="vertical-align:bottom; ">Ohne Kommenar</td>
</tr>
<tr style="height:17px ;">
<td style="vertical-align:bottom; ">Ohne Kommenar</td>
</tr>
<tr style="height:17px ;">
<td style="background-color:#008080; color:#ffffff; font-weight:bold; vertical-align:bottom; "
onClick="akt(this,'&lt;img src=&#34;http&#58;//www.excel-jeanie-html.de/gra/ejh4.JPG&#34; widh= height= &nbsp;/&gt; &lt;b&gt; Viele Gr&uuml;&szlig;e von Excel Jeanie Html&lt;/b&gt;<br />');">Klick mit Bild</td>
</tr>
</table>
<!-- ######### Ende Erzeugter Html Code zum Kopieren ########## -->

<div id="ko" style="white-space:nowrap; border-style:inset; border-width:2px; border-color:#000080;
background-color:#ffffd9; visibility=hidden;position=absolute;padding:5px" onClick="ohide();"></div>


</body></html>

Code Analyse

Die blau im Kasten dargestellten Html Codes müssen Sie selbst in Ihre Seite einfügen.

1.) Der JavaScript - Code

Diesen können Sie natürlich auch in eine .js auslagern und darauf verweisen.
Auch können Sie diesen nach Wunsch ändern. Wichtig bleiben die Funktionsnamen.
Sie müssen auch selbst testen ob dies für alle Browser so funktioniert oder ob da Verbesserungen möglich sind.
Stellen Sie Ihre Verbesserungsvorschläge ins Forum:Excel Jeanie Html Forum

Beachten Sie die Platzierung des Codes zwischen den head tags.

2.)Der body tag
Hier muss die JavaScript Anweisung hinein, um zu gewährleisten, dass das div tag für den Kommentar bei Start auch wirklich ausgeblendet wird.


3.) Der div tag

Auch mit diesem können Sie experimentieren. z.B. die Border Farbe etc..

Beachten Sie die Platzierung des Codes vor dem schließenden body tag, genau dort gehört es hin!


Im erzeugten Html Code sehen Sie farblich hervorgehoben die entscheidenen Überträge aus den Kommentaren.
Wichtig ist hier, dass Sie keine Umbrüche erzeugen. Diese führen unweigerlich zu Fehlern.

Im nächsten Kasten nocheinmal der mögliche komplette html Code. Die von Ihnen einzugebenden Texte sind hervorgehoben.


<html><head>

<script type="text/javascript">
<!--
function ohide() {o=document.getElementById("ko"); o.style.visibility="hidden";}
function akt(o,h) { w= (o.offsetWidth); g= (o.offsetHeight); var x =0, y = 0; if (o.offsetParent) { x = o.offsetLeft;y = o.offsetTop; while (o = o.offsetParent) { x += o.offsetLeft;y += o.offsetTop;} } od=document.getElementById("ko");od.style.position="absolute"; od.style.visibility = "visible";od.style.top=(y) + "px";od.style.left=(x + w) +"px"; od.innerHTML=h;}
-->
</script>


</head>

<body
onload="ohide();">

<table border="0" cellspacing="0" cellpadding="0" style="font-family:Arial,Arial; font-size:10pt; background-color:#ffffff; padding-left:2pt; padding-right:2pt; ">
<colgroup>
<col style="width:132px;" />
</colgroup>
<tr style="height:17px ;">
<td style="background-color:#008080; color:#ffffff; font-weight:bold; vertical-align:bottom; " onClick="akt(this,'Peter Haserodt&#58;<br /><br />Na so was, dies ist ein Kommentar der in der HP erscheint.');">Klick mich f&uuml;r mehr</td>
</tr>
<tr style="height:17px ;">
<td style="vertical-align:bottom; ">Ohne Kommenar</td>
</tr>
<tr style="height:17px ;">
<td style="vertical-align:bottom; ">Ohne Kommenar</td>
</tr>
<tr style="height:17px ;">
<td style="vertical-align:bottom; ">Ohne Kommenar</td>
</tr>
<tr style="height:17px ;">
<td style="background-color:#008080; color:#ffffff; font-weight:bold; vertical-align:bottom; " onClick="akt(this,'&lt;img src=&#34;http&#58;//www.excel-jeanie-html.de/gra/ejh4.JPG&#34; widh= height= &nbsp;/&gt; &lt;b&gt; Viele Gr&uuml;&szlig;e von Excel Jeanie Html&lt;/b&gt;<br />');">Klick mit Bild</td>
</tr>
</table>


<div id="ko" style="white-space:nowrap; border-style:inset; border-width:2px; border-color:#000080;
background-color:#ffffd9; visibility=hidden;position=absolute;padding:5px" onClick="ohide();"></div>



</body></html>

Zum Abschluss

  1. Setzen Sie dieses Feature niemals in Foren ein. Foren blockieren automatisch JavaScript.
  2. Testen Sie es mehrfach, damit Sie ein Gefühl dafür bekommen.
  3. Beachten Sie, den JavaScriptCode und den div tag in Ihre HP zu implementieren
  4. Fragen im Forum stellen: Excel Jeanie Html Forum