و عليكم السلام ورحمة الله ..
تم استخراجها من الموقع و لله الحمد
ملف الـ index.html
نضع فيه التالي :
كود PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Fez-Soft - swalif soft</title>
<link href="css/style.css?v7" type="text/css" rel="stylesheet">
<link href="css/news.css?v7" type="text/css" rel="stylesheet">
</head>
<body>
<div id="base" class="base">
<div class="base_middle" id="base_middle">
<div class="base_middle_inner">
<div class="middle_page_title">
<span>Titre Exemple</div>
<div class="headline">
<div class="image">
<a href="#" id="news_link">
<img id="news_image" src="http://en.timeturk.com/images/1x1.gif" alt="Manşetler"/></a>
</div>
<div class="transparent_layer"></div>
<div class="title_content">
<div class="title" id="news_title"></div>
<div class="short_content" id="news_short_content">
</div>
</div>
<div class="number">
<div class="number_inner">
<div class="item" id="headline_item_0">
<a href="عنوان الصفحة التي تأخذ الزائر عند الضغط على رقم الخبر1" title="وصف العنوان 1" onmouseover="return HD_jumpTo(0)">1</a>
</div>
<div class="item" id="headline_item_1">
<a href="عنوان الصفحة التي تأخذ الزائر عند الضغط على رقم الخبر2" title="وصف العنوان 2" onmouseover="return HD_jumpTo(1)">2</a>
</div>
<div class="item" id="headline_item_2">
<a href="عنوان الصفحة التي تأخذ الزائر عند الضغط على رقم الخبر 3" title="وصف العنوان 3" onmouseover="return HD_jumpTo(2)">3</a>
</div>
<div class="item" id="headline_item_3">
<a href="عنوان الصفحة التي تأخذ الزائر عند الضغط على رقم الخبر 4" title="وصف العنوان 4" onmouseover="return HD_jumpTo(3)">4</a>
</div>
<div class="item" id="headline_item_4">
<a href="عنوان الصفحة التي تأخذ الزائر عند الضغط على رقم الخبر 5" title="وصف العنوان 5" onmouseover="return HD_jumpTo(4)">5</a>
</div>
<div class="item" id="headline_item_5">
<a href="عنوان الصفحة التي تأخذ الزائر عند الضغط على رقم الخبر 6" title="وصف العنوان 6" onmouseover="return HD_jumpTo(5)">6</a>
</div>
<div class="item" id="headline_item_6">
<a href="عنوان الصفحة التي تأخذ الزائر عند الضغط على رقم الخبر7" title="وصف العنوان 7" onmouseover="return HD_jumpTo(6)">7</a>
</div>
<div class="item" id="headline_item_7">
<a href="عنوان الصفحة التي تأخذ الزائر عد الضغط على رقم الخبر 8" title="وصف العنوان 8" onmouseover="return HD_jumpTo(7)">8</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/headline.js"></script>
<script type="text/javascript">
var news_data = {
0: {id: "17157", title: "grand titre 1 ", short_content: "petit description de premier paragraphe .", image: "18784", seo_link: "lien1.html"},
1: {id: "16504", title: "grand titre 2 ", short_content: "petit description de 2 eme paragraphe .", image: "8860", seo_link: "lien2.html"},
2: {id: "16481", title: "grand titre 3", short_content: "petit description de 3 eme paragraphe .", image: "18150", seo_link: "lien3.html"},
3: {id: "16088", title: "grand titre 4 ", short_content: "petit description de 4 eme paragraphe . ", image: "17820", seo_link: "lien4.html"},
4: {id: "12018", title: "grand titre 5 ", short_content: "petit description de 5 eme paragraphe .", image: "13786", seo_link: "lien5.html"},
5: {id: "11900", title: "grand titre 6 ", short_content: " petit description de 6 eme paragraphe .", image: "13668", seo_link: "lien6.html"},
6: {id: "11735", title: "grand titre 7 ", short_content: "petit description de 7 eme paragraphe .", image: "13521", seo_link: "lien7.html"},
7: {id: "11599", title: "grand titre 8 ", short_content: "petit description de 8 eme paragraphe .", image: "13387", seo_link: "lien8.html"}
};HD_forwClick();
</script>
</body>
</html>
و تتكرر العميلة الى 8 الأخبار = عناوين .
كود PHP:
<div class="middle_page_title">
<span>Titre Exemple</div>
Titre Exemple = هو العنوان الكبير الذي يكون فوق الـ slide
لاحظ أنني وضعت تعليقات بالعربية داخل أماكن الروابط ..
مثال :
كود PHP:
<div class="item" id="headline_item_0">
<a href="عنوان الصفحة التي تأخذ الزائر عند الضغط على رقم الخبر1" title="وصف العنوان 1" onmouseover="return HD_jumpTo(0)">1</a>
</div>
عنوان الصفحة التي تأخذ الزائر عند الضغط على رقم الخبر1 : اي الرقم الموجود فوق على اليمين
وصف العنوان 1 : و هو وصف يظهر عند تمرير الفأرة على الرقم الموجود فوق على اليمين .. وهي عمل title وهذا معروف .
بالنسبة لكود الجافا سكربت الذي في الصفحة سآخذ منه طرف وهو الأول فقط :
كود PHP:
0: {id: "17157", title: "grand titre 1 ", short_content: "petit description de premier paragraphe .", image: "18784", seo_link: "lien1.html"},
grand titre 1 : وهو العنوان الكبير الذي يظهر في الخبر الذي فوق الصورة .
lien1.html : هو الرابط الذي سيأخذني إليه عند الضغط على صورة الخبر و ليس العدد ، وهو نفس الرابط الذي وضعناه فوق ..فقط للتفرقة هنا الضغط على الصورة .
image: "18784" : هنا اسم الصورة .. ولكن لو تأملت فنحن لا نعرف ان هناك صورة بلا امتداد ؟؟؟؟
ولكن الامتدادت عملت في ملف الجافا سكرلابت الذي استدعيته في أول كود الجافا سكربت :
كود PHP:
<script type="text/javascript" src="js/headline.js"></script>
لو دخلنا للملف سنجد انه تتم تحديد المتدادت بـ jpg و كذلك تم تحديد مجلد الصور بـ images لذلك نأخذ اسم الصورة فقط دون امتداد و نضعه في الكود image: "18784" ، الاسم هو 18784 أما الاسم الكامل هو 18784.jpg
هنا الواقع
http://en.timeturk.com/images/news/18784.jpg
لذلك نضع الصور في المجلد images . ( هي كانت images/news/ ) انا جعلتها images فقط .
و هكذا تتكرر العملية للأخبار الـ 8 كلها واحد واحد .
هناك بعض الصور المستعمله كثل خلفية الأرقام و غير ذلك .. كل شيء تم ارفاقه مع التطبيق
هذا فقط شرح بسيط .. و إلا ففيالرابط كل شيء .. ( ملف html و ملفات css و js و الصور ) .
كود PHP:
http://www.4shared.com/file/96944500/76430ed0/fez-soft-slidshow.html
المساحة تعدت المسموح به في المرفقات
ملاحظة واحدة فقط : وهي ان ملفات css حوالي 3 .. حاول تنقي ملف style.css لانه فيه كلاسات و معرفات لا حاجة لها في هذا التطبيق .. للعجلة لم أنقيه ..
لكن سهل ان شاء الله ...
موفق أخي إن شاء الله
