!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

Javascript
tooltip
Børre Stenseth
JavaScript > Noen biblioteker >PageTip

Pagetip

Hva
Pagetip som tooltip

Vi ønsker å vise en forklaring eller sammendrag av den siden vi lenker til. Dette sammendraget skal komme opp når vi drar musa over linken. Slik sett blir det en paralell til det vi kjenner som "tooltip" i desktopapplikasjoner.

Noen eksempler:

HiØ
HiØ
Grafisk databehandling

Den aktuelle XHTML-koden ser slik ut

<div>
<a href="http://www.hiof.no"
   onmouseover="changestyle('hiof', 'visible');" 
   onmouseout="changestyle('hiof','hidden');">HiØ</a>
</div>
<div style="position: absolute; z-index: 10;">
    <div style="visibility: hidden;" id="hiof" class="summary">
        <b>Høgskolen i Østfold</b><br/>
        Ligger i to byer: Halden og Fredrikstad.
    </div>
</div>

Javascriptkoden er enkel:

function changestyle(eltId, style) 
{
  var elt=document.getElementById(eltId);
  if(elt)
    elt.style.visibility = style;                            
}
/

Stilen som er involver er slik:

.summary {
        color: #000000;
        font-size: 11px;
        padding: 5px;
        border: 1px solid #324C48;
        background-color: yellow;
        visibility: hidden;
        position: absolute;
        left: 50px;
        z-index: 2000;
        top: 0px;
        width: 300px;
    }

Det trenger selvsagt ikke være linker vi illustrerer på denne måten. Dra cursor over linja under:

Ronaldinho og Kaka er to brasilianske fotballspillere som har vært i AC Milan

Referanser

Den aktuelle koden er sitert i teksten.

Vedlikehold

B. Stenseth, desember 2008

( Velkommen ) JavaScript > Noen biblioteker >PageTip ( CSS-klasser )