من می خوام چند تا لایه روی صفحه داشته باشم و چند تا Image که روی هر کدام از Imageهام که رفتم لایه ء مربوط به اون visible بشه ولی نمی دونم چطوری باید براشون onmousover بنویسم و به یک لایه متصل کنم. لطفا من رو راهنمایی کنید.:متفکر:
Printable View
من می خوام چند تا لایه روی صفحه داشته باشم و چند تا Image که روی هر کدام از Imageهام که رفتم لایه ء مربوط به اون visible بشه ولی نمی دونم چطوری باید براشون onmousover بنویسم و به یک لایه متصل کنم. لطفا من رو راهنمایی کنید.:متفکر:
توی CSS یه خاصیتی هست به اسم display. برای لایه‌ای که می‌خوای مخفی بشه یا ظاهر بشه، این خاصیت رو روی none تنظیم کن. این طوری:
<div id="myLayer" style="display:none">....</div>
بعد برای تصویری که داری می‌تونی اینجوری رویدادگیر بنویسی که با حرکت دادن ماوس رو تصویر، لایه‌ات ظاهر بشه و با خارج کردن اشاره‌گر ماوس از روی تصویر، دوباره تصویرت ناپدید بشه:
<img src="..." width="..." height="..." onMouseOver="document.getElementById('myLayer').st yle.display=block" onMouseOut="document.getElementById('myLayer').sty le.display=none">
یعنی در حقیقت از طریق جاوا اسکریپت، در رویدادگیرها، و از طریق document.getElementById() به لایه‌تون دسترسی پیدا می‌کنین و در موقع ورود ماوس مقدارش رو روی block تنظیم می‌کنین که باعث نمایش دادن لایه و در موقع خروج ماوس مقدارش رو روی none تنظیم می‌کنین که باعث مخفی شدن لایه می‌شه.
البته من شخصاً ترجیح می‌دم یه تابع جاوا اسکریپتی جداگانه بنویسم و این کارها رو توی اون انجام بدم. مثلاً این طوری:
<script language="javascript">
function toggleLayer(layerName,onOff)
{
var x = document.getElementById(layerName)
if (x) x.style.display = (onOff)?"block":"none";
}
</script>
اونوقت می‌تونید با این تابع، هر لایه‌ای رو مخفی یا ظاهر کنید (البته به شرطی که برای لایه حتماً خصوصیت display رو در style مشخص کرده باشید).
در این حالت برای لایه‌ی مثال بالا، کُد تصویر رو این طوری می‌نویسیم:
<img src="..." width="..." height="..." onMouseOver="toggleLayer('myLayer',true)" onMouseOut="toggleLayer('myLayer',false)">