تغییر تصویر با حرکت موس بروی لینک ها {لطفا ایراد کد من را بگیرید}
سلام
لطفا این کد را نگاه کنید. شما باید 3 عکس با نام های pic1.jpg و pic2.jpg و pic3.jpg را در جاییکه فایل html مثال را گذاشته اید بگذارید.
حالا همانطور که می بینید وقتی بروی لینک ها حرکت می کنید تصویر هر یک نمایش داده می شود. حالا مشکل اینجاست که من می خواهم وقتی بروی لینک ها حرکت می کنم تصویر هر لینک در کادر سبز رنگ نمایش داده شود. چون مسیر دهی نمایش در کد جاوا تنظیم شده ظاهرا امکان انجام این کار با این روش نیست و باید کد جاوا تغییراتی کند.
لطفا راهنمایی کنید.
نکته مهم:
همانطور که می بینید من یک فضایی را در روی کادر سبزرنگ قرار دادم که در آن عکسی با نام spacer.gif قرار دارد و کار ان فقط حفظ فضای نمایش تصویر است (کادر سبز رنگ) می خواهم تصاویر لینک های من بجای spacer.gif نمایش داده شود.
ممنون
کد:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<SCRIPT LANGUAGE="JavaScript">
var pic=null;
function showPic(name)
{
pic= document.createElement('<DIV>');
pic.innerHTML="<img src='images/"+name+".jpg' style = 'width:146px;height:110px'>"
pic.style.position = 'absolute';
var ref = document.getElementsByName(name);
pic.style.left = "159px";
pic.style.top = "187px";
document.body.appendChild(pic);
}
function hidePic()
{
if(pic!=null)
{
pic.parentNode.removeChild(pic);
pic=null;
}
}
</SCRIPT>
<table border="0" width="100%" id="table1" height="160" cellspacing="0" cellpadding="0" dir="rtl">
<tr>
<td width="101%" height="44" style="background-image: url('images/boxcenter.gif'); background-repeat: repeat-x; background-position: left top; " valign="top" colspan="3">
<table border="0" width="100%" id="table3" cellspacing="0" cellpadding="0" height="44">
<tr>
<td width="44" style="background-image: url('images/boxright.gif'); background-repeat: no-repeat; background-position: right top"> </td>
<td> </td>
<td width="44" style="background-image: url('images/boxleft.gif'); background-repeat: no-repeat; background-position: left top"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="101%" height="110" style="background-repeat: repeat-x; background-position: left top; " valign="top" colspan="3" bgcolor="#FFFFFF">
<table border="0" width="100%" id="table5" height="172" cellspacing="0" cellpadding="0">
<tr>
<td height="34" width="88%" bgcolor="#8779A6" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #A69BC1">
<a href="link" name=pic1 onmouseover = "showPic(this.name)" onmouseout = "hidePic()">pic1</a>
</td>
<td height="110" width="146" align="left" rowspan="3" valign="top" bgcolor="#008000">
<img name="imnews" id="imnews" border="0" src="images/spacer.gif" width="146" height="110"></td>
</tr>
<tr>
<td height="33" width="88%" bgcolor="#8779A6" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #A69BC1">
<a href="link" name=pic2 onmouseover = "showPic(this.name)" onmouseout = "hidePic()">pic2</a>
</td>
</tr>
<tr>
<td height="33" width="88%" bgcolor="#8779A6">
<a href="link" name=pic3 onmouseover = "showPic(this.name)" onmouseout = "hidePic()">pic3</a>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="5" style="background-repeat: no-repeat; background-position: right bottom; ; background-image:url('images/boxrightb.gif')" bgcolor="#FFFFFF" valign="top">
<table border="0" width="100%" id="table4" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
</td>
<td height="5" style="background-repeat: no-repeat; background-position: left bottom" bgcolor="#FFFFFF" valign="top">
</td>
<td height="5" style="background-repeat: no-repeat; background-position: left bottom; background-image:url('images/boxleftb.gif')" bgcolor="#FFFFFF" valign="top">
</td>
</tr>
</table>
یک کد جدید می خواهم داریوش جان
آقا داریوش یک لطف به من می کنی
ببین دادا من نتونستم از این کد استفاده کنم.
ببین جسارتا لطفا یک کد برای من بنویس که به این شکل باشه.
لطفا این کد را ببین:
کد:
<table border="1" width="100%" id="table1" height="136" dir="rtl">
<tr>
<td> </td>
<td width="235" rowspan="3"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
داریوش جان من می خواهم در cell های سمت راستی که 3 تا است می خواهم لینک بگذارم و وقتی بروی آن لینک ها حرکت کردیم عکس هر کدام در cell سمت چپی نشان داده بشه. می خواهم وابسته به ID آن cell باشد.
همچنین وقتی بروی هر لینک حرکت می کنیم رنگ زمینه cell هر کدام تغییر کند.
مرسی
