کد تول تایپی که با کلیک نمایش داده می شود

این کد زیبا با استفاده از جی کوئری ساخته شده است، اینطور که شما با کلیک روی هر لینکی که در آن از شناسه name استفاده شده است و متن درون name آن با id تگ دیگر مطابقت کند عمل می کند.

برای استفاده از آن شما باید حتما خاصیت name تگ a با خاصیت id تگ دیگر یکی باید ت اکد عمل کند. این کار برای این انجام شده که شما به راحتی بتوانید چند لینک از این نوع در صفحه خود قرار دهید.

برای دیدن دمو اینجا کلیک کنید.

کد زیر را درون head صفحه خود قرار دهید (در صورتی که در صفحه شما فایل jQuery وجود دارد خط اول را حذف کنید):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(document).ready(function() { // www.moisrex.rozblog.com $('.hide').append(' <img align="absmiddle" src="http://rozup.ir/up/moisrex/Pictures/icon/exit.png" class="imgshow" alt=" X ">') $('a').click(function(e) { var s=$(this).attr('name'); $('#'+s).fadeIn().css({'left':e.pageX,'top':e.pageY}); }); $('.imgshow').click(function() { $('.hide').fadeOut(); }); }); </script> <style> /* code by www.moisrex.rozblog.com */ .hide{ display:none; padding:10px; border:1px #000 solid; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -khtml-border-radius:5px; background:#fff; position:absolute; z-index:100; direction:rtl; text-align:right; font:11px tahoma; } .imgshow{ cursor:pointer; } </style>

این کد را هر جا که دوست دارید (تگ body) قرار دهید:

<div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/" title="کدستان">کد تول تایپی که با کلیک نمایش داده می شود</a></div> <a name="show" href="#">عنوان لینک</a> <div id="show" class="hide"> توضیحات </div>