نمایش سایز بزرگ تصویر با رفتن موس روی تصویر کوچک

**m_karimi** · جمعه 16 اردیبهشت 1390, 09:05 صبح

سلام
این کد کار نمیکند. لطفا راهنمایی نمایید.
با تشکر.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>



<body>

<script>

function large(small1)

{

	var div1 = document.getElementById("div1");

	div1.style.left = small1.style.left;

	div1.style.top = small1.style.top;

	div1.visibility = "visible";

}



function out()

{

document.getElementById("div1").visibility="hidden  ";

}



</script>





<img src="laugh6.jpg" style="position:absolute;" onMouseOver="large(this)" >

<div id="div1" style="position:absolute; visibility:hidden" onMouseOut="out()">

<img src="nz027_et.jpg">

</div>

</body>

</html>

تصویر داخل دایو سایز بزرگ تصویر است.

**hossin.esm** · یک شنبه 18 اردیبهشت 1390, 08:53 صبح

سلام
small1.style.left اگر مقدار دهی اولیه نشده باشد خالی بر میگرداند.
به همین دلیل از small1.offsetLeft+"px"; برای بدست اوردم موقعیت چپ المنت استفاده کردم.
وکد div1.visibility = "visible"; را به صورت div1.style.visibility = "visible"; بنویسید

کد HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
 
<body>
<script>
function large(small1)
{
    
    var div1 = document.getElementById("div1");
    var left="";
    var top="";
    if(small1.style.left)
    {
        left=small1.style.left;
    }
    else
    {
        left=small1.offsetLeft+"px";
        
    }
    if(small1.style.top)
    {
        top=small1.style.top;
    }
    else
    {
        top=small1.offsetTop+"px";
        
    }
    
    div1.style.left = left;
    div1.style.top = top;
    div1.style.visibility = "visible";
}
 
function out()
{
document.getElementById("div1").style.visibility="hidden";
}









 
</script>
 
 
<img src="1.jpg" style="position:absolute;" onMouseOver="large(this)" >
<div id="div1" style="position:absolute; visibility:hidden" onMouseOut="out()">
<img src="2.jpg">
</div>
</body>
</html>

**m_karimi** · یک شنبه 18 اردیبهشت 1390, 14:14 عصر

خیلی متشکر.
این روش برای نشان دادن سایز بزرگ تصویر درسته؟ روش بهتری نیست؟

**hossin.esm** · یک شنبه 18 اردیبهشت 1390, 15:39 عصر

سلام
خواهش میکنم
مشکلی ندارد ولی به نظر من بهتر هست نمایش تصویر بزرگ در اختیار کاربر باشه و با کلیک روی تصویر تصویر بزرگ را مشاهده کند.
لینک زیر را ببینید.
http://www.huddletogether.com/projects/lightbox/

نام تاپیک: نمایش سایز بزرگ تصویر با رفتن موس روی تصویر کوچک

ابزار های تاپیک

نمایش

نمایش سایز بزرگ تصویر با رفتن موس روی تصویر کوچک

نقل قول: نمایش سایز بزرگ تصویر با رفتن موس روی تصویر کوچک

نقل قول: نمایش سایز بزرگ تصویر با رفتن موس روی تصویر کوچک

نقل قول: نمایش سایز بزرگ تصویر با رفتن موس روی تصویر کوچک

قوانین ایجاد تاپیک در تالار