Jak wygenerować podgląd linków do stron WWW w postaci okna pop-up?

Tym razem pokażemy, jak sprawić, aby linki które umieszczamy w artykułach, generowały podgląd po najechaniu nad nie wskaźnikiem myszy. Czyli, jeśli w tekście będzie link www.webhosting.pl, to po najechaniu na link wygeneruje się miniaturka serwisu.

Zaczynamy od pobrania paczki z kodem. Oprócz skryptu znajduje się tam grafika i przykładowa strona. Po pobraniu i rozpakowaniu wysyłamy zawartość na stronę, koniecznie do tego samego folderu.

Następnie linkujemy JavaScript na stronie, gdzie chcemy, aby podgląd był generowany. Pamiętaj o zmianie ścieżki w kodzie.

Potrzebujemy jeszcze dokonać małej zmiany w CSS. Wystarczy skopiować poniższy kod do sekcji <head>:

<script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_linkthumb.js"></script>
<style type="text/css" media="screen">.arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } .arc90_linkpicIMG { padding: 0 4px 4px 0; background: #FFF url(/tools/c/images/linkpic_shadow.gif) no-repeat bottom right; }</style>

Aby wszystko zaczęło działać, wystarczy dodać klasę "linkthumb" do linka na stronie, przykład:

<p>Within this text, I can show a site image on an external link just by adding a class to my anchor tag.</p>
<p>Here is an ordinary <a href="http://www.basement.org" class="linkthumb">basement.org</a> link.</p>
<p>Here's a paragraph without a link.</p>
<p>...

Jeśli chcesz, aby wszystkie linki były okraszane podglądem, wystarczy dodać poniższy skrypt w sekcji <head>:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>arc90 lab | tools: Link Thumbnail</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_linkthumb.js"></script>
<style type="text/css" media="screen">.arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } .arc90_linkpicIMG { padding: 0 4px 4px 0; background: #FFF url(/tools/c/images/linkpic_shadow.gif) no-repeat bottom right; }</style>
<script>arc90_linkThumbUseClassName = false;</script>
</head>

Teraz nie potrzeba już dodawać klasy linkthumb. Przykład działania możecie sprawdzić TUTAJ.

źródło: lab.arc90.com

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

skomentuj »