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

abdu_go · 01-16-2009, 07:52 مساءً

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

درس اليوم هو للـ 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
فين أحطه؟؟؟

كرم العربي · 01-16-2009, 10:35 مساءً

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

وبعده

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

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

abdu_go · 01-17-2009, 12:47 صباحاً

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

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

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

كرم العربي · 01-17-2009, 02:13 صباحاً

اضافة الكود التالي الى ملف .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 لانها ستتعطل عن العمل اذا كانت متحركه

ADMIN · 01-17-2009, 04:14 مساءً

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

abdu_go · 01-17-2009, 06:09 مساءً

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

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

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

ابورولين · 01-22-2009, 01:53 صباحاً

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

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

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

abdu_go · 01-22-2009, 08:02 صباحاً

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

01-16-2009, 07:52 مساءً	#1 (permalink)
abdu_go عضو ذهبـــي تاريخ التسجيل: Jul 2008 الدولة: KsA’’’،،، I'm from Egypt العمر: 20 المشاركات: 402 معدل تقييم المستوى: 2328	[درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال 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 في المنتدى إعلانات خاصة لكل قسم+إعلانات افتراضية لباقي الأقسام+إعلانات خاصة للرئيسية By ABDUGO ثيمات ناروتو رووعة كود إعلان متغير بعد كل تحديث بعدد لا نهائي من الإعلانات.. تبادل إعلاني مع المرعبين بادئة لكل عضو بملفه الشخصي من اختيار العضو صورة ونص روووعة ولكل النسخ __________________ لطلب أي برمجة خاصة مدفوعة لتميز بها موقعك قم بإضافتي على البريد التالي: abdugo@hotmail.com سيكون أفضل بكثير مما تتخيل وبتقنية الـ AJAX + دعم لموقعك

01-16-2009, 10:35 مساءً	#2 (permalink)
كرم العربي Gulfson.com تاريخ التسجيل: Apr 2006 الدولة: Egypt المشاركات: 15,092 معدل تقييم المستوى: 53	رد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png طيب عزيزي راح اقولك فين تضع الكود html ببساطه المكان الذي يعرض فيه صوره تضع قبليه <div id="watermark_box"> وبعده <img src="watermark.png" class="watermark" alt="Watermark image" /> لو الصور صعب انك تعدل ملفها بلغني وانا اعطيك طريقه اسهل من هذه ملف هت اكسس + ملف php + صوره png من مواضيع كرم العربي في المنتدى خدمة جديد من جووجل للمبرمجين : Google Code Search شرح ترقيه الاستايل من النسخ القديمه الى الجديده بالصور لعبة mad truckers [شرح] منع أخذ روابط الصور من موقعك لوحة تحكم [كود] تكبيرة العيد للمنتديات __________________ Im Back

01-17-2009, 12:47 صباحاً	#3 (permalink)
abdu_go عضو ذهبـــي تاريخ التسجيل: Jul 2008 الدولة: KsA’’’،،، I'm from Egypt العمر: 20 المشاركات: 402 معدل تقييم المستوى: 2328	رد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png تسلم كرم العرب على الرد... لكن انت قصدك أن لازم قبل كل صورة أحط الكود...! لو كده بلييييييز اديني الطريقة الأسهل حقتك...! وأكون شاكر لك...^ ^ من مواضيع abdu_go في المنتدى استفسار عن المجموعات الاجتماعية... تصميم مرعب .. ممنوع ضعاف القلب من تصميمي فلاش استضافة... صور أعضاء ابن الخليج بطريقتي ؟!!! المباريات الإصدار الثاني [ أكثر من مجرد مباريات ] - Matchs 4 vB V 2.0 BY ABDUGO __________________ لطلب أي برمجة خاصة مدفوعة لتميز بها موقعك قم بإضافتي على البريد التالي: abdugo@hotmail.com سيكون أفضل بكثير مما تتخيل وبتقنية الـ AJAX + دعم لموقعك

01-17-2009, 02:13 صباحاً	#4 (permalink)
كرم العربي Gulfson.com تاريخ التسجيل: Apr 2006 الدولة: Egypt المشاركات: 15,092 معدل تقييم المستوى: 53	رد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال 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 لانها ستتعطل عن العمل اذا كانت متحركه من مواضيع كرم العربي في المنتدى لعبة pirates: battle for the caribbean شرح تركيب الفلاش شات موسوعة الشعراوى الشاملة .. هنا تجد كل ما يخص الشيخ الشعراوى من خواطر وخطب ومحاضرات [module][All] قصائد مدح الرسول صلي الله عليه وسلم DFX Audio Enhancer 8.500 __________________ Im Back

01-17-2009, 04:14 مساءً	#5 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 53,991 معدل تقييم المستوى: 53	رد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png مشكورين وبارك الله فيكم اخواني من مواضيع ADMIN في المنتدى ضرب الجالية المسمله بالصور والفيديو نقل المسجات بأجهزة Nokia Symbian آخر ماتوصلو اليه كيبورد بالليزر فوائد الشاي الاخضر برنامج O&O Defrag 10 PRO كامل - يعمل على إلغاء تجزئة الملفات ورفع اداء الجهاز وسرعته __________________ يقول الامام مالك رحمه الله: إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين. وقال أبو الوفا بن عقيل رحمه الله: انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق. وحيد القرن، كسرنا قرنه، ودككنا حصنه، وهدمنا برجه، فخرج يتبختر بعتاده مزهواً بعدده ففللنا حدّه، وقتلنا جنده، وفرقنا صحبه، والفضل لله وحده ولئن أبيد أبناء دولة الإسلام عن بكرة أبيهم خيرٌ لهم من أن يحكمهم رافضيٌّ خبيث أو أن تستظلّ بغداد برايات الصفويين يوما واحداً.

01-17-2009, 06:09 مساءً	#6 (permalink)
abdu_go عضو ذهبـــي تاريخ التسجيل: Jul 2008 الدولة: KsA’’’،،، I'm from Egypt العمر: 20 المشاركات: 402 معدل تقييم المستوى: 2328	رد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png مشكووووووووووور كرم العرب عالدرس..... يسلمووووووووووا ومشكوور أدمن عالمرور...^ ^ من مواضيع abdu_go في المنتدى مقطع يوتيوب المفضل للعضو في ملفه الشخصي باختياره.. كيف أنقل أعضاء من منتدى قديم لجديد؟؟؟ رحلة أغنى رجل بالعالم .. بيل غيتس.. حماية الموقع... سكربت CrAzy TeXt GeNeRaToR للكتابه بأشكال مختلفه __________________ لطلب أي برمجة خاصة مدفوعة لتميز بها موقعك قم بإضافتي على البريد التالي: abdugo@hotmail.com سيكون أفضل بكثير مما تتخيل وبتقنية الـ AJAX + دعم لموقعك

01-22-2009, 01:53 صباحاً	#7 (permalink)
ابورولين ::الدعم والمتابعه:: تاريخ التسجيل: Oct 2007 الدولة: KsA المشاركات: 1,254 معدل تقييم المستوى: 41055	رد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png بارك الله فيك اخوي كرم على الشرح وشكرا لصاحب الموضوع تحياتي وتقديري لشخصكم الكريم من مواضيع ابورولين في المنتدى نصائح من Google إلى أصحاب المواقع منع البرامج التي تسحب الموقع كامل استايل [ الأميرة ] هدوء وتميز المنتدى يقفل في وجه الاعضاء لا تقول باك اب موقعي ضاع او مو عارف انقل موقعي تعال شرح اخذ نسخ احتياطيه وتركيبها __________________ شبكة ابومرام 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 معدل تقييم المستوى: 2328	رد: [درس] إضافة علامات مائية لكل الصور بمنتداك بإستعمال Css و Png مشكوووور أبو مرام على مرورك الكريم... من مواضيع abdu_go في المنتدى تبادل إعلاني مع ما بعد منتصف الليل كود منع النسخ ورسالة عند الضغط باليمين أضف كصديق مثل FaceBook ب AJAX الإصدار 2.0 لا تعديل + متوافق مع كل المتصفحات ABDUGO المراقب الصارم لا تغفل عينك عن منتداك لحظة - Open Eyes BY ABDUGO رحلة أغنى رجل بالعالم .. بيل غيتس.. __________________ لطلب أي برمجة خاصة مدفوعة لتميز بها موقعك قم بإضافتي على البريد التالي: abdugo@hotmail.com سيكون أفضل بكثير مما تتخيل وبتقنية الـ AJAX + دعم لموقعك

أدوات الموضوع
عرض نسخة صالحة للطباعة أرسل هذا الموضوع إلى صديق
طرق مشاهدة الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

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

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

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