ورود

View Full Version : سوال: نمایش عکس در یک DIVجدا با جاوا اسکریپت


پری سیما
شنبه 13 اردیبهشت 1393, 15:36 عصر
یک div کلی و 3 تا divکوچکتر پایین و یک div بزرگتر بالا
با کلیک روی هر عکس سایز بزرگترش تو div بالا نشون داده شه
{mahdi}
یک شنبه 14 اردیبهشت 1393, 08:13 صبح
<!doctype html>
<html>
<head>
<script language="javascript">



function se(id){
if(document.all)
return document.all(id);
else if(document.getElementById)
return document.getElementById(id);
}
function setimage(add){
se('img').src=add.src;
}



</script>
<style type="text/css">
#main{background-color:#000;width:45%;height:45%;position:absolute; }
#imgcont{height:70%;width:90%;margin-left:5%;margin-top:2%;}
#images{height:22%;margin-left:5%; width:90%; margin-top:2%;}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id="main">
<div id="imgcont"><img width="100%" height="100%" src="" id="img"></div>
<div id="images">
<img src="http://mihandownload.com/wp-content/uploads/game-of-thrones.jpg"
style="width:28%;height:90%;margin-left:5%;margin-top:1%; cursor:pointer;" onClick="setimage(this)">
<img src="http://mihandownload.com/wp-content/uploads/LightWave-3D.jpg"
style="width:28%; height:90%; margin-top:1%cursor:pointer; cursor:pointer" onClick="setimage(this)">
<img src="http://mihandownload.com/wp-content/uploads/farcry-3.jpg"
style="width:28%; height:90%; margin-top:1%; cursor:pointer;" onClick="setimage(this)">
</div>
</div>
</body>
</html>


این اسلاید شو در مرورگرهای IE-Firefox-Chrome-Safari-seamonkey تست شده است.
امیدوارم مفید بوده باشه......