iPersianScript
کاربر عضو
.
. با کدهای زیر می تونید تصاویر رو با استفاده از CSS در یک باکس به نمایش بگذارید... :|:|
. کدها بسیار ساده نوشته شدن و با کمی ویرایش و خلاقیت می تونید باکس رو زیباتر کنید و بهترین استفاده رو ببرید...
.gif' alt=':; 
:'>
.
.
. اگه احیانا مشکل، سئوال و حتی اگه خواستید راهنمائی هم بفرمائید.. خوشحال میشم... :79:
. موفق باشید :54:
.
. با کدهای زیر می تونید تصاویر رو با استفاده از CSS در یک باکس به نمایش بگذارید... :|:|
. کدها بسیار ساده نوشته شدن و با کمی ویرایش و خلاقیت می تونید باکس رو زیباتر کنید و بهترین استفاده رو ببرید...
:'>.
کد:
_
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> View Image - CSS _ Box </title>
<style type="text/css">
#content {
width: 70px; text-align: center; padding:5px;
border: 1px solid orange; border-radius: 8px;
}
.onLight {
width:50px; cursorointer; padding:5px; text-align: center;
font-family: tahoma; font-size: 11px; color:blue;
}
.onLight:hover div, .offLight { display:block; }
.offLight {
position:absolute; top:140px; right: 305px; display:none; cursorointer;
padding:10px; z-index:1; width:50px;
border: 1px solid orange; border-radius: 8px;
font-family: tahoma; font-size: 11px; color:blue;
}
.offLight:hover + .lightBox { display:none; }
.box {
position:absolute; z-index:200; left: 300px; top: 150px; display:none;
width: 350px; height: 250px; padding:5px; text-align: center; cursor:default;
background: lightyellow; border: solid 1px orange; border-radius: 8px;
}
</style>
</head>
<body>
<div id="content">
<div class="onLight"> نـمـایـش
<div class="offLight"> بـسـتـن </div>
<div class="box">
<h2> نـمـایـش تـصـویـر </h2><br />
<img src="http://www.img-url.com">
</div>
</div>
</div>
</body>
</html>
_
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> View Image - CSS _ Box </title>
<style type="text/css">
#content {
width: 70px; text-align: center; padding:5px;
border: 1px solid orange; border-radius: 8px;
}
.onLight {
width:50px; cursor
ointer; padding:5px; text-align: center;font-family: tahoma; font-size: 11px; color:blue;
}
.onLight:hover div, .offLight { display:block; }
.offLight {
position:absolute; top:140px; right: 305px; display:none; cursor
ointer;padding:10px; z-index:1; width:50px;
border: 1px solid orange; border-radius: 8px;
font-family: tahoma; font-size: 11px; color:blue;
}
.offLight:hover + .lightBox { display:none; }
.box {
position:absolute; z-index:200; left: 300px; top: 150px; display:none;
width: 350px; height: 250px; padding:5px; text-align: center; cursor:default;
background: lightyellow; border: solid 1px orange; border-radius: 8px;
}
</style>
</head>
<body>
<div id="content">
<div class="onLight"> نـمـایـش
<div class="offLight"> بـسـتـن </div>
<div class="box">
<h2> نـمـایـش تـصـویـر </h2><br />
<img src="http://www.img-url.com">
</div>
</div>
</div>
</body>
</html>
_
.
. اگه احیانا مشکل، سئوال و حتی اگه خواستید راهنمائی هم بفرمائید.. خوشحال میشم... :79:
. موفق باشید :54:
.
