www.tvobastranek.org tvorba www stránek,Seo optimalizace, grafické práce, CMS United Nuke moduly, vzhledy, SEO plugins

Bublinková nápověda

Potřebujete někde v textu nebo v bloku či modulu nápovědu třeba na určitý výraz
Nebo prostě jen nápovědu k odkazu ,aby uživatelé věděly co je čeká?
Samozřejmě někdy stačí jen alt=“sem něco“ nebo title="Domů" ,ale ne vždy jeto dostačující a vyhovující Nehledě na fakt ,že to máte v jednom řádku a hlavně nezobrazí se to ve všech prohlížečích.
Jde o CSS a možno to dát i do modulu nebo bloku.Výhoda je taková ,že bito mělo jít ve všech prohlížečích. CSS které potřebujete je :

Kód:

<style type="text/css" id="default" title="default" > p { text-align: arial; } p a { font-weight: bold; cursor: help; background: #ffffff; color: black; text-decoration: none; } p a:hover { background: #ffffff; } p a span { position: relative; font-size: 90%; font-weight: normal; text-align: left; } p a span span { display: block; position: absolute; visibility: hidden; top: 2em; left: .5em; padding: .2em .5em; width: 10em; background: #ffffff; border: solid #000000 4px; } p a:hover span span { visibility: visible; } </style>

Toto je řádek z samotnou nápovědou a ta vypadá třeba takto:(CSS musí bejt nad tímto řádkem !!!!)

Kód:

<p> <a href="#" class="help"><span>Zde jakýkoliv text<span>Skryta nápověda je tu </span></span>Toto</a> </p>

Pokud by jste chtěly například odkaz z funkci okénka z nápovědou pro Block tak to celé vypadá takto:

Kód:

<?php #### Vygenerovano pomoci Creatoru na Blassenwebu (http://blassenweb.net) ### if (stristr($_SERVER['SCRIPT_NAME'], basename(__FILE__)) OR !defined('UN_KERNELFILES_LOADED')) { Header("Location: ../index.php"); die(); } ?> <style type="text/css" id="default" title="default" > p { text-align: justify; } p a { font-weight: bold; cursor: help; background: #fafafa; color: black; text-decoration: none; } p a:hover { background: #ffffff; } p a span { position: relative; font-size: 90%; font-weight: normal; text-align: left; } p a span span { display: block; position: absolute; visibility: hidden; top: 2em; left: .5em; padding: .2em .5em; width: 10em; background: #fafafa; border: solid #8A8887 2px; } p a:hover span span { visibility: visible; } </style> <? $content ="<p>Web o United NukeHjosef.net "; ?>

Mno a jeto,myslím že to je vše podotýkám v CSS nejsem žádnej profík pokud je tam nějaká chyba nebo jeto zbytečně dlouhé rád si nechám od někoho poradit. Mě to tak funguje a doufám ,že i vám se to bude třeba hodit.
Celý článek je mým majetkem a bez mého souhlasu zakazuju jeho kopírování a další publikace!!!

Autor: dracek