<style type="text/css">



.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*تنسيق الصورة الكبيرة*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ 
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*تنسيق الصورة بالوقوف عليها*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

<a class="thumbnail" href="#thumb"><img src="رابط الصورة المصغّرة" width="100px" height="66px" border="0" /><span><img src="رابط الصورة الكبيرة" />

التعليق على الصورة الكبيرة</span></a>

<form name=mef>
<input type=hidden name=dafunction value="">
<input type=hidden name=tempnum value="">
<input type=hidden name=daboo value="">
<input type=hidden name=memob value="0">
<script language=javascript>

function numbers(x) {

var daboo= dcidcidocument.mef.daboo.value;
var dafunction = dcidcidocument.mef.dafunction.value;
var deccheck = dcidcidocument.mef.results.value;
if(dcidcidocument.mef.results.value == "0" && deccheck.indexOf('.')=="-1") {
dcidcidocument.mef.results.value = "";
}

if(daboo != "true") {
dcidcidocument.mef.results.value=dcidcidocument.mef.results.value+x;
} else {
dcidcidocument.mef.results.value=x;
dcidcidocument.mef.daboo.value="";
}

}

function add() {
  if(dcidcidocument.mef.tempnum.value){
   gofigure();
  }

dcidcidocument.mef.dafunction.value='+';
dcidcidocument.mef.daboo.value='true';
dcidcidocument.mef.tempnum.value=dcidcidocument.mef.results.value;
}

function subtract() {

  if(dcidcidocument.mef.tempnum.value){
  gofigure();
 }
dcidcidocument.mef.dafunction.value='-';
dcidcidocument.mef.daboo.value='true';
dcidcidocument.mef.tempnum.value=dcidcidocument.mef.results.value;
}

function multiply() {
 if(dcidcidocument.mef.tempnum.value){
 gofigure();
 }
dcidcidocument.mef.dafunction.value='*';
dcidcidocument.mef.daboo.value='true';
dcidcidocument.mef.tempnum.value=dcidcidocument.mef.results.value;
}
function divide() {

 if(dcidcidocument.mef.tempnum.value){
 gofigure();
 }
dcidcidocument.mef.dafunction.value='/';
dcidcidocument.mef.daboo.value='true';
dcidcidocument.mef.tempnum.value=dcidcidocument.mef.results.value;
}

function oneoverx() {
dcidcidocument.mef.results.value=1/eval(dcidcidocument.mef.results.value);
}

function percenta() {
var whatdo = dcidcidocument.mef.dafunction.value;
var percnumber = dcidcidocument.mef.results.value / 100;
if(dcidcidocument.mef.tempnum.value){
dcidcidocument.mef.results.value =  eval(dcidcidocument.mef.tempnum.value)*percnumber;
} else {
dcidcidocument.mef.results.value = "0";
}
dcidcidocument.mef.tempnum.value="";
dcidcidocument.mef.dafunction.value="";
}

function squaroot() {
dcidcidocument.mef.results.value=Math.sqrt(dcidcidocument.mef.results.value);
}
function plusminus() {
var xy = dcidcidocument.mef.results.value;
if(xy == "0"){
return false;
}
if(xy.indexOf("-") == "0") {
 xy = xy.substring(1,xy.length);
 
} else {
xy = "-" + xy;

}
dcidcidocument.mef.results.value = xy;
}
function backspace() {
//ignore if zero already.//
if(dcidcidocument.mef.results.value=="0") {
return false; }
//length of the text field//
var numlength = dcidcidocument.mef.results.value;
//subtract one.//
var newresult = numlength.length-1;
//set to new value -1;//
dcidcidocument.mef.results.value = numlength.substring(0,newresult);
//set to zero if nothing left.
if(dcidcidocument.mef.results.value=="") {dcidcidocument.mef.results.value ="0";}
}

function clearfu() {
dcidcidocument.mef.tempnum.value="";
dcidcidocument.mef.results.value="0";
dcidcidocument.mef.dafunction.value="";
}

function gofigure() {
if(dcidcidocument.mef.tempnum.value==".") {
return false;
}
var whatdo = dcidcidocument.mef.dafunction.value;
if(whatdo=="+"){ 
dcidcidocument.mef.results.value = eval(dcidcidocument.mef.results.value) + eval(dcidcidocument.mef.tempnum.value);
}
else if(whatdo=="-"){
dcidcidocument.mef.results.value =  eval(dcidcidocument.mef.tempnum.value)-eval(dcidcidocument.mef.results.value);
}
else if(whatdo=="*"){
dcidcidocument.mef.results.value = eval(dcidcidocument.mef.results.value) * eval(dcidcidocument.mef.tempnum.value);
}

else if(whatdo=="/"){
dcidcidocument.mef.results.value = eval(dcidcidocument.mef.tempnum.value)/eval(dcidcidocument.mef.results.value) ;
}

dcidcidocument.mef.tempnum.value="";
dcidcidocument.mef.dafunction.value="";
}
</script>

<script language=javascript>
<!--//
if (navigator.appName == "Netscape")  { 
dcidcidocument.write("<h3 align=center>Looks Like you're using netscape. Because Netscape is a lousy browser and doesn't do a very good job with CSS the below looks aweful. Please Use Internet Explorer and Not the buggy netscape navigotor.</h3>");
   }
//-->
</script>
<table style="border-style:inset;border-width:2px;" bgcolor=#3399ff><tr>
<td>
<p align="center"><span lang="ar-sa"><b><font face="verdana" color="#FFFFFF">آلة 
حاسبة</font></b></span></td></tr><tr>
<td><input type=text value="0" size=33 name=results></td>
</tr>
<tr><td>
<input type=text name=memry style="background-color:#cccccc;" size=2> 
<input type=button value="Backspace" style="background-color:#CCCCCC;color:red;width:67px;height:27px;font-size:10px;" OnClick="backspace()"> <input type=button value=" CE " style="background-color:#CCCCCC;color:red;width:67px;height:27px;font-size:10px;" OnClick="clearfu()"> <input type=button value=" C " style="background-color:#CCCCCC;color:red;width:57px;height:27px;font-size:10px;" OnClick="clearfu()"> 
</td></tr><tr>
<td>
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" MC " OnClick="dcidcidocument.mef.memry.value=' ',dcidcidocument.mef.memob.value='0'">   
<input type=button value=" 7 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(7)"> <input type=button value=" 8 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(8)"> <input type=button value=" 9 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(9)"> 

<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" / " OnClick="divide()">
<input type=button style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" value="sqrt" OnClick="squaroot()">
</td></tr><tr>
<td>
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value="MR" OnClick="dcidcidocument.mef.results.value=dcidcidocument.mef.memob.value">   
<input type=button value=" 4 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(4)"> <input type=button value=" 5 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(5)"> <input type=button value=" 6 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(6)"> 

<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" * " OnClick="multiply()">
<input type=button style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" value=" % " OnClick="percenta()">
</td></tr>
<tr>
<td>
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" MS ">   
<input type=button value=" 1 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(1)"> <input type=button value=" 2 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(2)"> <input type=button value=" 3 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(3)"> 

<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" - " OnClick="subtract()">
<input type=button style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" value=" 1/x " OnClick="oneoverx()">
</td>
</tr><tr>
<td>
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" M+ " OnClick="dcidcidocument.mef.memry.value=' M',dcidcidocument.mef.memob.value=dcidcidocument.mef.results.value;">   
<input type=button value="0" style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(0)"> <input type=button value="+/-" style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="plusminus() "> <input type=button value=" . " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers('.')"> <input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" + " OnClick="add()"> <input type=button style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" value=" = " OnClick="gofigure()">
</td></tr>
<tr><td> </td></tr>
</table>

<table style="border-style:inset;border-width:2px;" bgcolor=#3399ff><tr>

<style type="text/css">


 /* remove the margin and bullets, set the padding for this demo only*/
.neon {margin:0 0 50px 0; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;}

 /* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {display:inline; float:left; background:url(http://www.cssplay.co.uk/menus/neon_on.gif);}

/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:32px; float:left; background:url(http://www.cssplay.co.uk/menus/neon_off.gif); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}

/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(neon_off.gif) right top; padding:0 40px 0 0; color:#fff;}

/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(neon_on.gif); cursor:pointer; color:#000;}

.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(neon_on.gif); color:#000; cursor:default;}

</style>

<h3>قائمة نيون مضيئة</h3>

  <ul class="neon">
    <li><a href="#nogo"><b>الرئيسية</b></a></li>
    <li><a href="#nogo"><b>حول الموقع</b></a></li>
    <li><a href="#nogo"><b>سجل الزوار</b></a></li>
    <li><a href="#nogo" class="current"><b>اتصل بنا</b></a></li>
    <li><a href="#nogo"><b>مواقع هامة</b></a></li>
  </ul>

<style type="text/css">


.gallerycontainer{
position: relative;

}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*المكان الذى ستظهر به الصور المكبرة*/
z-index: 50;
}

</style>

<a class="thumbnail" href="#thumb"><img src="رابط الصورة المصغرة" width="100px" height="66px" border="0" /><span><img src="رابط الصورة الكبيرة" />
 التعليق على الصورة</span></a>

<style type="text/css">

.menu {
position:relative;
z-index:1000;
font-size:90%;
height:235px;
margin:25px 0 0 15px; /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
position:relative;
border:1px solid #888;
border-width:1px 1px 0 1px;
background:#9bb;
}

.menu li {
background:transparent;
height:26px;
}
* html .menu li {margin-left:-16px; margin-lef\t:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:150px;
color:#000;
text-indent:5px;
border-bottom:1px solid #888;
background:transparent;
}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#999;}

.menu :hover > a {
color:#fff; 
background:#999;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:-1px;
left:100px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
background:#dde;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
background:#ded;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
background:#edd;
}
.menu ul.top2 {top:25px;}
.menu ul.top3 {top:51px;}
.menu ul.top4 {top:77px;}
.menu ul.top5 {top:103px;}
.menu ul.top6 {top:129px;}
.menu ul.top7 {top:155px;}

</style>

<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->


2-- انسخ الكود التالى بالمكان الذى تريد القائمة به

<div class="menu">
<ul>
<li><a href="#nogo">الرابط الأول</a></li>
<li><a href="#nogo">الرابط الثانى</a></li>
<li><a href="#nogo">الرابط الثالث »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="top3">
	<li><a href="#nogo">فرع أول 1</a></li>
	<li><a href="#nogo">فرع أول 2 »<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="top2">
			<li><a href="#nogo">فرع ثانى 1</a></li>
			<li><a href="#nogo">فرع ثانى 2 »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top2">
					<li><a href="#nogo">فرع ثالث 1</a></li>
					<li><a href="#nogo">فرع ثالث 2</a></li>
					<li><a href="#nogo">فرع ثالث 3</a></li>
					<li><a href="#nogo">فرع ثالث4</a></li>
					<li><a href="#nogo"> فرع ثالث 5</a></li>
					<li><a href="#nogo"> فرع ثالث 6</a></li>
					
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">فرع ثانى 3 »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top3">
					<li><a href="#nogo">فرع ثالث 1</a></li>
					<li><a href="#nogo">فرع ثالث 2</a></li>
					<li><a href="#nogo">فرع ثالث 4</a></li>
					<li><a href="#nogo"> فرع ثالث 5</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">فرع اول 3</a></li>
	<li><a href="#nogo">فرع اول 4</a></li>
	<li><a href="#nogo"> فرع اول 5</a></li>
	<li><a href="#nogo"> فرع اول 6</a></li>
	<li><a href="#nogo">فرع اول متفرع »<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="top7">
			<li><a href="#nogo">فرع ثاتى 2 أ »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top1">
					<li><a href="#nogo"> فرع ثالث أ</a></li>
					<li><a href="#nogo">فرع ثالث ب</a></li>
					<li><a href="#nogo"> فرع ثالث ج</a></li>
					<li><a href="#nogo">فرع ثالث د</a></li>
					<li><a href="#nogo"> فرع ثالث هـ</a></li>
					<li><a href="#nogo">فرع ثالث و</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">فرع ثانى </a></li>
			<li><a href="#nogo">فرع ثانى متفرع »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top3">
					<li><a href="#nogo">فرع ثالث 2أ</a></li>
					<li><a href="#nogo">فرع ثالث 2 ب</a></li>
					<li><a href="#nogo"> فرع ثالث 2 ج</a></li>
					<li><a href="#nogo"> فرع ثالث 2 د</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">فرع ثانى ج</a></li>
			<li><a href="#nogo">فرع ثانى د</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">فرع اول 7</a></li>
	<li><a href="#nogo">فرع اول 8</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
<li><a href="#nogo">رابط 4</a></li>
<li><a href="#nogo">رابط 5</a></li>
<li><a href="#nogo">رابط 6</a></li>
</ul>
</div>