آسف شباب على الغياب طول
لقد غيرت في الكود و اخرجت بعض المتغيرات الازمة حتى يسهل التعديل والتحكم في التصميم من خلال css
كود PHP:
<style>
.normalDiv{
filter:alpha(opacity=100);
}
.clickDiv{
filter:alpha(opacity=77);
}
.eventDiv{
border:thin #000000 solid;
}
</style>
-normalDiv نضع هنا التصميم لل div أو لنقل الصندوق في الحالة العادية
-clickDiv تصميم للصندوق عند الضغط عليه و مثالنا هنا انه يكون شفافا
كود:
filter:alpha(opacity=77);
-eventDiv تصميم للصندوق في عند ملامسته بالعنصر المتحرك و مثالنا عنا أنه يصبح له اطار بلون أسود
كود:
border:thin #000000 solid;
هذا في ما يخص التغيرات اللازمة في ال Style
نأتي الى الكود هناك ثبلث متغيرات فقط هما الذان يستوجبان التغيير
كود:
border:thin #000000 solid;
كود PHP:
var numDiv = 4;
var cursorEvent = "all-scroll";
var cursorClick = "move";
numDiv هنا تضع عدد ألصناديق او العناصر التي تود تحريكها و مثالنا هنا أربعة عناصر فوضعنا رقم 4
cursorEvent هنا شكل مؤشر الفأرة عند ملامسة العنصر
cursorClick هنا شكل مؤشر الفأرة عند الضغط العنصر
و هذه الصفحة بها لائحة أشكال متغيرات المؤشر وأيضا بعض ستيل تأثيرات فلترات css
http://www.ksurf.net/~bermania/web/c...ro_divers.html
أي عنصر أو وسم div أو span نريد تحريكه و تحريك العناصر التي يحتويها علينا أن نعطي لل id الخاص بها 1div و نعطي لل style الخاص به position:absolute و يجب و بالضرورة أن نحدد مستواها من خلا top و left و هذا مثال
كود:
<div id="1div" style="position:absolute; left:41px; top:17px">
وداخل هذا الصندوق نعطي لأي عنصر أردناه ان يحركه id=1img بغض النظر عن كونه صورة أو div أو كتابة . و فقط
وهذا مثال عن صندوق بمحركه
كود PHP:
<div id="1div" style="position:absolute; left:41px; top:17px">
<image src="img/w.JPG" id="1img">
<BR>Salam All
</div>
و اذا أردنا فتح أكثر من صندوق ما علينا الا تتبع ما ذكرت أعلاه مع مراعات تسلسل ال id ك 1div 2div 3div ... 1img 2img 3img
و أيضا تحديد المستوى و اعطاء البوزيشن absolute
تبقى في الأخير مشكلة كيف سيتذكر المتصفح وضعية العناصر عند تغيرهما في حالة اذا استدعينا الصفحة من جديد ..
هناك حلان اما عن طريق الكوكيز بجافاسكريبت او عن طريق php و هي المفضلة كون الكوكي سيقتصر على التغيرات في الجهاز اما بالأخيرة فأفضل .. و أنت لها يا بشار
أعتقد أن الموضوع قد نال حقه من الثتبيث أتمنى فسح الجال أمام باقي المواضيع الأخرى التي تستحق <<< ناوي يهرب
مدمن أنترنيت أريد التطبيق حالا
و السلام
كود PHP:
<style>
.clickDiv{
filter:alpha(opacity=77);
}
.normalDiv{
filter:alpha(opacity=100);
}
.eventDiv{
border:thin #000000 solid;
}
</style>
<script>
//////////////////////
var numDiv = 4; // change
var cursorEvent = "all-scroll"; // change
var cursorClick = "move"; // change
/////////////////////
var wino=0,X,Y,T,L,x,y,i,tagDiv,S=1,oldTop,OldLeft,forDiv,divId,per=false,TagImage,tgs;
drags = function(){
if (event.srcElement.className=="drag"){
wino = 1;
///
Img=event.srcElement;
///
tagDiv = document.getElementById(parseInt(Img.id)+'div');
oldTop = tagDiv.style.top;
oldLeft = tagDiv.style.left;
///
tagDiv.style.zIndex = S;
S++;
///
tagDiv.className = "ClickDiv";
Img.style.cursor = cursorClick;
///
L=tagDiv.style.pixelLeft;
T=tagDiv.style.pixelTop;
x=event.clientX;
y=event.clientY;
document.onmousemove = function(){
if(event.button==1&&wino){
X=event.clientX;
Y=event.clientY;
var tagDivS = tagDiv.style;
tagDivS.pixelLeft = L+X-x
tagDivS.pixelTop = T+Y-y;
var Ttop = tagDivS.pixelTop;
var Tleft = tagDivS.pixelLeft;
///*
for(i=1;i<numDiv+1;i++){
forDiv = document.getElementById(i+'div');
var forDivS = forDiv.style;
forDiv.className = "normalDiv";
tagDiv.className = "clickDiv";
var Ftop = forDivS.pixelTop;
var Fleft = forDivS.pixelLeft;
///////
var ImgW = Img.width;
var ImgH = Img.height;
if(Ttop>Ftop && Ttop<Ftop+ImgH && Tleft>Fleft && Tleft<Fleft+ImgW){
forDiv.className = "eventDiv";
//forDivS.border = 'thin #000000 solid';
divId = forDiv.id;
per = true
}
}
return false
}
}
}
}
document.onmousedown = drags
window.onunload = function(){
/*
var msg = "\
************************** \n\
Dev: Ibrahim Bidi \n\
Url: www.WinoScript.com \n\
Email: Zizwar@hotmail.com \n\
Username: Zizwar` \n\
************************** \n\
";
alert(msg)
*/
}
document.onmouseup = function(){FuncWino();wino = 0}
FuncWino = function(){
if(wino){
//tagDiv.style.filter = 'alpha(opacity=100)';
tagDiv.className = 'normalDiv';
Img.style.cursor = cursorEvent;
tagDiv.style.top = oldTop;
tagDiv.style.left = oldLeft;
///
if(per){
var DivIds = document.getElementById(divId);
var oldHtml = tagDiv.innerHTML;
var oldId = tagDiv.id
////
tagDiv.innerHTML = DivIds.innerHTML;
DivIds.innerHTML = oldHtml;
tagDiv.id = DivIds.id;
DivIds.id = oldId;
DivIds.className = 'normalDiv';
per = false
}
///
}
}
window.onload = function(){
for(i=1;i<numDiv+1;i++){
TagImage = document.getElementById(i+'img');
TagImage.className = "drag";
tgs = TagImage.style;
tgs.position = "relative";
tgs.cursor = cursorEvent;
}
}
</script>
<!-- ///////////////HTML//////////////// -->
<div id="1div" style="position:absolute; left:41px; top:17px">
<image src="img/w.JPG" id="1img">
<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
ZZZZZZZZZZZZZZZZ<BR>
</div>
<!-- /////////// -->
<div id="2div" style="position:absolute; left:328px; top:17px;">
<image src="img/b.JPG" id="2img">
<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
SSSSSSSSSSSSSSSS<BR>
</div>
<!-- /////////// -->
<div id="3div" style="position:absolute; left:47px; top:250px">
<image src="img/r.JPG" id="3img">
<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
TTTTTTTTTTTTTTTT<BR>
</div>
<!-- /////////// -->
<div id="4div" style="position:absolute; left:328px; top:250px">
<image src="img/s.JPG" id="4img">
<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
AAAAAAAAAAAAAAAA<BR>
</div>
<!-- /////////// -->
و مبروك عودتي 
ower:
