لقد قمت بعمل الصفحة التالية كمثال:
http://www.phpaw.com/javascript/javascript-02.htm
المصدر:
كود HTML:
<html dir="rtl">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>JavaScript Folder- TEST:02</title>
<script language="javascript" type="text/javascript">
function changedes(divid, des)
{
document.getElementById(divid).innerHTML='<p align="center">'+des+'</p>';
}
</script>
</head>
<body>
<div style="align: center; position: absolute; width: 380px; height: 35px; z-index: 1; right: 10px; top: 15px" id="des">
<p align="center"> </div>
<p align="center">
<span lang="ar-om">
</span> </p>
<div style="position: absolute; width: 487px; height: 100px; z-index: 2; right: 581px; top: 27px" id="layer1">
<span lang="ar-om">
<img border="0" src="http://www.swalif.net/adserver/adimage.php?filename=swalifmakers.gif&contenttype=gif" onmouseover="changedes('des', 'شكرًا سوالف');" onmouseout="changedes('des', '');" width="321" height="94" align="left"></span><img border="0" src="https://addons.mozilla.org/img/app-icons/firefox.png" onmouseover="changedes('des', 'Mozilla Firefox');" onmouseout="changedes('des', '');" width="64" height="64"></div>
</body>
</html>
الشفرة المطلوبة أساسًا:
كود:
<script language="javascript" type="text/javascript">
function changedes(divid, des)
{
document.getElementById(divid).innerHTML='<p align="center">'+des+'</p>';
}
</script>
الإستخدام:
ضع الآتي في وسم عرض الصورة:
كود:
onmouseover="changedes('مكان عرض الوصف', 'الوصف');" onmouseout="changedes('مكان عرض الوصف', '');"
مثال:
كود HTML:
<img border="0" src="image.jpg" onmouseover="changedes('divid', 'صورة');" onmouseout="changedes('divid', '');">
<!-- عرض الوصف -->
<div id="divid"></div>