تويت
[frame="12 90"]
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
كود CSS لأداة التلميح التى تظهر عند مرور الماوس Tooltip
حياكم الله جميعا
سوف أشرح هنا كود أدوات التلميحات التى تظهر عندما نمرر الماوس أو بالضغط على أحد العناصر أو الصور أو النص
ومن يريد التعديل على الأكواد فليرجع للدورات الرائعة التى تم تقديمها فى القسم التى تخص CSS
الأمر سيتم من خلال مرحلتين
المرحلة الأولى: كود CSS وهو كالتالي
المرحلة الثانية: الكود الذي سيتم وضعه فى جسم الصفحة HTML
[caution]تنبيه :
سترى إختلاف شكل التأثير الذى يظهر فى متصفح الإكسبلورار
[/caution]
يوجد مثال فى المرفقات
[DOWN]=====/ معلومات التحميل \=====
:dw_abc4web:
:download:
:morfqat:
:bar:
.[/DOWN]
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.
[/frame]
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
كود CSS لأداة التلميح التى تظهر عند مرور الماوس Tooltip
حياكم الله جميعا
سوف أشرح هنا كود أدوات التلميحات التى تظهر عندما نمرر الماوس أو بالضغط على أحد العناصر أو الصور أو النص
ومن يريد التعديل على الأكواد فليرجع للدورات الرائعة التى تم تقديمها فى القسم التى تخص CSS
الأمر سيتم من خلال مرحلتين
المرحلة الأولى: كود CSS وهو كالتالي
كود PHP:
a.tooltip {outline:none; } a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:60px; margin-left:-160px; width:240px; line-height:16px; }
a.tooltip:hover span{ display:inline; position:absolute; border:2px solid #FFF; color:#EEE; background:#000 url(images/css-tooltip-gradient-bg.png) repeat-x 0 0; } .callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;} /*CSS3 extras*/
a.tooltip span { border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0px 0px 8px 4px #666; -webkit-box-shadow: 0px 0px 8px 4px #666; box-shadow: 0px 0px 8px 4px #666; opacity: 0.8; }
المرحلة الثانية: الكود الذي سيتم وضعه فى جسم الصفحة HTML
كود PHP:
<div align="center">
<a href="#" class="tooltip"> www.abc4web.net <span> <img class="callout" src="images/callout_black.gif" />
<strong>Most Light-weight Tooltip</strong><br /> This is the easy-to-use Tooltip driven purely by CSS. </span> </a>
<br />
<br />
<br />
<a href="#" class="tooltip"> <img src="images/abc4web.net.gif" /> <span> <img class="callout" src="images/callout_black.gif" /> <strong>CSS only Tooltip</strong><br /> <img src="images/css-tooltip-image.gif" style="float:right;" /> Pure CSS popup tooltips with clean semantic XHTML. </span> </a>
</div>
سترى إختلاف شكل التأثير الذى يظهر فى متصفح الإكسبلورار
[/caution]
يوجد مثال فى المرفقات
[DOWN]=====/ معلومات التحميل \=====
:dw_abc4web:
:download:
:morfqat:
:bar:
.[/DOWN]
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.
تعليق