يمكن أن تتحرك الصورة العائمة الموجودة في الزاوية اليمنى السفلية لأعلى ولأسفل باتباع شريط التمرير

الكاتب：Eve Cole وقت التحديث：2009-06-20 16:05:22

<html> <head> <title>القائمة 35.13. مسح انتقال الشريحة الواردة</title> <script language="JavaScript" type="text/javascript"> // يحمل هذا المصفوفة جميع كائنات المستند القابلة لـ DHTML var dhtml_objects = new Array() // هذه الوظيفة ينشئ كائنات مخصصة تعمل كواجهات أمامية للمتصفحات المتقاطعة function create_object_array() { // يتم تخزين جميع علامات <div> و<span> في هذه المتغيرات var div_tags varspan_tags var css_tags // هل المتصفح متوافق مع W3C DOM؟ if (document.getElementById) { // إذا كان الأمر كذلك، استخدم getElementsByTagName() للحصول على علامات <div> div_tags = document.getElementsByTagName("div") // قم بالتمرير عبر علامات <div> لـ (var counter = 0; counter < div_tags.length; counter++) { // تخزين الكائن الحالي current_object = div_tags[counter] // تخزين كيفية وصول المتصفح إلى الأنماط object_css = current_object.style // تخزين معرف الكائن object_id = current_object.id // تخزين تلك العلامات فقط التي لها معرف if (object_id) { // إنشاء كائن dhtml_object جديد وتخزينه في dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } // استخدم getElementsByTagName() للحصول على علامات <span>span_tags = document.getElementsByTagName("span") // قم بالتكرار عبر علامات <span> for (var counter = 0; counter <span_tags.length; counter++) { // قم بتخزين الكائن الحالي current_object =span_tags[counter] // كيفية تخزينه يصل المتصفح إلى الأنماط object_css = current_object.style // قم بتخزين معرف الكائن object_id = current_object.id // قم فقط بتخزين العلامات التي لها معرف if (object_id) { // إنشاء كائن dhtml_object جديد وتخزينه في dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } // هل المتصفح متوافق مع DHTML DOM؟ else if (document.all) { // إذا كان الأمر كذلك، استخدم document.all للحصول على علامات <div> div_tags = document.all.tags("div") // قم بالتكرار خلال علامات <div> لـ (var counter = 0; counter < div_tags.length; counter++) { // تخزين الكائن الحالي current_object = div_tags[counter] // تخزين كيفية وصول المتصفح إلى الأنماط object_css = current_object.style // تخزين معرف الكائن object_id = current_object.id // فقط قم بتخزين تلك العلامات التي لها معرف if (object_id) { // إنشاء كائن dhtml_object جديد وتخزينه في dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } // استخدم document.all للحصول على <span > العلاماتspan_tags = document.all.tags("span") // قم بالتكرار عبر علامات <span> for (var counter = 0; counter <span_tags.length; counter++) { // قم بتخزين الكائن الحالي current_object =span_tags[counter ] // قم بتخزين كيفية وصول المتصفح إلى الأنماط object_css = current_object.style // قم بتخزين معرف الكائن object_id = current_object.id // فقط قم بتخزين تلك العلامات التي تحتوي على معرف if (object_id) { // إنشاء كائن dhtml_object جديد وتخزينه فيه dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } // هل المتصفح متوافق مع LDOM؟ else if (document.layers) { // استخدم document.layers للحصول على علامات <div> و <span> الموضوعة css_tags = document.layers // قم بالتكرار عبر الطبقات لـ (var counter = 0; counter < css_tags.length; counter++) { // تخزين الكائن الحالي current_object = css_tags[counter] // تخزين كيفية وصول المتصفح إلى الأنماط object_css = current_object // تخزين معرف الكائن object_id = current_object.id // فقط قم بتخزين تلك العلامات التي لها معرف if (object_id ) { // إنشاء كائن dhtml_object جديد وتخزينه في dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } } function dhtml_object (obj, css, id) { this.obj = obj this.css = css this.id = id this.left = get_left this.right = get_right this.top = get_top this.bottom = get_bottom this.width = get_width this.height = get_height this.visibility = get_visibility this.zIndex = get_zIndex this.move_to = move_to this.move_by = move_by this.set_left = set_left this.set_top = set_top this.set_width = set_width this.set_height = set_height this.set_visibility = set_visibility this.set_zIndex = set_zIndex this.move_above = move_above this.move_below = move_below this.set_backgroundColor = set_backgroundColor this.set_backgroundImage = set_backgroundImage this.set_html = set_html this.get_clip_top = get_clip_top this.get_clip_right = get_clip_right this.get_clip_bottom = get_clip_bottom this.get_clip_left = get_clip_left this.get_clip_width = get_clip_width this.get_clip_height = get_c lip_height this.resize_clip_to = resize_clip_to this.resize_clip_by = resize_clip_by } function get_left() { return parseInt(this.css.left) } function get_right() { return this.left() + this.width() } function get_top() { return parseInt(this.css.top) } function get_bottom() { return this.top() + this.height() } function get_width() { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، فهل تم تحديد العرض؟ if (this.css.width) { // إذا كان الأمر كذلك، قم بإرجاع خاصية العرض return parseInt(this.css.width) } else { // إذا لم يكن الأمر كذلك، قم بإرجاع خاصية offsetWidth return parseInt(this.obj.offsetWidth) } } else { // إذا لم يكن الأمر كذلك، قم بإرجاع عرض مستند الطبقة return parseInt(this.obj.document.width) } } function get_height() { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، فهل تم تحديد الارتفاع؟ if (this.css.height) { // إذا كان الأمر كذلك، قم بإرجاع خاصية الارتفاع return parseInt(this.css.height) } else { // إذا لم يكن الأمر كذلك، قم بإرجاع خاصية الإزاحة return parseInt(this.obj.offsetHeight) } } else { // إذا لم يكن الأمر كذلك، قم بإرجاع ارتفاع مستند الطبقة return parseInt(this.obj.document.height) } } function get_visibility() { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، فهل تم تحديد الرؤية؟ if (this.css.visibility) { // إذا كان الأمر كذلك، قم بإرجاع خاصية الرؤية return this.css.visibility } } else { // بخلاف ذلك، فهو متصفح LDOM، لذا // تعامل مع قيم الرؤية الخاصة if (this.css) .visibility == "show") { return "visible" } if (this.css.visibility == "hide") { return "hidden" } } // إذا وصلنا إلى هذا الحد، فما عليك سوى إرجاع "inherit" return "inherit" " } function get_zIndex() { return this.css.zIndex } function move_to (new_left, new_top) { this.css.left = new_left this.css.top = new_top } function move_by (delta_left, delta_top) { // أضف الدلتا القيم this.css.left = this.left() + parseInt(delta_left) this.css.top = this.top() + parseInt(delta_top) } function set_left (new_left) { this.css.left = new_left } function set_top (new_top) { this.css.top = new_top } function set_width (new_width) { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، فما عليك سوى تعيين خاصية العرض this.css.width = new_width } } function set_height (new_height) { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، فما عليك سوى تعيين خاصية العرض this.css.height = new_height } } function set_visibility (new_visibility) { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، فما عليك سوى ضبط الرؤية // على قيمة الوسيطة this.css.visibility = new_visibility } else { // بخلاف ذلك، قم بتعيين قيم الرؤية الخاصة if (new_visibility == " مرئي") { this.css.visibility = "show" } else if (new_visibility == "hidden") { this.css.visibility = "hide" } else { this.css.visibility = "inherit" } } } الدالة set_zIndex(new_zindex) { // هل مؤشر z الجديد أكبر من 0؟ if (new_zindex > 0) { // إذا كان الأمر كذلك، فاضبطه this.css.zIndex = new_zindex } else { // إذا لم يكن الأمر كذلك، فاضبطه على 0 this.css.zIndex = 0 } } function move_above(reference_object) { this.css.zIndex. css.zIndex = signal_object.css.zIndex + 1 } function move_below(reference_object) { // احصل على مؤشر z للكائن المرجعreference_zindex = signal_object.css.zIndex // هل هو أكبر من 0؟ if (reference_zindex > 0) { // إذا كان الأمر كذلك، فاضبط مؤشر z لهذا الكائن على 1 أقل this.css.zIndex = مرجع_zindex - 1 } else { // إذا لم يكن الأمر كذلك، فاضبط مؤشر z للكائن المرجعي على 1 // وهذا الكائن z-index إلى 0 مرجع_object.css.zIndex = 1 this.css.zIndex = 0 } } function set_backgroundColor(new_color) { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، استخدم خاصية لون الخلفية this.css.backgroundColor = new_color } else { // إذا لم يكن الأمر كذلك، استخدم خاصية bgcolor this.css.bgColor = new_color } } وظيفة set_backgroundImage(new_image) { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، استخدم خاصية صورة الخلفية this.css.backgroundImage = "url(" + new_image + ")" } else { // إذا لم يكن الأمر كذلك، استخدم خاصية الخلفية this.css.background .src = new_image } } function set_html(new_html) { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، استخدم خاصية HTML الداخلية this.obj.innerHTML = new_html } else { // إذا لم يكن الأمر كذلك، استخدم طريقة document.write() this.obj.document.open() this .obj.document.write(new_html) this.obj.document.إغلاق() } } function get_clip_top() { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، قم أولاً بتحليل سلسلة المقطع parse_dom_clip(this) // قيم المقطع موجودة الآن في كائن current_clip return current_clip.top } else { // بخلاف ذلك، استخدم clip.top return this. css.clip.top } } varcurrent_clip function clip_object(top, right, Bottom, left) { this.top = top this.right = right this.bottom = Bottom this.left = left } function parse_dom_clip(current_object) { clip_string = current_object.css.clip if (clip_string.length > 0) { varvalues_string = clip_string.slice(5, clip_string.length - 1) var clip_values =values_string.split(" ") var clip_top = parseInt(clip_values[0]) var clip_right = parseInt(clip_values[1]) var clip_bottom = parseInt(clip_values[2]) var clip_left = parseInt(clip_values[3]) } else { var clip_top = 0 var clip_right = current_object.width() var clip_bottom = current_object.height () var clip_left = 0 } current_clip = new clip_object(clip_top, clip_right, clip_bottom, clip_left) } function get_clip_right() { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، قم أولاً بتحليل سلسلة المقطع parse_dom_clip(this) // قيم المقطع موجودة الآن في كائن current_clip return current_clip.right } else { // بخلاف ذلك، استخدم clip.right return this. css.clip.right } } function get_clip_bottom() { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، قم أولاً بتحليل سلسلة المقطع parse_dom_clip(this) // قيم المقطع موجودة الآن في كائن current_clip return current_clip.bottom } else { // بخلاف ذلك، استخدم clip.bottom return this. css.clip.bottom } } function get_clip_left() { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، قم أولاً بتحليل سلسلة المقطع parse_dom_clip(this) // قيم المقطع موجودة الآن في كائن current_clip return current_clip.left } else { // بخلاف ذلك، استخدم clip.left return this. css.clip.left } } function get_clip_width() { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، قم أولاً بتحليل سلسلة المقطع parse_dom_clip(this) // قيم المقطع موجودة الآن في كائن current_clip return current_clip.right -current_clip.left } else { // بخلاف ذلك، استخدم المقطع. width return this.css.clip.width } } function get_clip_height() { // هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // إذا كان الأمر كذلك، قم أولاً بتحليل سلسلة المقطع parse_dom_clip(this) // قيم المقطع موجودة الآن في كائن current_clip return current_clip.bottom -current_clip.top } else { // بخلاف ذلك، استخدم المقطع. إرجاع العرض this.css.clip.height } } وظيفة resize_clip_to(new_top, new_right, new_bottom, new_left) { if (new_top == "auto") {new_top = this.get_clip_top() } if (new_right == "auto") {new_right = this.get_clip_right() } if (new_bottom == "auto") {new_bottom = this.get_clip_bottom() } if (new_left == "auto") {new_left = this.get_clip_left() } // هل هذا أ متصفح W3C أو DHTML DOM؟ if (!document.layers) { // قيم المقطع موجودة الآن في كائن المقطع الحالي this.css.clip = "rect(" + new_top + " " + new_right + " " + new_bottom + " " + new_left + ")" } else { // بخلاف ذلك، استخدم خصائص المقطع this.css.clip.top = new_top this.css.clip.right = new_right this.css.clip.bottom = new_bottom this.css.clip.left = new_left } } function resize_clip_by( delta_top, delta_right, delta_bottom, delta_left) { var new_top = this.get_clip_top() + delta_top var new_right = this.get_clip_right() + delta_right var new_bottom = this.get_clip_bottom() + delta_bottom var new_left = this.get_clip_left() + delta_left / / هل هذا متصفح W3C أو DHTML DOM؟ if (!document.layers) { // قيم المقطع موجودة الآن في كائن المقطع الحالي this.css.clip = "rect(" + new_top + " " + new_right + " " + new_bottom + " " + new_left + ")" } else { // بخلاف ذلك، استخدم خصائص المقطع this.css.clip.top = new_top this.css.clip.right = new_right this.css.clip.bottom = new_bottom this.css.clip.left = new_left } } وظيفة get_mouse_x( current_event) { // هل هذا هو Internet Explorer 4 أو إصدار أحدث؟ if (its_ie4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية events.clientX return events.clientX } // هل هذا Netscape Explorer 4 أو إصدار أحدث؟ else if (its_ns4plus) { // بخلاف ذلك، قم بإرجاع خاصية pageX return current_event.pageX } else { // بخلاف ذلك، قم بإرجاع قيمة فارغة return null } } function get_mouse_y(current_event) { // هل هذا هو Internet Explorer 4 أو إصدار أحدث؟ if (its_ie4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية events.clientY return events.clientY } // هل هذا Netscape Explorer 4 أو إصدار أحدث؟ else if (its_ns4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية pageY return current_event.pageY } else { // بخلاف ذلك، قم بإرجاع قيمة فارغة return null } } function get_client_width() { // هل هذا Internet Explorer 4 أو إصدار أحدث؟ if (its_ie4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية عرض العميل return document.body.clientWidth } else if (its_ns4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية العرض الداخلي return window.innerWidth - 18 } else { // بخلاف ذلك، ارجع null return null } } function get_client_height() { // هل هذا Internet Explorer 4 أو إصدار أحدث؟ if (its_ie4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية ClientHeight return document.body.clientHeight } // هل هذا Netscape Explorer 4 أو إصدار أحدث؟ else if (its_ns4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية الارتفاع الداخلي return window.innerHeight - 18 } else { // بخلاف ذلك، قم بإرجاع قيمة فارغة return null } } function get_client_scroll_left() { // هل هذا Internet Explorer 4 أو إصدار أحدث؟ if (its_ie4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية التمرير لليسار return document.body.scrollLeft } // هل هذا الإصدار من Netscape Explorer 4 أو إصدار أحدث؟ else if (its_ns4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية pageXOffset return pageXOffset } else { // بخلاف ذلك، قم بإرجاع قيمة فارغة return null } } function get_client_scroll_top() { // هل هذا Internet Explorer 4 أو إصدار أحدث؟ if (its_ie4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية التمرير إلى الأعلى return document.body.scrollTop } // هل هذا الإصدار من Netscape Explorer 4 أو إصدار أحدث؟ else if (its_ns4plus) { // إذا كان الأمر كذلك، قم بإرجاع خاصية pageYOffset return pageYOffset } else { // بخلاف ذلك، قم بإرجاع قيمة فارغة return null } } </script> <script language="JavaScript" type="text/javascript"> / / سيتم تعيين أحد هذه المتغيرات المنطقية على "صحيح" بناءً على اسم المتصفح varits_ie = false varits_ns = false varits_opera = false varits_webtv = false varits_compatible = false // سيتم تعيين أحد هذه المتغيرات المنطقية على / / صحيح بناءً على إصدار Internet Explorer varits_ie2 = false varits_ie3 = false varits_ie4 = false varits_ie5 = false varits_ie55 = false varits_ie6 = false varits_ie4plus = false varits_ie5plus = false varits_ie55plus = false varits_ie6plus = false // سيتم تعيين أحد هذه المتغيرات المنطقية على // true بناءً على إصدار Netscape varits_ns2 = false varits_ns3 = false varits_ns4 = false varits_ns6 = false varits_ns3plus = false varits_ns4plus = false varits_ns6plus = false // أحد هذه المتغيرات سيتم ضبط المتغيرات المنطقية على "صحيح" استنادًا إلى نظام التشغيل varits_win31 = false varits_win95 = false varits_win98 = false varits_winme = false varits_winnt = false varits_win2000 = false varits_winxp = false varits_windows = false varits_win32 = false varits_mac68k = false varits_macppc = false varits_macos = false varits_linux = false varits_other_os = false // سيكون هذا صحيحًا إذا كان المتصفح يدعم نوعًا ما من DHTML var dhtml_ok = false // فلنعمل مع الأحرف الصغيرة لإبقاء الأمور بسيطة var user_agent = navigator.userAgent.toLowerCase() // اسم المتصفح // استخدم IndexOf() لفحص سلسلة userAgent // للحصول على علامات منبهة لاسم المتصفح if (user_agent.indexOf("opera") != -1) {its_opera = صحيح } else if (user_agent.indexOf("webtv")!= -1) {its_webtv = true } else if (user_agent.indexOf("msie") != -1) {its_ie = true } else if (user_agent. IndexOf("mozilla") != -1) { // بالنسبة إلى "moziila"، نحتاج إلى استبعاد بعض الاحتمالات الأخرى، أولاً if ((user_agent.indexOf("compatible") == -1) && (user_agent.indexOf ("spoofer") == -1) && (user_agent.indexOf("hotjava") == -1)) {its_ns = true } else {its_compatible = true } } // إصدار المتصفح var Major_version = parseInt(navigator.appVersion ) var full_version = parseFloat(navigator.appVersion) var ie_start = user_agent.indexOf("msie") if (ie_start != -1) { var version_string = user_agent.substring(ie_start + 5) Major_version = parseInt(version_string) full_version = parseFloat (version_string) } // INTERNET EXPLORER if (its_ie || its_webtv) { if (major_version < 3) {its_ie2 = true } else if (major_version == 3) {its_ie3 = true } else if (major_version == 4) {its_ie4 = true } else if (major_version == 5) {its_ie5 = true } else if (full_version == 5.5) {its_ie55 = true } else if (major_version == 6) {its_ie6 = true } if (major_version >= 4) {its_ie4plus = true } if (major_version >= 5) {its_ie5plus = صحيح } if (full_version >= 5.5) {its_ie55plus = true } if (major_version >= 6) {its_ie6plus = true } } // NETSCAPE if (its_ns) { if (major_version < 3) {its_ns2 = true } else if ( main_version < 4) {its_ns3 = صحيح } وإلا إذا (الإصدار الرئيسي == 4) { it_ns4 = صحيح } وإلا إذا (الإصدار الرئيسي == 5) {its_ns6 = صحيح } إذا (الإصدار الرئيسي >= 3) { it_ns3plus = صحيح } إذا (الإصدار_الرئيسي >= 4) {its_ns4plus = true } if (major_version >= 5) {its_ns6plus = true } } // نظام التشغيل // استخدم IndexOf() لفحص سلسلة userAgent // للحصول على علامات نظام التشغيل // WINDOWS 3.1 إذا ((user_agent.indexOf("windows 3.1") != -1) || (user_agent.indexOf("win16") != -1) || (user_agent.indexOf("16bit") != -1) || (user_agent.indexOf("16-bit") != -1)) {its_win31 = true } // WINDOWS 95 else if ((user_agent.indexOf("windows 95") != -1) || (user_agent.indexOf) ("win95") != -1)) {its_win95 = true } // WINDOWS ME if (user_agent.indexOf("win 9x 4.90") != -1) {its_winme = true } // WINDOWS 98 else if (( user_agent.indexOf("windows 98") != -1) ||. (user_agent.indexOf("win98") != -1)) {its_win98 = true } // WINDOWS XP else if ((user_agent.indexOf("windows" nt 5.1") != -1) || (user_agent.indexOf("winnt 5.1") != -1)) {its_winxp = true } // WINDOWS 2000 else if ((user_agent.indexOf("windows nt 5.0") != -1) ||. (user_agent.indexOf("winnt 5.0") != -1)) {its_win2000 = true } // WINDOWS NT else if ((user_agent.indexOf("windows nt") != -1) ||.(user_agent.indexOf("winnt")!= -1)) {its_winnt = true } // MAC 680x0 else if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf( "68K") != -1) ||. (user_agent.indexOf("68000") != -1))) {its_mac68k = true } // MAC PowerPC else if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf("ppc") != -1) || (user_agent.indexOf("powerpc") != -1))) {its_macppc = true } // LINUX else if (user_agent.indexOf("linux") != -1) {its_linux = true } // نظام تشغيل آخر آخر {its_other_os = true } // PLATFORM // استخدم القيم المنطقية لنظام التشغيل // لتحديد النظام الأساسي العام // MAC OS if (its_mac68k ||its_macppc) {its_macos = true} // 32-BIT WINDOWS if (its_win95 ||its_win98 ||.its_winme ||.its_win2000 ||.its_winxp) {its_win32 = true} // WINDOWS if (its_win31 ||its_win32) {its_windows = true} // DHTML SUPPORT if (document.getElementById || document.all || document .layers) { dhtml_ok = true } </script> <script language="JavaScript" type="text/javascript">  </script> </head> <body onLoad="initialize()">  <div id="viewer1" style="position:absolute; left:10; top:0"> <img src="/u/info_img/2009-06/20/fiesole1 .jpg"> </div> <div id="viewer2" style="position:absolute left:10; top:0"></div> <div id="controls" style="position:absolute left; :10;الأعلى:325; العرض: 525; محاذاة النص: المركز;