درخواست کدی برای نمایش تصویر هنگام رفتن ماوس روی یک عبارت

[دسیرونا]

درود بی کران

این مشکل، چند وقتی ست من رو سر کار گذاشته، و لاینحل باقی مانده..

در html، با تگ title، می توان معیّن کرد زمانیکه نشانگر ماوس روی یک عبارت / تصویر می رود، فلان عبارت (توضیحات) ظاهر گردد.
قصد، دقیقاً این است، که همچین عملکردی، با ظاهر شدن یک "تصویر" (و یا یک frame) جایگزین شود.

همچین کاربردی، شدنی ست. امّا مشکل اینجاست، که "فقط و فقط" برای "یک بار" استفاده قابل استفاده ست، و اگر در همان صفحه، قصد "تکرار این عملکرد"، روی "چند عبارت مختلف" با "تصاویر مختلف" وجود داشته باشد، برای تمامی عبارات بعدی، تصویر مربوط به "آخرین عبارت" ظاهر خواهد شد، و نه تصویر مربوط به همان عبارات..

طیّ جستجویی که (بنا به دانش ناقصم نسبت به js و css) در گوگل داشتم، به نتیجه ای نرسیدم.
کُدهای مورد بحث اینجانب، در ذیل آمده است :

		<div id="div1" style="float:left">
     <img src="http://www.dorduneh.ir/images/image01.png" title="Image number 1" alt="Image number 1" height="55" width="193" border="0" />
		</div>
			<strong><a href="" onmouseout="show(0)" onmouseover="show(1)">
            <p style="text-align: right">1</p></a></strong>

				<script language="javascript" >
 document.getElementById("div1").style.display='none';
 function show(x)
 {
 object=document.getElementById("div1");
 if(!x)
 object.style.display="none";
 else
 object.style.display="block";
 }
 </script>


		<div id="div2" style="float:left">
     <img src="http://www.dorduneh.ir/images/image02.png" title="Image number 2" alt="Image number 2" height="55" width="193" border="0" />
		</div>
			<strong><a href="" onmouseout="show(0)" onmouseover="show(1)">
            <p style="text-align: right">2</p></a></strong>

				<script language="javascript">
 document.getElementById("div2").style.display='none';
 function show(x)
 {
 object=document.getElementById("div2");
 if(!x)
 object.style.display="none";
 else
 object.style.display="block";
 }
 </script>

لطفاً، کدهای فوق را بگونه ای تصحیح نمائید، تا :
زمانیکه نشانگر ماوس روی عدد "1" می رود، تصویر

نمایش داده شود، و همینطور،
زمانیکه نشانگر ماوس روی عدد "2" می رود، تصویر

نمایش داده شود..

پیشاپیش سپاسگذارم.
نظری پور

 

[1 Saeed]

مشکل اینجاست که شما 2 بار تابع show رو تعریف کردین و دومی override میشه بر اولی
بخاطر همین برای هر دوی المان ها تابع دومی فراخوانی میشه

این باید کار کنه:

<div id="div1" style="float:left">
     <img src="http://www.dorduneh.ir/images/image01.png" title="Image number 1" alt="Image number 1" height="55" width="193" border="0" />
        </div>
            <strong><a href="" onmouseout="show(1,0)" onmouseover="show(1,1)">
            <p style="text-align: right">1</p></a></strong>

                <script language="javascript" >
document.getElementById("div1").style.display='none';
function show(i,x)
{
object=document.getElementById("div" + i);
if(!x)
object.style.display="none";
else
object.style.display="block";
}
</script>


        <div id="div2" style="float:left">
     <img src="http://www.dorduneh.ir/images/image02.png" title="Image number 2" alt="Image number 2" height="55" width="193" border="0" />
        </div>
            <strong><a href="" onmouseout="show(2,0)" onmouseover="show(2,1)">
            <p style="text-align: right">2</p></a></strong>