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.
- Letakkan kode CSS berikut diatas/sebelum kode </b:skin>
- Letakkan scriptnya diantara/didalam tag <head> </head>
- Save
a.ch-magic-link:link {
background-color: #EBEBEB;
}
img.ch-magic-link {
margin-left: 3px;
}
background-color: #EBEBEB;
}
img.ch-magic-link {
margin-left: 3px;
}
<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.Original post : http://www.codehouse.com/javascript/scripts/magic_link/<a href="http://example.com" id="NAMA_UNIQUE-ID" title="penjelasan">Magic Link</a><script type="text/javascript">magicLink("NAMA_UNIQUE-ID")</script>
- http://www.codehouse.com/javascript/script_archive_listing/
- http://www.codehouse.com/javascript/scripts/
- See you next time :))
Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...