طلب كود جافا سكربت كيفية تثبيت عناصر عند ت

طبعا ما ورد يتم استخدامه باستخدام الجافا سكريبت

الامر بسيط باستخدام الجي كويري عند حدث تحريك دولاب الفارة يتم نقل الازرار مع حركة

ولكن يمكن تطبيق ذلك بدون الحركة وفق المثال التالي

<!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>
</head>

<body>

<div style="position:fixed; width: 169px; height: 25px; z-index: 1; left: 10px; top: 15px" id="layer1">
		<input name="Button1" type="button" value="facebook" />  
		<input name="Button1" type="button" value="Twitter" />
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>

</html>

الامر يعتمد على الخاصية position:fixed

للمربع المنسدل من الجانب

يمكن الاعتماد ايضا على الانماط 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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
#layer1:hover
{
	left:0px;
}
#layer1{
	position:fixed;
	width:200px;
	height:200px;
	left:-150px;
	background-color:black;
}
</style>
</head>

<body>

<div id="layer1">
		<input name="Button1" type="button" value="facebook" style="height: 119px; width: 49px" />   
</div>
<br  /><br /><br /><br /><br /><br /><br  /><br /><br /><br /><br /><br /><br  /><br /><br /><br />
<br /><br  /><br /><br /><br /><br /><br /><br  /><br /><br /><br /><br /><br /><br  /><br /><br />
<br /><br /><br  /><br /><br /><br /><br /><br /><br  /><br /><br /><br /><br /><br /><br  /><br />
<br /><br /><br /><br  /><br /><br /><br /><br /><br /><br  /><br /><br /><br /><br /><br /><br  />
</body>

</html>

يعطيك العافيه اخي X-File

بس مجرد هذا الكود لا اكثر بخصوص الايقونات المتحركه ؟؟

وهل يمكنك مساعدتي بالمربع المنسدل من الجنب

جزاك الله خيرا

أخي الغالي ::

شكرا أخي xfile على الطريقة ..

بالنسبة لـjquery هذا الكود استخدمه أنا كثيرا .

ماعليك سوا أن تضيف عليه ماتريد ..

وملف jquery مرفق

<!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>
 <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".panel").hide();
$(".flip").click(function(){
	$(".panel").slideToggle("slow");
  });
});
</script>
</head>

<body>

<div class='panel' style="border-radius:10px 10px;border:1px solid #000000;width:100px;text-margin-left:8px" >
type the <br />
thing you <br />
want to Add
</div> 
<p class='flip' >add your image</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

أضفت لك الكود أتمنى ان ينفعك أخي

ماعليك سو التعديل على موقع الصورة والستايل والجماليات

jquery.js

شكرا لك اخي La Martir

بالنسبه للاستايل و الجماليات اين اجد انواعها في كود الصفحه المرفقه ؟؟

وكيفيه اضافه الكود