ToolTip
ToolTip je rámeček, který se objeví po najetí na určitou část stránky. Můžou tam být napsané nějaké podrobnější informace nebo nápověda. Znamý je z on-line her (BiteFight, Gladiatus, Katsuro ...).
Kompatibilita
Současná verze eStránek: | ANO |
Nová verze eStránek: |
ANO |
Testováno 2. ledna 2010
Příklad
Najeďte na tento text ...
Zdrojový soubor
Aby na vašich stránkách fungoval tooltip, musíte si na ně nejdřív nahrát zdrojový kód:
-
Stáhněte si tento soubor.
-
Rozbalte ho a soubor tooltip.js otevřete v Poznámkovém bloku (Start - Programy - Příslušenství) - můžete použít i jiný program na editaci kódu, já používám PSPad.
-
Najděte v něm toto:
//---------------------------------------------------------
// Configuration
//---------------------------------------------------------
this.width = 200; // width (pixels)
this.bgColor = "#000000"; // background color
this.textFont = "Times New Roman"; // text font family
this.textSize = 15; // text font size (pixels)
this.textColor = "#ffffff"; // text color
this.border = "1px solid #ffffff"; // border (CSS spec: size style color, e.g. "1px solid #D00000")
this.opacity = 90; // opacity (0 - 100); not supported by all browsers
this.cursorDistance = 15; // distance from mouse cursor (pixels)
this.xPos = 'right'; // horizontal position: "left" or "right"
this.yPos = 'bottom'; // vertical position: "top" or "bottom"
#000000 - Kód barvy pozadí
Times New Roman - Písmo
15 - Velikost písma v pixelech (4px = 3pt)
#ffffff - Barva textu
1 - Šířka rámečku
#ffffff - Barva rámečku
90 - Průlednost (0 - neviditelný, 100 - neprůhledný)
15 - Vzdálenost od kurzoru
right - Horizontální pozice od kurzoru (right - napravo, left - nalevo)
bottom - Vertikální pozice od kurzoru (top - nahoře, bottom - dole) - Upravený soubor uložte a nahrajte do Nastavení - Rozšířené - Soubory.
- Otevřete Nastavení - Vzhled - Design - Úprava kódu šablony - Hlavní šablona.
- Za <head> vložte:
<script src="url" type="text/javascript"></script>
Vložení
Zdrojový kód máme nahraný a teď si ukážeme, jak ToolTip k nejakému objektu vložit.
- Vytvořte nebo si otevřete již vytvořený příspěvek nebo stránku.
- Přepněte si na HTML pomocí tlačítka "WYSIWYG / HTML" nad editorem.
- Vyberte si nějaký <tag> například <p> - řádek. Po najetí na řádek se zobrazí ToolTip.
- Do tagu vložte:
<p onmouseover="toolTip('text')" onmouseout="toolTip()"> - Uložte a máte hotovo
Komentáře
Přehled komentářů
Bude to fungovat i na tag b ???
<b onmouseover="toolTip('text')" onmouseout="toolTip()">Text</b>
Baegus - Skvělé
Je to bezvadný! Mám to na webu a je to fakt hezký a jednoduchý. *THUMBS_UP*
belliko - ToolTip
Nejde to vůbec, ažádný ko dse nezobrazuje, je to jednoduché tak, že to ani nejde. prosím porad
123456789 - toolTip