Náhled dokumentu při přejetí odkazu myší JavaScriptem

U řady aplikací se nám hodí dát k dispozici náhled odkazovaného dokumentu. V tomto článku využijeme skript ze známého serveru DynamicDrive generující DHTML tooltip pro univerzální náhled obrázku nebo jiného dokumentu při přejetí odkazu myší.

Pro náhled použijeme skript ze serveru DynamicDrive, který však rozšíříme o volbu typu náhledu – obrázek zobrazíme ve zviditelněném divu, jiný typ dokumentu ve zviditelněném iframe. Pro náhled zařadíme také filtr, vytvářející iluzi stínu, a přechod pro pozvolné „objevení se“ náhledu. (Ukázky bannerů jsou převzaty z článku o reklamě a inspiraci.) Prohlédněte si ukázku (zdrojový kód).

Vyjdeme-li z původního návodu, je potřeba odkazy, u kterých chceme zobrazit náhled, doplnit atributy onmouseover a onmouseout, které zajistí zviditelnění a skrytí náhledu. Ukázková stránka může vypadat například takto:

<h1>Náhled bannerů</h1>
<img id=“imgToolTip“ onload=“this.filters[1].Play();“ style=“position: absolute; width:117px; border: 1px solid #CCCCCC; margin: 2px; background-color: #FFFFFF; visibility: hidden; z-index: 100; filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135)progid:DXImageTransform.Microsoft.Fade(duration=0.2,overlap=1.0);“ />
<iframe id=“srcToolTip“ onload=“this.filters[1].Play();“ style=“position: absolute; width:117px; height:15px; border: 1px solid #CCCCCC; margin:0px;padding:0px; background-color: #FFFFFF; visibility: hidden; z-index: 100; filter:progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) progid:DXImageTransform.Microsoft.Fade(duration=0.2,overlap=1.0);“ frameborder=“0″marginheight=“0″ marginwidth=“0″></iframe>
<script type=“text/javascript“ src=“ClientScripts/LinkPreview.js“></script>
<ul>
  <li><a href=“cliobanner.gif“ onmouseover=“showImgTip(this.href);“ onmouseout=“hideImgTip();“ target=“_preview“>Banner 1 (gif)</a></li>
  <li><a href=“cliomtvbanner.swf“ onmouseover=“showSrcTip(this.href);“ onmouseout=“hideSrcTip();“ target=“_preview“>Banner 2 (flash)</a></li>
  <li><a href=“drumbac.swf“ onmouseover=“showSrcTip(this.href);“ onmouseout=“hideSrcTip();“ target=“_preview“>Banner 3 (flash)</a></li>
  <li><a href=“c4.gif“ onmouseover=“showImgTip(this.href);“ onmouseout=“hideImgTip();“ target=“_preview“>Banner 4 (gif)</a></li>
</ul>

Všimněte si definice funkce pro obsluhu události onload – na objekt je ve skriptu aplikován filtr a po načtení je spuštěn přechod. Filtry jsou definovány dva, přičemž první vytváří stín a druhý je použit pro přechod, pozvolné „objevení“. Tento druhý filtr má index 1, proto má povel tvar this.filters[1].Play();. Použité stylování by se patřilo vyjmout do externího souboru, jak obrázek tak iframe jsou identifikovány svým id, takže není ani třeba vytvářet zvláštní třídy. Pouze zde jsem pro zjednodušení použil inline styl v atributu style.

Funkce pro obrázek showImgTip(), hideImgTip() a pro ostatní dokumenty showSrcTip(), hideSrcTip() budou definovány v upraveném skriptu:

var offsetxpoint=-60;
var offsetypoint=20;
var ie=document.all;
var ns6=document.getElementById && !document.all;
var enabletip=false;
var enabletip2=false;
if (ie||ns6)
{
  var tipobj=document.all? document.all[„imgToolTip“] : document.getElementById? document.getElementById(„imgToolTip“) : „“;
  var tipobj2=document.all? document.all[„srcToolTip“] : document.getElementById? document.getElementById(„srcToolTip“) : „“;
}
function ietruebody()
{
  return (document.compatMode && document.compatMode!=“BackCompat“)? document.documentElement : document.body
}
function showImgTip(thetext, thecolor, thewidth)
{
  if (ns6||ie)
  {
// jde o prohlížeč, který dovede co potřebujeme
    if (typeof thewidth!=“undefined“)
// byla zadána šířka, nastavíme
      tipobj.style.width=thewidth+“px“;
    if (typeof thecolor!=“undefined“ && thecolor!=““)
// byla zadána barva pozadí – nastavíme
      tipobj.style.backgroundColor=thecolor;
// aplikujeme filtr pro přechod
    tipobj.filters[1].Apply();
// zadaný text použijeme jako nové URL obrázku
    tipobj.src=thetext;
// nastavit příznak viditelnosti objektu
    enabletip=true
    return false
  }
}
function showSrcTip(thetext, thecolor, thewidth)
{
  if (ns6||ie)
// jde o prohlížeč, který dovede co potřebujeme
  {
    if (typeof thewidth!=“undefined“)
// byla zadána šířka, nastavíme
      tipobj2.style.width=thewidth+“px“;
    if (typeof thecolor!=“undefined“ && thecolor!=““)
// byla zadána barva pozadí – nastavíme
      tipobj2.style.backgroundColor=thecolor;
// aplikujeme filtr pro přechod
    tipobj2.filters[1].Apply();
// zadaný text použijeme jako nové URL pro dokument iframe
    tipobj2.src=thetext;
// nastavit příznak viditelnosti objektu
    enabletip2=true
    return false
  }
}
function hideImgTip()
{
  if (ns6||ie)
  {
    enabletip=false;
    tipobj.style.visibility=“hidden“;
    tipobj.style.left=“-1000px“;
  }
}
function hideSrcTip()
{
  if (ns6||ie)
  {
    enabletip2=false;
    tipobj2.filters[1].Apply();
    tipobj2.style.visibility=“hidden“;
    tipobj2.style.left=“-1000px“;
    tipobj2.src=“;
  }
}
function positionTip(e)
{
  if (enabletip)
  {
    var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
    if (rightedge<tipobj.offsetWidth)
      tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+“px“ : window.pageXOffset+e.clientX-tipobj.offsetWidth+“px“
    else
      if (curX<leftedge)
        tipobj.style.left=“5px“
      else
        tipobj.style.left=curX+offsetxpoint+“px“
    if (bottomedge<tipobj.offsetHeight)
      tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+“px“ : window.pageYOffset+e.clientY-tipobj.offsetHeight -offsetypoint+“px“
    else
      tipobj.style.top=curY+offsetypoint+“px“
    tipobj.style.visibility=“visible“
  }
  else
    if (enabletip2)
    {
      var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
      var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
      var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
      var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
      var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
      if (rightedge<tipobj2.offsetWidth)
        tipobj2.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj2.offsetWidth+“px“ : window.pageXOffset+e.clientX-tipobj2.offsetWidth+“px“
      else
        if (curX<leftedge)
          tipobj2.style.left=“5px“
        else
          tipobj2.style.left=curX+offsetxpoint+“px“
      if (bottomedge<tipobj2.offsetHeight)
        tipobj2.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj2.offsetHeight-offsetypoint+“px“ : window.pageYOffset+e.clientY-tipobj2.offsetHeight-offsetypoint+“px“
      else
        tipobj2.style.top=curY+offsetypoint+“px“
      tipobj2.style.visibility=“visible“
    }
}
document.onmousemove = positionTip;

Skript začíná obvyklým nastavením výchozích hodnot, rozlišením prohlížečů a získáním přístupu k objektům obrázku a iframe. Funkce pro zobrazení a skrytí objektu jsem okomentoval přímo do kódu. Jak je vidět, obrázku i iframu můžeme při přejetí myší nastavovat nejen nové URL, ale i barvu pozadí a šířku, v ukázce toho však nevyužíváme. Pokud by chtěl mít někdo náhledy ve stylu „každý pes jiná ves“, stačí volání zobrazení obrázku nebo iframe doplnit o parametr barvy, případně šířky, například showImgTip(this.href, 'red', '100').

Z původního skriptu dále zůstal zachován princip výpočtu pozice pro zobrazení positionTip(). Tato funkce je volána stále při každém pohybu myší na událost onmousemove a jejím výsledkem je vždy úprava pozice obrázku nebo iframu v závislosti na tom, který z objektů má být zrovna viditelný. Ve skriptu pracujeme s objektem obrázku tipobj a iframe tipobj2, k nimž jsou přidruženy logické proměnné enabletip, enabletip2 ukazující viditelnost objektu.

Náhled můžeme použít pro libovolný dokument, který dovede prohlížeč klienta zobrazit, třeba i pro HTML stránku nebo PDF. Jen je třeba si uvědomit, že v případě, že klient nebude schopen zobrazit dokument přímo, nejspíš se mu objeví dialog pro stažení souboru, což může být otravně nepříjemné. Proto bych mimo TXT nebo HTML dokumentů nabízel náhled jiných typů dokumentů jen tam, kde je opravdu jistota, že lze dokument přímo zobrazit (například v intranetu, kde vím, že klienti mají instalován Acrobat Reader). V případě HTML dokumentů by šlo na dokument uplatnit na událost onload filtr zoom (jako jiné filtry funkční pouze v MSIE), čímž bude zobrazená stránka zmenšená, skutečně jako náhled (pozor, přístup JavaScriptem k dokumentu v iframe je z bezpečnostních důvodů možný jen tehdy, pokud pochází ze stejné domény).

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.