Autor Zpráva
gardener
Profil
zdravím

Chtěl bych se zeptat, jak by šlo pomocí CSS, či JS efektivně a esteticky líbivě vyřešit zobrazení formátovaného textu s obrázky po nájezdu myší na aktivní plochu.
Chci tím vyřešit to, že pokud mám například levý sloupec, ve kterém odkazuji na další sekce, tak aby po nájezdu myší se objevila bublina ve které bude zobrazen formátovaný obsah.

Tuší někdo, kde by se na toto téma dalo nalézt nějaké pěkné povídání, vysvětlení..?

Děkuji za jakoukolliv odpověď
Plaváček
Profil
gardener

Vyber si

http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javas cript-css-dhtml/
Taps
Profil
špatný není ani boxover
peta
Profil
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>JS Bublina z title odkazu</title>
<style>
.odkaz {z-index:50; text-decoration:none;}
.text {text-decoration:underline;}
.bublina {z-index:100; position:absolute; display:none; width:200px; padding:.1em .25em; border:1px solid #ec0; background:#ffffe1; color:#000;}
</style>
<script>
function pridejBubliny()
{
var odkazy = document.getElementsByTagName('A');
var i,bublina,bub_obsah,txt_obsah,txt;
for (i=0;i<odkazy.length;i++)
{
if (odkazy[i].title && odkazy[i].title!='')
{
bub_obsah = document.createTextNode(odkazy[i].title); // vytvor v dokumentu novy textovy uzel a napln jej textem z title odkazu
txt_obsah = document.createTextNode(odkazy[i].innerHTML); // vytvor v dokumentu novy textovy uzel a napln jej textem z vnitrku odkazu
txt = document.createElement('SPAN'); // vytvor v dokumentu novy tag SPAN
txt.className = "text"; // nastav pro nej vlastnosti
txt.appendChild(txt_obsah); // pripoj textovy uzel do SPANu
bublina = document.createElement('SPAN'); // vytvor v dokumentu novy tag SPAN
bublina.className = "bublina"; // nastav pro nej vlastnosti
bublina.appendChild(bub_obsah); // pripoj textovy uzel do SPANu
odkazy[i].className = "odkaz"; // nastav pro nej vlastnosti
odkazy[i].title = ""; // smaz title
odkazy[i].innerHTML = ""; // smaz ohsah odkazu
odkazy[i].appendChild(txt); // pripoj SPAN text do odkazu
odkazy[i].appendChild(bublina); // pripoj SPAN bublina do odkazu
odkazy[i].bublina = odkazy[i].getElementsByTagName('SPAN')[1]; // pridej odkaz na bublinu, pro snadnejsi manipulaci pro dalsi scripty
odkazy[i].onmouseout = function(udalost) {this.bublina.style.display = 'none';}; // skryj bublinu
odkazy[i].onmouseover = function(udalost) {this.bublina.style.display = 'block';}; // zobraz bublinu
odkazy[i].onmousemove = function(udalost) // posun bublinu
{
var mys,x,y;
mys = udalost ? udalost : event; // zjisti udalosti mysi pro Moz a IE
x = mys.clientX; // zjisti x
y = mys.clientY; // zjisti y
this.bublina.style.left = x + 12 + 'px'; // nastav bubline pozici
this.bublina.style.top = y + 20 + 'px';
};
}
}
}

window.onload = pridejBubliny;
</script>
</head>

<body>

<h2>Bublina</h2>

<p>Odkazy</p>
<ul>
<li><a href="http://www.google.com" title="odkaz na Google">Google</a></li>
<li><a href="http://jakpsatweb.cz" title="odkaz na Jak psát web">Jak psát web</a></li>
</ul>

<h3>Co se má stát?</h3>
<p>Po načtení stránky se spustí script, který ke kaľdému odkazu přidá bublinu
objevující se při přesunu myąi přes něj s obsahem vlastnosti title.</p>
<p>Poloha bubliny nyní zavisí na aktualních souřadnicích myąi v dokumentu a
na ohraničení prvkem s position relative/absolute. V tuto chvíli je ohraničení
nastaveno na okraje stránky, takľe by se měla bublina správně zobrazovat
u odkazu.</p>
<p>Příklad je upraven ze skriptu od Habendofa.</p>

</body>
</html>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: