Senin, 07 Juni 2010

Magic Link With a Image

Postingan kali ini mirip dengan post Beben yang sebelumnya mengenai External Link With Image - jQuery. Gambar panah kecil yg selalu ada disamping kanan sebuah link itu loh sob :p Dengan sedikit variasi target='top/new/_blank' menandakan bahwa link tersebut akan terbuka pada New Tab. Dari web yg rencananya akan dijual, menemukan kembali artikel mirip seperti itu sob ;)) ;) Bedanya disini, ikon kecil disebelah kanan berperan untuk menandakan "New Tab" Coba deh dihalaman ini untuk demonya "http://www.codehouse.com/browser_watch/" Gimana? pasti sudah paham :D

Yang dibutuhkan disini, sediakan gambar/ikon kecil beresolusi 12px x 11px sebanyak dua biji dengan warna yg berbeda. Sekarang memasuki tahap selanjutnya.

  1. Letakkan kode CSS berikut diatas/sebelum kode </b:skin>
  2. a.ch-magic-link:link {
    background-color: #EBEBEB;
    }
    img.ch-magic-link {
    margin-left: 3px;
    }
  3. Letakkan scriptnya diantara/didalam tag <head> </head>
  4. <script>
    //<![CDATA[
    /**
    * Copyright (C) 2003, CodeHouse.com. All rights reserved.
    * CodeHouse(TM) is a registered trademark.
    *
    * THIS SOURCE CODE MAY BE USED FREELY PROVIDED THAT IT IS NOT
    * MODIFIED (EXCEPT IN THE SECTION MARKED "MODIFIABLE SECTION") OR DISTRIBUTED,
    * AND IT IS USED ON A PUBLICLY ACCESSIBLE INTERNET WEB SITE.
    *
    * Script Name: Click for Window
    *
    * You can obtain this script at http://www.codehouse.com
    */

    // START MODIFIABLE SECTION
    //------------------------------------------
    magicLink.IMG_URL = "external.gif";
    magicLink.IMG_OVER_URL = "external_over.gif";
    magicLink.CLASS = "ch-magic-link";
    magicLink.TOOLTIP = "TITLE WAKTU MENYOROT GAMBAR KECILNYA";
    //-------------------------------------------
    // END MODIFIABLE SECTION

    // YOU MAY NOT MODIFY THE CODE BELOW
    function magicLink(id)
    {
    var f = arguments.callee;
    var img = document.createElement("img");
    var a = document.getElementById(id);
    var oldAnchorClass = a.className;

    img.title = f.TOOLTIP;
    img.style.cursor = window.ActiveXObject ? "hand" : "pointer";

    img.onmouseover = function()
    {
    this.src = f.IMG_OVER_URL;
    a.className = f.CLASS;
    window.status = a.href;
    }

    img.onmouseout = function()
    {
    this.src = f.IMG_URL;
    a.className = oldAnchorClass;
    window.status = "";
    }

    img.onclick = function()
    {
    window.open(a.href);
    }

    img.src = f.IMG_URL;
    img.className = f.CLASS;
    a.parentNode.appendChild(img);
    }
    //]]>
    </script>
    Mau dibawah tag <head> atau diatas </head> menyimpan scriptnya ;) Perhatikan pada bagian magicLink.IMG_URL, magicLink.IMG_OVER_URL isikan dg link gambarnya. Kalau mau seperti pada demonya silahkan didownload disini Icon.
  5. Save
Cara memakainya nanti waktu menulis sebuah link pada postingan sedikit berbeda :D
<a href="http://example.com" id="NAMA_UNIQUE-ID" title="penjelasan">Magic Link</a><script type="text/javascript">magicLink("NAMA_UNIQUE-ID")</script>
Original post : http://www.codehouse.com/javascript/scripts/magic_link/
  1. http://www.codehouse.com/javascript/script_archive_listing/
  2. http://www.codehouse.com/javascript/scripts/
  3. See you next time :))

Tidak ada komentar:

Posting Komentar