Trik Komputer: Magic Link With a Image

Postingan kali ini mirip dengan post Beben yang sebelumnya mengenai . 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.

Letakkan kode CSS berikut diatas/sebelum kode </b:skin>

a.ch-magic-link:link {
background-color: #EBEBEB;
}
img.ch-magic-link {
margin-left: 3px;
}

Letakkan scriptnya diantara/didalam tag <head> </head>

<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>

<head>

</head>

magicLink.IMG_URL

magicLink.IMG_OVER_URL

Icon

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/

http://www.codehouse.com/javascript/script_archive_listing/
http://www.codehouse.com/javascript/scripts/
See you next time :))

Trik Komputer

Senin, 07 Juni 2010

Magic Link With a Image

Tidak ada komentar:

Posting Komentar