PDA

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


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"; بنویسید




<!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/