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

[کلبه دار]

درود بی کران

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

در 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" می رود، تصویر http://www.dorduneh.ir/images/image01.png نمایش داده شود، و همینطور،
زمانیکه نشانگر ماوس روی عدد "2" می رود، تصویر http://www.dorduneh.ir/images/image02.png نمایش داده شود..

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

[Javidhb]

اگه دنبال یادگرفتن جاوااسکریپت نیستید بهتره در مورد tooltip سرچ کنید.

کد صفحتون رو باید بهینه کنید تا با کلاس، آی دی , -data مشکل انتخاب عکس مورد نظرتون رو آسون کنید. روشی که زیر استفاده کردم به هیچ وجه بهینه نیست!
اما چون گفتید با ساختار خودتون کار کنه ...

چون تو قسمت jquery پرسیدید منم با jquery نوشتم :)



<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="">
<p style="text-align: right">1</p>
</a>
</strong>


<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="">
<p style="text-align: right">2</p>
</a>
</strong>

<script type="text/javascript">

(function($){

$('img').hide(); //مخفی کردن تمام عکسها

$('a').on('mouseover', function(){
showImg($(this));
});

$('a').on('mouseout', function(){
hideImgs();
});

})(jQuery);

//برای نمایش عکس
function showImg(element)
{
//توی این قسمت دستتون بازه که هرجوری دلتون میخاد عکس مورد نظرتون رو انتخاب کنید.
/*
|اینجای کدتون ایراد داره... من کدرو جوری نوشتم که در مورد ساختار صفحه شما کار میکنه
|اما به هیچ وجه روش جالبی نیست
|شما باید ساختار صفحه تون بهینه کنید و با استفاده از کلاس، آی دی و دیتا- کدهای قشتگتری بنویسید
*/

var yourP = element.children('p:first').text();//انتخاب شماره لینک
var allImgs = $('img'); // انتخاب همه عکسها
var target = ''; //قرار عکسی که مورد نظر ماست اینتو ذخیره بشه

//جستجو بین تمام عکسها و پیدا کردن عکسی که اسم عکسش با شماره ی لینک یکی باشه
allImgs.each(function(){
if($(this).attr('title') == 'Image number '+yourP)
{
target = $(this); //پیدا شدن عکس مورد نظر
}
});

target.show(); //نمایش عکس
}

//برای مخفی کردن عکس
function hideImgs()
{
$('img').hide();
}

</script>


نمونه زنده (http://jsfiddle.net/FKcG4/6/)

[کلبه دار]

بابت پاسخ شما، بی نهایت ممنونم.
عذرخواهی می کنم، امّا من گیج شدم. الان شما براتون ممکنه این کدی که خدمتتون دادم رو برای بنده طوری بنویسید که کار کنه ؟
چون کدهایی که دادید رو همینطوری درسته گذاشتم کار نکرد. (طبیعیه کار نکنه. چون یک ساختار کلّیه، و بایستی کلاس ها و آی دی هاش رو طبق خواست خودم تعیین کنم که بلد نیستم)..
من فقط کمی html بلدم. همین.
اگر برای شما مقدور هست، این کد من رو طوری ویرایش نمائید که کار کنه :(
سپاسگذارم

[کلبه دار]

همچنین، این حالت در صفحه ذیل نیز موجود است : http://www.guitarcenter.com/Electric-Guitar-Guitar.gc http://www.7learn.com/wp-content/uploads/2013/11/shot.png
در اسکرینشات، نشان دادم ماوس رو کجای صفحه بایستی برد تا این حالت نمایش داده بشه..
چیزی که "دقیقاً" بنده می خوام، "همین" هست که در لینک گفته شده موجود هست.
زمانیکه ماوس روی تصویر یا کلمه موردنظر ما میره، یک "محتوا (می تونه عکس باشه یا یک frame)" بالا یا کنارش ظاهر بشه، و زمانیکه ماوس رد میشه، اون محتوا مخفی بشه..


من اگر در این بخش از فاروم پست کردم، بخاطر این بود که دقیقاً نمی دانستم این مورد رو با چه زبانی می شه داشت.
عذر می خوام.

[کلبه دار]

سپاس بابت پاسخی که ندادید :)