| Autor | Zpráva | ||
|---|---|---|---|
| gardener Profil |
#1 · Zasláno: 14. 10. 2008, 18:04:23
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 |
#2 · Zasláno: 14. 10. 2008, 18:08:18
|
||
| Taps Profil |
#3 · Zasláno: 14. 10. 2008, 18:29:32
špatný není ani boxover
|
||
| peta Profil |
#4 · Zasláno: 15. 10. 2008, 16:15:43
<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> |
||
|
Časová prodleva: 16 let
|
|||
0