الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

كيفية اضافة صورة صغيرة فوق صورة

بدأه qudama في 21 أغسطس 2010 · 8 رد · 909 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم اخواني الاحبة

وأود منكم الاستفسار حول اضافة صورة صغيرة

على صورة خارطة عندما اكبس على الخارطة بالماوس

فتصوري عن طريق الجافاسكربت يمكن اخذ الابعاد التي

انت واقف عليها بالماوس ثم اضافة الصورة في هذه الابعاد

لكن لست متاكد وان كانت كذلك فلا اعلم الكثير عن الجافاسكربت

#2

السلام عليكم .. هل يفيدك هذه الطريقة .. http://www.nrc.govt.nz/Environment/River-and-rainfall-data/River-flows إنظر إلى هذا الموقع و إذا هو ما تريد أخبرني رجأ لكي أساعدك في الحل

السلام

#3

أخي الحبيب ماجد

والله تختلف الفكرة قليلا اي انا اذا كبست في

اي محل في الخارطة تأتي صورة صغيرة او مربع

صغير فوق ما اكبس

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

#4

اعتقد هنا انك ستحتاج الى التعامل مع css

ستجد ما افكر فيه في هذا الرابط إن شاء الله:

http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css/

و هذا مثال على الفكرة:

http://www.sohtanaka.com/web-design/examples/popoutdetails/

لا اله الا الله .. محمد رسول الله

(* ربِ اجعلني مقيم الصلاة و من ذريتي ، ربنا و تقبل دعـاء *)

يا حيّ يا قيـوم ... برحمتك استغيث ... اصلح لي شأني كله و لا تكلني الى نفسي طرفة عين

#5

ليس الأمر بتلك الصعوبة، هذا مثال:

<html>
<head>
<style>
body {background-image:url('syria_map.jpg'); background-repeat:no-repeat;}
#flag {position:absolute}
</style>
<script>
function pin(e){ 
// captures the mouse position 
  posx = 0; posy = 0; 
  if (!e){var e = window.event;} 
  if (e.pageX || e.pageY){ 
	posx = e.pageX; 
	posy = e.pageY; 
  } 
  else {
	if (e.clientX || e.clientY){ 
  	posx = e.clientX; 
  	posy = e.clientY; 
	} 
  }

  var f = document.getElementById('flag');
  f.style.left = posx-3;
  f.style.top = posy-33;
}
</script>
</head>
<body onClick='pin(event)'>
<img id='flag' src='flag.png' width='25' height='35'>
</body>
</html>

الملفات الضرورية في المرفقات.

example.rar

1

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#7

اخي الكريم مثال اخي xacher شغال وعين الله عليه يعني انت ماجربت مثالو

غريبة مثال وما تجربو ليش عما تسال

بعد اذنك اخي اكس بس اضافة صغير

<html>
<head>
<style>
body {background-image:url('syria_map.jpg'); background-repeat:no-repeat;}
#flag {position:absolute}
</style>
<script>
function pin(e){ 
// captures the mouse position 
  posx = 0; posy = 0; 
  if (!e){var e = window.event;} 
  if (e.pageX || e.pageY){ 
	posx = e.pageX; 
	posy = e.pageY; 
  } 
  else {
	if (e.clientX || e.clientY){ 
  	posx = e.clientX; 
  	posy = e.clientY; 
	} 
  }
var img = document.createElement("img");
img.id="imgId";
img.src="flag.png";
img.style.position="absolute"
  img.style.left = posx-3;
  img.style.top = posy-33;
  img.style.width = 20+"px";
  img.style.height = 30+"px";
document.body.appendChild(img);

}
</script>
</head>
<body onClick='pin(event)'>

</body>
</html>

example.rar

2

In bad state

#8

أهلاً أخي X-File

طبعاً توضيح التعديل للأخوة، لإنشاء objects أخرى من الصورة في حال أراد المستخدم وضع عدة لافتات على الخريطة وليس لافتة واحدة مثلاً.

من ناحية أخرى ممكن تطويره للاحتفاظ بمقابض هذه العناصر وتوفير إمكانية إزالتها مثلاً .. لكن هذا خارج نطاق السؤال :)

1

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#9

السلام عليكم

شوف انا عدلت شي بسيط حتى بحيث تغضر تختار نقاط وتحفظها بقاعدة البيانات

بالتوفيق

:)

<html>
<head>
<style>


</style>
<script>
var i=1;
function pin(e){ 
i=i+1;
// captures the mouse position 
  posx = 0; posy = 0; 
  if (!e){var e = window.event;} 
  if (e.pageX || e.pageY){ 
	posx = e.pageX; 
	posy = e.pageY; 
  } 
  else {
	if (e.clientX || e.clientY){ 
  	posx = e.clientX; 
  	posy = e.clientY; 
	} 
  }
var img = document.createElement("img");
img.id="imgId"+i;
img.src="flag.png";
img.style.position="absolute"
  img.style.left = posx-3+"px";
  img.style.top = posy-33+"px";
  img.style.width = 20+"px";
  img.style.height = 30+"px";
document.body.appendChild(img);
}
function getemages()
{
var str="";
var id="";
var top,left;
for(var h=2;h<i;h++)
{
id=document.getElementById("imgId"+h).id;
left=document.getElementById("imgId"+h).style.left+"<br />";
top=document.getElementById("imgId"+h).style.top+"<br />";
str=str+id+".left : "+left+id+".top : "+top;
}
document.getElementById("output").innerHTML=str;
}
</script>
</head>
<body >
<img src="syria_map.jpg"  style="height:90%;width:90%;" onClick='pin(event)'/>
<br />


<button onclick="getemages();">get images</button> 
<div id="output"></div>
</body>
</html>

حاول ان تنقر باكثر من جهة ومن ثم اضغط الزر السفلي

خرج الزر السفلي هي احداثيات الصور

twest.rar

تم تعديل هذه المشاركة بواسطة X-File في 21 أغسطس 2010 في 17:08

In bad state

مواضيع مشابهة