اغلق هذه النافذة  أنت غير مسجل بشبكة ابن الخليج; للتسجيل اضغط هنا; للمساعده وشرح طريقة التسجيل اضغط هنا

شبكة ابن الخليج

Sitemap | Archive | Tag Could
التسجيلالبحثمشاركات اليوماجعل جميع المنتديات مقروءةالأرشيفاعلن معنا





[درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png

مناقشة موضوع [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png في سكربتات وادوات تطوير المواقع; السلام عليكم ورحمة الله وبركاته درس اليوم هو للـ CSS Stylesheets هذا الدرس بيوضح لنا طريقة بسيطة بإستعمال ملفات صور PNG و برمجة CSS لتطبيق تأثير علامة مائية بسيطة على الصور . بإستعمال هالطريقة البسيطة ...

العودة منتدى ابن الخليج> تطوير المواقع و المنتديات> سكربتات وادوات تطوير المواقع

{ مِنَ الْمُؤْمِنِينَ رِجَالٌ صَدَقُوا مَا عَاهَدُوا اللَّهَ عَلَيْهِ فَمِنْهُم مَّن قَضَى نَحْبَهُ وَمِنْهُم مَّن يَنتَظِرُ وَمَا بَدَّلُوا تَبْدِيلاً } الأحزاب23

حادثة الإفك - تفسير ابن كثير وشرح عثمان الخميس



صوتي شرح الشيخ عثمان الخميس لمختصر منهاج السنة النبوية لشيخ الإسلام ابن تيمية كتاب ألفه للرد على الإمامية وهو أشهر كتاب في الرد على الشيعة

رد
 
LinkBackأدوات الموضوعطرق مشاهدة الموضوع
قديم 01-16-2009, 07:52 مساءً   #1 (permalink)
عضو ذهبـــي
 
الصورة الرمزية abdu_go
 
تاريخ التسجيل: Jul 2008
الدولة: KsA’’’،،، I'm from Egypt
العمر: 20
المشاركات: 402
معدل تقييم المستوى: 2328abdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيط
إرسال رسالة عبر مراسل Yahoo إلى abdu_goإرسال رسالة عبر مراسل Skype إلى abdu_go
Talking[درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png

السلام عليكم ورحمة الله وبركاته

درس اليوم هو للـ CSS Stylesheets

هذا الدرس بيوضح لنا طريقة بسيطة بإستعمال ملفات صور PNG و برمجة CSS لتطبيق تأثير علامة مائية بسيطة على الصور .

بإستعمال هالطريقة البسيطة بالتعاون مع مكتبة الصور بإمكانك بسهولة تطبيق علامات مائية إلى كل الصور .

ماهي العلامة المائية ..؟
العلامة المائية هي ختم رقمي يوضع على الصورة , يعرض معلومات حقوق الطبع .

العملية اللي بنوضحه هنا هي بإنشاء صورة PNG شفافة تحوي العلامة المائية اللي بنطبّقه للصور .

إنشاء ملف PNG

إبدأ أول شيء بفتح محرر الصور المفضل عندك , أنشئ مستند جديد ( تقريبا 100 * 100 px ) , صمم علامة العلامة المائية اللي تبي تستعمله , إجعلها باللون الأبيض ( #FFF ) , إختر العلامة المائية اللي أنشئته و ضع الـ opacity إلى 15 % .

إجعل الخلفية شفافة و إحفظ الصورة بصيغة PNG .
احفظها باسم
watermark.png



-------------------------------------


هالحين جاء جزء الـ CSS والـ HTML


على شان نطبّق العلامة المائية لكل الصور الموجودة كل اللي نحتاج اننا نسويه هو أننا نغطي الصور بـ ملف الـ PNG .

على سبيل المثال لو كان عندك مكتبة صور تستعمل الكود التالي لعرض الصور <img src="your-gallery-image.jpg"/> كل اللي تحتاج انك تسويه هو أنك تطبّق DIV حول المنطقة التي تعرض الصور وتُذيّل العلامة المائية تحت الصور ( داخل الـ DIV ) .

كود الـ CSS
كود:
 #watermark_box {
position:relative;
display:block;
}
img.watermark {
position: absolute;
top: 4px;
left: 4px;
}
الـimg.watermark هي كلاس ينسب مواقع كل الصور ( مُخصصة إلى هذا الكلاس ) 4 px تحت و 4 px إلى اليمين , شعار العلامة المائية لن "يُلامس" هوامش الصورة اللي مُطبّق إليها .

كود الـ HTML :

كود HTML:
<div id="watermark_box"><img src="your-image.jpg" alt="Your image"/><img src="watermark.png" class="watermark" alt="Watermark image" /></div>


مع تبديل
راح تكون الصورة بهالشكل


إن شاء الله عجبكم الدرس...

منقوووووووول
منتديات رونو التعليمية
تاريخ النشر : 9 - محرم - 1429



طيب دحين أنا عندي استفسار......

كود الـ HTML
فين أحطه؟؟؟




من مواضيع abdu_go في المنتدى
__________________
لطلب أي برمجة خاصة مدفوعة لتميز بها موقعك قم بإضافتي على البريد التالي:
abdugo@hotmail.com

سيكون أفضل بكثير مما تتخيل وبتقنية الـ AJAX + دعم لموقعك
abdu_go غير متواجد حالياً   رد مع اقتباس
قديم 01-16-2009, 10:35 مساءً   #2 (permalink)
Gulfson.com

 
الصورة الرمزية كرم العربي
 
تاريخ التسجيل: Apr 2006
الدولة: Egypt
المشاركات: 15,092
معدل تقييم المستوى: 53كرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيط
إرسال رسالة عبر مراسل MSN إلى كرم العربي
افتراضيرد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png

طيب عزيزي راح اقولك فين تضع الكود html
ببساطه المكان الذي يعرض فيه صوره تضع قبليه
<div id="watermark_box">

وبعده

<img src="watermark.png" class="watermark" alt="Watermark image" />


لو الصور صعب انك تعدل ملفها
بلغني وانا اعطيك طريقه اسهل من هذه
ملف هت اكسس + ملف php + صوره png



من مواضيع كرم العربي في المنتدى
__________________
Im Back

كرم العربي غير متواجد حالياً   رد مع اقتباس
قديم 01-17-2009, 12:47 صباحاً   #3 (permalink)
عضو ذهبـــي
 
الصورة الرمزية abdu_go
 
تاريخ التسجيل: Jul 2008
الدولة: KsA’’’،،، I'm from Egypt
العمر: 20
المشاركات: 402
معدل تقييم المستوى: 2328abdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيط
إرسال رسالة عبر مراسل Yahoo إلى abdu_goإرسال رسالة عبر مراسل Skype إلى abdu_go
افتراضيرد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png

تسلم كرم العرب على الرد...

لكن انت قصدك أن لازم قبل كل صورة أحط الكود...!

لو كده بلييييييز اديني الطريقة الأسهل حقتك...!
وأكون شاكر لك...^ ^



من مواضيع abdu_go في المنتدى
__________________
لطلب أي برمجة خاصة مدفوعة لتميز بها موقعك قم بإضافتي على البريد التالي:
abdugo@hotmail.com

سيكون أفضل بكثير مما تتخيل وبتقنية الـ AJAX + دعم لموقعك
abdu_go غير متواجد حالياً   رد مع اقتباس
قديم 01-17-2009, 02:13 صباحاً   #4 (permalink)
Gulfson.com

 
الصورة الرمزية كرم العربي
 
تاريخ التسجيل: Apr 2006
الدولة: Egypt
المشاركات: 15,092
معدل تقييم المستوى: 53كرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيط
إرسال رسالة عبر مراسل MSN إلى كرم العربي
افتراضيرد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png

اضافة الكود التالي الى ملف .htaccess ورفعه الى مجلد الصور


كود PHP:
RewriteEngine On
RewriteCond 
%{REQUEST_FILENAME} -f

RewriteRule 
.(gif|jpeg|jpg|png)$ watermark.php [QSA,NC
الخطوة الثانية:
اضافة الكود التالي الى ملف watermark.php ورفعه الى مجلد الصور:

كود:
<?php
// watermark.php

// Path the the requested file
$path = $_SERVER['DOCUMENT_ROOT'].$_SERVER['REQUEST_URI'];

// Load the requested image
$image = imagecreatefromstring(file_get_contents($path));

$w = imagesx($image);
$h = imagesy($image);

// Load the watermark image
$watermark = imagecreatefrompng('watermark.png');
$ww = imagesx($watermark);
$wh = imagesy($watermark);

// Merge watermark upon the original image
imagecopy($image, $watermark, $w-$ww, $h-$wh, 0, 0, $ww, $wh);

// Send the image
header('Content-type: image/jpeg');
imagejpeg($image);
exit();
?>
الخطوة الثالثة:
رفع ملف بالاسم watermark.png يحتوي على العلامة المائية او حقوق الموقع (ويفضل أن تون خلفيته شفافة لكي يعطي مظهرا اجمل)

ملاحظه : افضل عدم ختم الصور من نوع gif لانها ستتعطل عن العمل اذا كانت متحركه



من مواضيع كرم العربي في المنتدى
__________________
Im Back

كرم العربي غير متواجد حالياً   رد مع اقتباس
قديم 01-17-2009, 04:14 مساءً   #5 (permalink)
.::+: Gulf Son :+::.

 
الصورة الرمزية ADMIN
 
تاريخ التسجيل: May 2005
الدولة: بلاد الخليج
المشاركات: 53,991
معدل تقييم المستوى: 53ADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيطADMIN نشيط
إرسال رسالة عبر مراسل ICQ إلى ADMINإرسال رسالة عبر مراسل MSN إلى ADMIN
افتراضيرد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png

مشكورين وبارك الله فيكم اخواني



من مواضيع ADMIN في المنتدى
__________________




يقول الامام مالك رحمه الله:
إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين.

وقال أبو الوفا بن عقيل رحمه الله:
انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق.

وحيد القرن، كسرنا قرنه، ودككنا حصنه، وهدمنا برجه، فخرج يتبختر بعتاده مزهواً بعدده ففللنا حدّه، وقتلنا جنده، وفرقنا صحبه، والفضل لله وحده

ولئن أبيد أبناء دولة الإسلام عن بكرة أبيهم خيرٌ لهم من أن يحكمهم رافضيٌّ خبيث أو أن تستظلّ بغداد برايات الصفويين يوما واحداً.

ADMIN غير متواجد حالياً   رد مع اقتباس
قديم 01-17-2009, 06:09 مساءً   #6 (permalink)
عضو ذهبـــي
 
الصورة الرمزية abdu_go
 
تاريخ التسجيل: Jul 2008
الدولة: KsA’’’،،، I'm from Egypt
العمر: 20
المشاركات: 402
معدل تقييم المستوى: 2328abdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيط
إرسال رسالة عبر مراسل Yahoo إلى abdu_goإرسال رسالة عبر مراسل Skype إلى abdu_go
افتراضيرد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png

مشكووووووووووور كرم العرب عالدرس.....

يسلمووووووووووا

ومشكوور أدمن عالمرور...^ ^



من مواضيع abdu_go في المنتدى
__________________
لطلب أي برمجة خاصة مدفوعة لتميز بها موقعك قم بإضافتي على البريد التالي:
abdugo@hotmail.com

سيكون أفضل بكثير مما تتخيل وبتقنية الـ AJAX + دعم لموقعك
abdu_go غير متواجد حالياً   رد مع اقتباس
قديم 01-22-2009, 01:53 صباحاً   #7 (permalink)
::الدعم والمتابعه::
 
الصورة الرمزية ابورولين
 
تاريخ التسجيل: Oct 2007
الدولة: KsA
المشاركات: 1,254
معدل تقييم المستوى: 41055ابورولين نشيطابورولين نشيطابورولين نشيطابورولين نشيطابورولين نشيطابورولين نشيطابورولين نشيطابورولين نشيطابورولين نشيطابورولين نشيطابورولين نشيط
إرسال رسالة عبر مراسل MSN إلى ابورولين
افتراضيرد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png

بارك الله فيك اخوي كرم على الشرح

وشكرا لصاحب الموضوع

تحياتي وتقديري لشخصكم الكريم



من مواضيع ابورولين في المنتدى
__________________
شبكة ابومرام
http://www.abo-maram.net/

منتديات ابومرام
http://www.abo-maram...t/vb/index.php
ابورولين غير متواجد حالياً   رد مع اقتباس
قديم 01-22-2009, 08:02 صباحاً   #8 (permalink)
عضو ذهبـــي
 
الصورة الرمزية abdu_go
 
تاريخ التسجيل: Jul 2008
الدولة: KsA’’’،،، I'm from Egypt
العمر: 20
المشاركات: 402
معدل تقييم المستوى: 2328abdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيطabdu_go نشيط
إرسال رسالة عبر مراسل Yahoo إلى abdu_goإرسال رسالة عبر مراسل Skype إلى abdu_go
افتراضيرد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png

مشكوووور أبو مرام على مرورك الكريم...



من مواضيع abdu_go في المنتدى
__________________
لطلب أي برمجة خاصة مدفوعة لتميز بها موقعك قم بإضافتي على البريد التالي:
abdugo@hotmail.com

سيكون أفضل بكثير مما تتخيل وبتقنية الـ AJAX + دعم لموقعك
abdu_go غير متواجد حالياً   رد مع اقتباس
رد

العبارات الدلالية
مائية, الصور, css, بإستعمال, درس, png, علامات, إلى, [درس] إضافة علامات مائية إلى الصور بإستعمال css و png, إضافة


أدوات الموضوع
طرق مشاهدة الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG]متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة

المواضيع المتشابهه
الموضوعكاتب الموضوعالمنتدىمشاركاتآخر مشاركة
إضافة الصورالهوى ماهو كلامدروس برمجة مواقع1310-02-2009 11:37 صباحاً
لظهور الصور بمنتداك وليس روابطseragهاكات وشروحات vBulletin 3.[6-5].X608-24-2007 05:05 مساءً
[درس] إضافة الصور إلى الألبوم في المجلةعالية الشانمجلة المنتديات mkPortal3705-06-2007 11:10 صباحاً


منتديات شبكة ابن الخليج

ثقافة جنوب شرق آسيا خواطر المعجم المحيط قاسم أمين جرائم فيديو نتائج المباريات مقاطع صغيرة ملف كامل للعناية بالبشرة هدوء الزوج أمراض العظام عالم حواء ملابس 2007 ادوات مطبخ مطابخ ملف كامل للعناية بالبشرة برامج هندسية برامج ادارة كلمات السر حوارات تقنية العاب حربيه العاب كرة قدم reflexive محاكيات و برامج العاب مسبك ترافيان ملفات فوتوشوب صور الطبيعه sms مجاني ملف كامل للعناية بالبشرة دروس للمبتدئين دروس التصميم دروس فوتوشوب فيديو دروس ايميج ريدي Adobe ImageReadyدروس افتر افكت Adobe After Effect تحميل adobe premiere ملفات مفتوحة Adobe Illustrator دروس تعليمية دروس 3D Studio Max دروس سويتش مبدئة دروس PERL دروس Power Point دروس Unix لينكس و يونكسوندوز WINDOWS دروس اسمبلي ملف كامل للعناية بالبشرة هاكات منوعه vb3.6.7 شروحات لوحة التحكم قسم ستايلات vBulletinمجلة المنتديات mkPortalقسم ستايلات مجلة المنتديات mkPortal Stylesسكربتات وادوات تطوير المواقعمشاكل وحلول الـ مواقع عروض رسلرات آراءفوتوشوبCinema 4Dخامات فوتوشوبفرش فوتوشوباكشن فوتوشوباشكال فوتوشوبدليل مواقعاكتشف شخصيتكاخبارموسوعة الأطفالبوربوينتtorrentاختصار الروابطPageRankتوقيع لاميلكصانع القليترGlitterبرامج


الساعة تعتمد على توقيت جرينتش +3. الساعة الآن 02:50 صباحاً.
Search Engine Optimization by vBSEO 3.1.0

Valid XHTML 1.0 Transitional Valid CSS!Powered by vBulletin® Version 3.7.1,
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd
شبكة و منتديات حبيبى نت  |  شبكة العربي  |   Feeds:   XML   JS   RSS   RSS Feed