abohmam
16-12-2012, 09:05 PM
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
كود CSS لأداة التلميح التى تظهر عند مرور الماوس Tooltip
http://www.kinu.co.tz/wp-content/uploads/2012/10/html-css.jpg (http://www.abc4web.net/)
http://www.abc4web.net/upload/images2/rrkicojgvtsntgp.jpg (http://www.abc4web.net/upload/)
http://www.abc4web.net/upload/images2/w2zsudaxqnv1kgx.jpg (http://www.abc4web.net/upload/)
حياكم الله جميعا
سوف أشرح هنا كود أدوات التلميحات التى تظهر عندما نمرر الماوس أو بالضغط على أحد العناصر أو الصور أو النص
ومن يريد التعديل على الأكواد فليرجع للدورات الرائعة التى تم تقديمها فى القسم التى تخص CSS
الأمر سيتم من خلال مرحلتين
المرحلة الأولى: كود CSS وهو كالتالي
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
<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>
تنبيه :
سترى إختلاف شكل التأثير الذى يظهر فى متصفح الإكسبلورار
يوجد مثال فى المرفقات
=====/ معلومات التحميل \=====
:dw_abc4web:
:download:
:morfqat:
:bar:
.
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
كود CSS لأداة التلميح التى تظهر عند مرور الماوس Tooltip
http://www.kinu.co.tz/wp-content/uploads/2012/10/html-css.jpg (http://www.abc4web.net/)
http://www.abc4web.net/upload/images2/rrkicojgvtsntgp.jpg (http://www.abc4web.net/upload/)
http://www.abc4web.net/upload/images2/w2zsudaxqnv1kgx.jpg (http://www.abc4web.net/upload/)
حياكم الله جميعا
سوف أشرح هنا كود أدوات التلميحات التى تظهر عندما نمرر الماوس أو بالضغط على أحد العناصر أو الصور أو النص
ومن يريد التعديل على الأكواد فليرجع للدورات الرائعة التى تم تقديمها فى القسم التى تخص CSS
الأمر سيتم من خلال مرحلتين
المرحلة الأولى: كود CSS وهو كالتالي
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
<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>
تنبيه :
سترى إختلاف شكل التأثير الذى يظهر فى متصفح الإكسبلورار
يوجد مثال فى المرفقات
=====/ معلومات التحميل \=====
:dw_abc4web:
:download:
:morfqat:
:bar:
.
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.