Linuchs: Programmdokumentation: Help-Texte anzeigen

Beitrag lesen

SELF-Forum

Programmdokumentation: Help-Texte anzeigen

Linuchs
– Informationen zu den Bewertungsregeln 
<span class="help">
  <span onclick="getHelptext( 'remso.eu', '0', '[ich]', '[meinZugang]', 'p000', 'de' )"><img src="img/icon_hilfe.gif" alt="?" title="Helptext" /></span>
  <span id='p000_help' onclick="this.style.display='none';"></span>
</span>

CSS zur Klasse help <link rel=stylesheet href="css/helptext.css">:

/* *********************************************************************
 * remso 2016-03-15  zum Helpsystem gehoert
 * 
 * 1. Tabelle helptexte
 * 2. /000/p033_ajax.php
 * 3. <link rel=stylesheet      href="css/helptext.css">
 * 4. <script src="css/ajax_getHelptext.js"></script>
 
 <span class="help">
  <span onclick="getHelptext( '[HOST]', '0', '[kw]', '[ll]', 'treffpunkt', '[sprache]' )"><b>N</b></span>
  <span id='treffpunkt_help' onclick="this.style.display='none';"></span>
</span><!-- oder <img src="img/icon_hilfe.gif" alt="?" /> -->

 * 
 * ********************************************************************* */

/* 2016-03-09 */
span.help { /* Umgebung fuer Helptext */
  position: relative;
}
span.help span:nth-of-type(1) { /* Klick-Bereich */
  color: #00a;
  cursor: help;
}
span.help span:nth-of-type(1) img { /* wenn Bild als Klick-Bereich */
  height: 1em;
}
span.help span:nth-of-type(2) { /* Helptext-Feld */
  position: absolute;
  font-size: 12pt; /* unabhaengig von h1, p, ... */
  white-space: normal;
  display: none;
  left: -12em;
  width: 30em;
  top: 1.7em;
  padding: 5px;
  background-color: #ffc;
  border: 1px solid #f00;
  border-radius: 4px;
  color: #000;
  text-align: left;
  z-index: 2;
  cursor: normal;
}
span.help>b { /* fetter Feld-Buchstabe */
  color: #00a;
  cursor: help;
}
/* ENDE */
Beitrag melden
–
Informationen zu den Bewertungsregeln