سوال درباره image enlarge در جاواسکريپت

[Sina-Ts]

دوستان من يه کد جاوا اسکريپت ميخوام که وقتی روی يه عکس کوچيک ميرم با موس عکس بزرگ بشه
البته توری بزرگ بشه که صفحه بهم نريزه..درواقع در يک floating window بزرگ بشه..تو اين صفحه بريد روی عکس های سمت راست اونجايی که نوشته Mouse over to see the screenshots

با موس برين ببينيد چطوری بزرگ ميشه..من همچين چيزی ميخوام

http://software.gsmarena.com/product.asp?id=14578

[EbliiS]

سينا جان براي اينكار يك addon (http://components.developers4web.com/dynamic-image-preview) براي dreamweaver وجود داره كه من متاسفانه مجانيشو گير نياوردم.
از طريق جاوا اسكريپت هم ميشه اينكارو كرد كه اينجا (http://www.webmaster-talk.com/html-forum/36943-mouse-over-image-enlarge-off-cursor.html) را نگاه كني متوجه ميشي.(به علت اينكه بحثش زياد بود نميشد همشو لينجا كپي كرد)http://asefsoft.com/qsimages/157.gif

[Sina-Ts]

تو اين فروم که شما آدرس داری برای جاواسکريپت به نتيجه نرسيده..ولی يه روش خيلی جالب با css گفته
که خوبه ولی يه ايرادايی داره..اگه کد جاوا ش و کسی پيدا کرد ممنون ميشم خبر بده

[EbliiS]

سلام سينا جان من روش CSS را پيدا كردم ،اميدوارم كه كارتو راه بندازه.
كدهاي CSS

<style type="text/css">

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
كدهاي Html

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a>

<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>

<br />

<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

</div>
براي ديدن نمونه هم ميتوني اينجا (http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/) را ببينيhttp://asefsoft.com/qsimages/157.gif

[Sina-Ts]

آقا يک دنيا ممنون..عالی بود اين يکی