المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : إضافة تأثير صوتي على الأزرار بالجافا hover button with Sound


abohmam
16-03-2010, 04:12 AM
بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

حياكم الله جميعا

سأل أحد الأخوة عن طريقة إضافة تأثير صوتي عند المرور بالماوس على الأزرار بلغة CSS أو بالجافا Java
ووعدته أن أقدم له الشرح على ذلك ولكنى تأخرت قليلا فى طرح الدرس إنتظارا للدورة التى قدمها الأخ رائد وألخ محمود بارك الله فيهما
والتى تخص لغة XHTML وكذلك CSS وهذه اللغات التى سوف نعتمد عليها فى شرح بعض التطبيقات ان شاء الله ،
لذلك يجب المرور علي هذه الدورة قبل الخوض فى محاولة التطبيق لأى شرح سيتم وضعه مستقبلا إن شاء الله تعالى .
حتى يسهل معرفة المصطلحات وكذلك المراد بأماكن الأكواد ويسهل التطبيق وتتم الفائدة بإذن الله .

شرحنا اليوم عن طريقة إضافة تأثير صوتي على الأزرار

فهناك طريقة يمكن إستخدامها عن طريق برنامج فرونت بيج ولكن ليست مرنه لأنك سوف تضيف التأثير لكل زرار على حده
وهنا رابط للشرح من موقع مايكروسوفت لإضافة صوت من خلال برنامج فرونت بيج :dw4: (http://office.microsoft.com/en-us/frontpage/HP052728111033.aspx)
أما فى طريقتنا هذه فسوف نستخدم الجافا لإضافة التأثير على كل روابط الصفحة أو القائمة أو عند المرور على زرار واحد ....

الشرح المختصر والكود المستخدم:

هذا الكود يتم وضعه فى هيدر الصفحة أى بعد <HEAD> مباشرة
وتنبه إلى تحديد مسار ملف الصوت "var soundfile"


<bgsound src="#" id="soundeffect" loop=1 autostart="true" />

<script type="text/javascript">
/***********************************************
* JavaScript Sound effect- © Dynamic Drive DHTML code library
* Visit http://www.abc4web.netfor hundreds of scripts
* This notice must stay intact for legal use
***********************************************/

var soundfile="sidebar.wav" //مسار ملف الصوت , or pass in filename directly into playsound()

function playsound(soundfile){
if (document.all && document.getElementById){
document.getElementById("soundeffect").src="" //reset first in case of problems
document.getElementById("soundeffect").src=soundfile
}
}

function bindsound(tag, soundfile, masterElement){
if (!window.event) return
var source=event.srcElement
while (source!=masterElement && source.tagName!="HTML"){
if (source.tagName==tag.toUpperCase()){
playsound(soundfile)
break
}
source=source.parentElement
}
}
</script>

هذا كود لربط الزرار بملف الصوت الإفتراضي الذى تم تحديده فى كود الجافا

<a href="#" onMouseover="playsound(soundfile)">Example 1</a>


وهذا مثال لربط الزرار مع ملف صوت جديد 'different.wav'

<a href="#" onMouseover="playsound('different.wav')">Example 2</a>


حول الشرح الذى فى الكتاب :

قمت بإضافة الشرح فى كتاب إلكتروني لسهولة الإحتفاظ به وكذلك لإمكانية عرض الأمثلة والتطبيقات
وكذلك مع الكتاب ديمو للشرح مفتوح للإستخدام ملف html + ملفات صوت + قائمة css مع ملفات الصوت

واجهة الكتاب

http://www.abc4web.net/vb/uploaded/1_11268702755.jpg (http://www.abc4web.net/vb)

صفحة الشرح

http://www.abc4web.net/vb/uploaded/1_21268705401.jpg (http://www.abc4web.net/vb)

بعض الأمثلة ويوجد المزيد

http://www.abc4web.net/vb/uploaded/1_01268705401.jpg (http://www.abc4web.net/vb)

http://www.abc4web.net/vb/uploaded/1_11268705401.jpg (http://www.abc4web.net/vb)

ملفات صوت للتحميل

http://www.abc4web.net/vb/uploaded/1_01268705463.jpg (http://www.abc4web.net/vb)


أنا سامع من يقول أن شكل كتاب الشرح يحتاج لشرح ايضا :abc_022: يعنى محتاج كتالوج !!!

مافى مشكلة إن شاء الله كل شئ قد تم شرحه فى الكتاب ولله الحمد حتى شرح الأيقونات ..... :abc_145: فقط إضغط على مساعدة .
الكتاب فقط لفتح الشهية حول تعلم هذه المهارات والتى أعترف بأنى بضاعتي فيها قليلة ،
ولكنى أحوال أن أضع بصمات مميزة لما نقدمه لعل نجد من يعوننا فيما لانعلمه ......

نرجع للكتاب وأنصح الجميع بأن تكون دقة الشاشة لاتقل عن 1024 * 768

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

1- أيقونة التحديث الهام : هى تخص تحديث اكسبلورار الويندوز لمن يستخدم إكسبلورار 6 حتى الآن ( لأنه سوف يواجه مشاكل فى تصفح الكتاب ) بل فى التطبيق والمعاينة .
لأن اكسبورار 6 لايدعم تقنية الـ css كاملة وكذلك ظهور الصور الشفافة وكأن لها خلفية رصاصي ، وبعض الخصائص التى مررتم عليها فى دورة CSS مثل الـ index-z و list لايتم دعمها فى هذا الاصدار العقيم لذلك أنصح الجميع بالترقية لأخر إصدار من الإكسبلروار . ( يتوجب الإتصال بالنت ) عند الضغط على التحديث .

2- أيقونة المساعدة : وهى لشرح الأيقونات التى تظهر مع الشرح .

3- أيقونة شرح الأكواد : ومنها تستطيع الذهاب مباشرة إلى شرح إضافة التأثير الى زر واحد أو الى قائمة .

4- أيقونة ملفات الصوت : وهى مجموعة من ملفات الصوت والتأثيرات تم رفعها على الموقع لمن يريد التحميل ( يتوجب الإتصال بالنت )

5- عرض الأكواد بالضغط على أيقونة TXT : عند عرضك للأكواد لنسخها يمكنك الرجوع الى نفس صفحة الشرح بالضغط من لوحة المفاتيح على Backspace وهو مفتاح فوق مفتاح Enter .

أتمنى للجميع الفائدة من هذا الشرح والتوفيق بإذن الله

وأى إستفسار حول الشرح الذى فى الكتاب فنحن جاهزون ان شاءا لله .

والكلام واضح نستقبل أى إستفسار حول موضوع الشرح فقط !!! وبعد محاولة التطبيق .

:download:

لتحميل كتاب إلكتروني يعمل على ويندوز إكس بي XP راجع المرفقات

:morfqat:

لتحميل نسخة تعمل على ويندوز 7 / 8

:download1: (http://www.gulfup.com/?xmLQ3J)

:bar:

ولاتنسونا من صالح دعائكم
.
أبوهمام
:abc_022:
.

محمود عفيفى
16-03-2010, 04:43 AM
ما شاء الله :abc_051:
جزاك الله خيرا أخى أبوهمام وجعل هذا العمل فى ميزان حسناتك
أكيد تم التقييم :abc_145:
جارى التحميل والتطبيق بإذن الله :abc_139:

ذوالجناح
16-03-2010, 07:29 AM
جزاك الله خيراً وبارك الله لك في وقتك وجهدك


أنا سامع من يقول أن شكل كتاب الشرح يحتاج لشرح ايضا :abc_022: يعنى محتاج كتالوج !!!
لا شك.. فسجلك ملئ بسوابق من هذا النوع!

كينج نت
16-03-2010, 01:50 PM
http://www.abc4web.net/vb/uploaded/28_11256767388.gif

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

ليسى بالجديد هذا الابداع اخي العزيز أبوهمام

مجهود طيب وقمه بالروعه والجمال جزاك الله كل خير


أنا سامع من يقول أن شكل كتاب الشرح يحتاج لشرح ايضا :abc_022: يعنى محتاج كتالوج !!!
.

:abc_145:

على مايبدو بأنى سمعي اليوم بشكل جيد فقد تراود لسمعي كذلك شيء من هذا القبيل

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

ومأكد سيكون هذا الشخص من خارج الموقع فطريق الاحتراف ليسى به من هم دون ذلك :abc_088:

مجدداً نشكرك أخي العزيز أبوهمام لجهودك الطيبه

:abc_102:

http://www.abc4web.net/vb/uploaded/28_11256767388.gif

abohmam
16-03-2010, 03:03 PM
حياكم الله إخواني

أشكركم على المرور والتواصل وكلماتكم الطيبة

أخى محمود أسال الله لك التوفيق والتطبيق الناجح :abc_152:
أخي ذو الجناح " طلعتنا سوابق " الله يسامحك المهم يكون العمل ناجحا فى النهاية .. :abc_022:
أخي كينج نت حياك الله أكيد هذه الأعمال جديدة على زوارنا الجدد !!!
أما من بداخل الموقع فنحن نتعلم منهم اللمسات الفنية والحركات الحلزونية واللولبية :abc_051:

بالتوفيق للجميع إن شاءا لله

الدمشقي
16-03-2010, 05:26 PM
شــــ لك ــــكراً أخي الفاضل أبو همام

على مجهودك الجميل في خدمة إخوانك

وجزاك الله خيراً

سالي الفلسطينية
16-03-2010, 07:11 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

الهمام
17-03-2010, 02:39 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

أبو يوسف
17-03-2010, 07:05 PM
جزيت خيرا أخي ابو همام

إن شاء الله نجد الوقت لتعلم كل ما هو مفيد


.

abohmam
24-03-2010, 12:32 PM
بارك الله فيكم جميعا

أخي الدمشقي والأخت سالي والهمام وأبو يوسف

أشكر لكم تواجدكم ومروركم العطر

بالتوفيق إن شاء الله

محمود عفيفى
24-03-2010, 08:07 PM
حياك الله اخى أبوهمام
تطبيقى بالمرفقات

ضرغام
03-04-2010, 10:44 PM
مشكوووور على الشرح الرائع و المفصل

مافيا وورد
09-04-2010, 03:58 AM
شكرررررررررررا

ذوالجناح
19-04-2010, 07:53 PM
أخي ذو الجناح " طلعتنا سوابق " الله يسامحك المهم يكون العمل ناجحا فى النهاية ..


من تأمل الكتب التي تصممها وجد أنها تحتاج إلى مواضيع لشرحها لأنك تجمع مهارات عديدة ومتنوعة فيها، وهذا ماكنت أقصده بالسوابق:abc_051:

فلسطيني
19-04-2010, 11:25 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

abohmam
21-05-2010, 01:26 AM
حياكم الله جميعا

أشكر لكم مروركم العطر وتواصلكم الجاد

لكم جميعا أجمل تحية :abc_152:

mero
23-05-2010, 10:50 PM
بسم الله الرحمن الرحيم

شـكــ وبارك الله فيك ـــرا لك اخي ابو همام :abc_152: لك مني أجمل تحية .

تركي الغامدي
08-06-2010, 07:17 PM
تسلمـ آخوي على الكتاب


وجاري التطبيق

علاء الطنطاوى
18-06-2010, 03:39 PM
تسسسسسسسسسسسسسسسسسسسسسلم

ميسوووون
03-07-2010, 09:02 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

الرجل الرائع
03-07-2010, 01:05 PM
مشكوووووووووووووووووووووو وووووووووور

كومبايلر
25-07-2010, 10:01 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

المبدع مول
25-07-2010, 11:13 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

وجزاك الله خير ....وإن شاء الله افيد من معلومات لدي في هذا المنتدى الثمين.

ابو فاطمة
12-08-2010, 03:54 AM
عليكم السلام ورحمة الله وبركاته

صلى الله عليه وسلم

عاشت ايدك عيوني ابو همام تسلم

:abc_152:

نوكيا
17-08-2010, 10:48 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

الرباط
30-08-2010, 01:40 AM
thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaankz

جحدرر
24-09-2010, 08:12 PM
بسم الله الرحمن الرحيم

الاحساس والطيبة
14-10-2010, 02:33 AM
جزاك الله خير

أبو فارس
14-10-2010, 10:32 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

ميرامار
02-12-2010, 01:44 AM
جزاك الله خيراً :abc_020:

اسلام الشاعر
05-12-2010, 12:34 PM
mrsssssssssssssssssssssssssssssssy

نور احمدعلي شريف
06-12-2010, 12:23 PM
السلام عليكم اشكركم كثيرا لان دتفيدوني هوايا



:abc_152:

جروح بارده
09-01-2011, 08:27 PM
يعطيك العافية

اسير الحبيب
11-01-2011, 08:02 PM
مشكوووووووووووووووووووووو ووووووووووووووور :abc_152:

حمد محمد
11-01-2011, 08:30 PM
http://img524.imageshack.us/img524/9223/0473.gif

ايمن سالم
12-01-2011, 07:48 AM
السلام عليكم ورحمة الله وبركاته
بارك الله فيك اخونا الحبيب هيثم حقيقه
مجهود رائع سلمت يداك الكريمتين
مع خالص تحياتى

صانع الاجيال
23-01-2011, 06:57 PM
زادكم الله توفيقا

ابراهيم نصيب
26-01-2011, 07:19 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

منتديات نجوم ستار
27-01-2011, 11:25 AM
مشكور يا غالي

مبتدا برمجة
12-02-2011, 05:29 PM
مشكوررررر اخي فعلا نحتاج هده المواضيع :abc_139:

abohmam
10-03-2011, 09:38 PM
جزاكم الله خيرا جميعا إخواني

أشكر لكم مروركم العطر وتواصلكم الجاد

بالتوفيق

دمع طفل يتيم
23-03-2011, 08:27 PM
السلام عليكم ورحمة الله وبركاته
شكرا اخي العزيز

أحمد العبري
27-03-2011, 09:30 AM
بارك الله فيك

نسمة الصباح
21-04-2011, 02:25 PM
شكرااااااااااااا لك

الاسد الجريح
19-05-2011, 08:27 PM
شكرااااااااااااااا.............. ....بارك الله فيك

عاشق الغريب
20-05-2011, 12:13 AM
مشكور أخي abohmam على هذه الشرح الأكثر من الرائع...

علي حمدان
13-06-2011, 10:34 AM
:abc_139:جزيت خيرا أخي ابو همام

إن شاء الله نجد الوقت لتعلم كل ما هو مفيد


.

وليد عملوق
20-06-2011, 02:12 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

كيتوو
26-06-2011, 10:45 AM
:abc_050: جزاك الله كل خير

احمد حسن محمد
10-07-2011, 01:48 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_139:

أسد الجنوب
18-07-2011, 06:04 PM
:abc_152::abc_028::abc_156::abc_025:

الـروح
19-07-2011, 05:30 AM
شـــــكراً =)

محمد عادل
22-07-2011, 08:53 PM
بسم الله الرحمن الرحيم
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

المقاتل الاول
26-08-2011, 01:14 AM
:abc_152: شكرااااا جزيلا
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

امير الورداني
01-09-2011, 02:11 AM
بارك الله فيك

أبو صخر
05-09-2011, 07:18 PM
الله يعطيك العافيه على الجُهد المُبذل

::

احترامي،،وتقديري

سعيد الحارثي
08-09-2011, 09:31 PM
اشكرك اخي العزيزعلى اهتمامك

أبو الوليد
12-09-2011, 02:21 AM
جاري الإستفادة إن شاء الله أخي أبا همام :abc_152:

احجز تكنولوجي
12-09-2011, 06:49 AM
مشكوووووووووووور

أمــــــيرة
16-09-2011, 09:33 PM
جزاك الله خيرا
و جعله في ميزان حسناتك:abc_050:

كفاح حمدي
18-09-2011, 12:45 AM
شكرا اخوي بارك الله فيك

وليد عملوق
30-09-2011, 02:20 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

ايجى كافية
10-10-2011, 07:50 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

صلاح البعداني
14-10-2011, 03:29 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

إيهاب حسن
15-01-2012, 11:21 AM
موضوع هايل
وضعت الكود في موقعي ولَم يحدث شيء، فَهل مِن مُساعدة؟!

إيهاب حسن
02-03-2012, 02:51 PM
مرحبا
كيف الحال
عساكم طيبين

مريم المنذري
15-04-2012, 01:18 PM
جزاك الله كل خير :abc_052:

مفيش حب
22-04-2012, 06:42 PM
السلام عليكم ورحمة الله وبركاته
:abc_087:مشكور جداا اخى الكريم واستاذى الفاضل على هيك المجهود الرائع:abc_088:
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . وعليكم السلام ورحمة الله وبركاته

abohmam
22-04-2012, 08:36 PM
حياكم الله جميعا

أشكر لكم مروركم العطر وتواصلكم الجاد

موضوع هايل
وضعت الكود في موقعي ولَم يحدث شيء، فَهل مِن مُساعدة؟!

حياك الله أخى إيهاب

هل ممكن رابط للموقع أو المزيد من الإيضاح حول لغة برمجة الموقع ( php - html ) أو تستخدم أحد برامج الإدارة ؟

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

بالتوفيق

عبدوالجوكر
30-04-2012, 11:22 AM
بارك الله فيك

محمود شاكر العامري
17-05-2012, 01:27 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

abohmam
21-05-2012, 12:56 AM
جزاكم الله خيرا جميعا إخواني

أشكر لكم مروركم العطر وتواصلكم الجاد

بالتوفيق

البرمجة
28-05-2012, 01:54 PM
شكر ا اخي الله يسلمك

مطوع القطارة
29-05-2012, 09:29 AM
انا مبتدئ صراحه

ولا ادري هل سينفعني هذا المووضوع ام لا

وجزاك الله خيرا

رامي محمد عامر
15-06-2012, 01:11 AM
موضوع جااااااااااااااااااامد جدااااااااااااااااااااااا ااااا

راستا
17-07-2012, 09:15 AM
جزيت خيرا أخي ابو همام >>>> ثوابك عند الله محفوظ

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

إبراهيم عزمي
17-07-2012, 08:26 PM
مشكووووووور

حسام سليمان
21-07-2012, 09:58 PM
:abc_086::abc_086: تسلم أخي

بيرق العز
08-10-2012, 11:16 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
:abc_152:

حسام سليمان
03-12-2012, 10:51 AM
يسلموووووووووو

abohmam
01-02-2013, 07:39 PM
جزاكم الله خيرا على هذا المرور العطر والتواصل الدائم

موفقين لكل خير دوما ان شاء الله

عنكبوت النت
02-03-2013, 05:58 PM
سلمت يداك شرح اكثر من رائع
تقديري لعطاءكم المميز

كفى بالموت واعظا
11-03-2013, 08:59 AM
روعة جزاكم الله خير

الطائي
16-03-2013, 07:04 AM
احسنت بارك الله فيك

السنافر
21-03-2013, 03:54 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

أسامه علي
22-03-2013, 11:25 AM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

abohmam
09-06-2013, 11:43 PM
جزاكم الله خيرا جميعا على مروركم وتواصلكم

تم إضافة نسخة تعمل على ويندوز 7 / 8 للتحميل

خالد الصافي
01-01-2014, 11:25 PM
شكرا شكرا وعليكم السلام ورحمة الله وبركاته

موسلم
24-02-2014, 12:03 PM
مبدع اخي الكريم واصل اعانك الله

أحمد سوريا
09-04-2014, 10:14 PM
مشكور يا وحش

لموسه
26-08-2014, 04:05 PM
مشكوووووووووووووووووووورا

محمد سامر
23-09-2016, 12:18 AM
موفق بإذن الله ... لك مني أجمل تحية .

الدموكي
22-01-2020, 08:15 PM
موفق بإذن الله ... لك مني أجمل تحية .