<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
#imgwrp{
padding:0; margin:10% auto 0 auto; text-align:left; direction:ltr;
}
#imgwrp li {
width:100px; height:100px; list-style:none; float:left; margin:5px 11px; background:red;
}
#imgwrp a {
width:100px; height:100px; display:block; float:left; cursor:default;
}
#imgwrp a img {
width:100px; height:100px; border:0; float:left;
}
#imgwrp a:hover {
position:absolute; width:200px; height:200px; z-index:999;
}
#imgwrp a:hover img {
width:200px; height:200px; position:absolute; left:-50px; top:-50px; border:1px dotted #f00;
}
</style>
</head>
<body>
<!-- Start Image gallery --><div id="imgwrp">
<ul>
<li><a href="../img/add/ga16.jpg" target="_blank"><img src="../img/add/lga16.jpg" alt="" /></a></li>
<li><a href="../img/add/ga17.jpg" target="_blank"><img src="../img/add/lga17.jpg" alt="" /></a></li>
<li><a href="../img/add/ga18.jpg" target="_blank"><img src="../img/add/lga18.jpg" alt="" /></a></li>
<li><a href="../img/add/ga19.jpg" target="_blank"><img src="../img/add/lga19.jpg" alt="" /></a></li>
<li><a href="../img/add/ga20.jpg" target="_blank"><img src="../img/add/lga20.jpg" alt="" /></a></li>
<li><a href="../img/add/ga21.jpg" target="_blank"><img src="../img/add/lga21.jpg" alt="" /></a></li>
<li><a href="../img/add/ga22.jpg" target="_blank"><img src="../img/add/lga22.jpg" alt="" /></a></li>
<li><a href="../img/add/ga23.jpg" target="_blank"><img src="../img/add/lga23.jpg" alt="" /></a></li>
<li><a href="../img/add/ga24.jpg" target="_blank"><img src="../img/add/lga24.jpg" alt="" /></a></li>
<li><a href="../img/add/ga25.jpg" target="_blank"><img src="../img/add/lga25.jpg" alt="" /></a></li>
<li><a href="../img/add/ga26.jpg" target="_blank"><img src="../img/add/lga26.jpg" alt="" /></a></li>
<li><a href="../img/add/ga27.jpg" target="_blank"><img src="../img/add/lga27.jpg" alt="" /></a></li>
<li><a href="../img/add/ga01.jpg" target="_blank"><img src="../img/add/lga01.jpg" alt="" /></a></li>
<li><a href="../img/add/ga02.jpg" target="_blank"><img src="../img/add/lga02.jpg" alt="" /></a></li>
<li><a href="../img/add/ga03.jpg" target="_blank"><img src="../img/add/lga03.jpg" alt="" /></a></li>
<li><a href="../img/add/ga04.jpg" target="_blank"><img src="../img/add/lga04.jpg" alt="" /></a></li>
<li><a href="../img/add/ga05.jpg" target="_blank"><img src="../img/add/lga05.jpg" alt="" /></a></li>
<li><a href="../img/add/ga06.jpg" target="_blank"><img src="../img/add/lga06.jpg" alt="" /></a></li>
<li><a href="../img/add/ga07.jpg" target="_blank"><img src="../img/add/lga07.jpg" alt="" /></a></li>
<li><a href="../img/add/ga08.jpg" target="_blank"><img src="../img/add/lga08.jpg" alt="" /></a></li>
<li><a href="../img/add/ga09.jpg" target="_blank"><img src="../img/add/lga09.jpg" alt="" /></a></li>
<li><a href="../img/add/ga10.jpg" target="_blank"><img src="../img/add/lga10.jpg" alt="" /></a></li>
<li><a href="../img/add/ga11.jpg" target="_blank"><img src="../img/add/lga11.jpg" alt="" /></a></li>
<li><a href="../img/add/ga12.jpg" target="_blank"><img src="../img/add/lga12.jpg" alt="" /></a></li>
<li><a href="../img/add/ga13.jpg" target="_blank"><img src="../img/add/lga13.jpg" alt="" /></a></li>
<li><a href="../img/add/ga14.jpg" target="_blank"><img src="../img/add/lga14.jpg" alt="" /></a></li>
<li><a href="../img/add/ga15.jpg" target="_blank"><img src="../img/add/lga15.jpg" alt="" /></a></li>
</ul>
<!-- End of Image gallery --></div>
</body>
</html>
لطفا منظور خود را واضحتر بفرمایید....
<script>
function ch_txt(id, text){
document.getElementById(id).innerHtml=text;
}
</script>
<img onmouseover="onmouseover="ch_txt('div1','Axe shomareye yek';" onmouseoout="ch_txt('div1','';";" />
<div id="div1">
</div>
بچه ها موقعیتشو پیدا کردم. ولی وقتی تصویر بزرگ در خارج از تصویر کوچک نمایش داده می شه. پرش تصویر به وجود میاد. اینو دیگه چیکار کنم.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function ch_txt(id, text){
document.getElementById(id).innerHtml=text;
}
</script>
</head>
<body>
<table width="200" border="00" cellspacing="1" cellpadding="2">
<tr>
<td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 1';)" onmouseoout="ch_txt('div1','';)"></td>
<td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 2';)" onmouseoout="ch_txt('div1','';)"></td>
<td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 3';)" onmouseoout="ch_txt('div1','';)" /></td>
</tr>
<tr>
<td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 4';)" onmouseoout="ch_txt('div1','';)"></td>
<td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 5';)" onmouseoout="ch_txt('div1','';)"></td>
<td align="center"><img src="file:///E|/Server/EasyPHP " width="150" height="125" onmouseover="ch_txt('div1','Axe shomareye 6';)" onmouseoout="ch_txt('div1','';)"></td>
</tr>
<tr>
<td colspan="3" align="center" id="tg1"> </td>
</tr>
</table>
</body>
</html>
#imgwrp a:hover img {
width:600px; height:400px; position:absolute; left:-200px; top:-400px; border:1px dotted #f00;
}
style type="text/css">
#imgwrp{
padding:0; margin:5% auto 0 auto; text-align:left; direction:ltr;
}
#imgwrp li {
width:100px; height:100px; list-style:none; float:left; margin:5px 2px; background:white;
}
#imgwrp a {
width:100px; height:100px; display:block; float:left; cursor:default;
}
#imgwrp a img {
width:100px; height:100px; border:0; float:left;
}
#imgwrp a:hover {
position:absolute; width:200px; height:200px; z-index:999;
}
#imgwrp a:hover img {
width:600px; height:400px; position:absolute; left:-200px; top:-400px; border:1px dotted #f00;
}
</style>
#imgwrp a:hover img {
width:600px; height:400px; position:absolute; left:-200px; top:-400px; border:1px dotted #f00;
}