PDA

View Full Version : سوال: گرفتن دو عدد به عنوان مختصات براي چاپ يك شي در صفحه


ravand
شنبه 13 اسفند 1390, 23:11 عصر
سلام
فرض كنيد من يك مختصاتي x,y رو از كدهاي php دريافت كردم . ميخوام با استفاده از همين دو عدد يك مثلاً عكس را در صفحه چاپ كنم.و ميخوام اين كار رو با جاوا اسكريپت يا جي كوئري انجام بدم. چون اين دو زبان سمت كلاينت هستن بهتر ميشه اين كار رو باهاشون انجام داد.
متشكرم.
hakan648
یک شنبه 14 اسفند 1390, 00:25 صبح
سلام
لطفا بیشتر توضیح بدید . مختصات عکس رو گرفتیم حالا چه عکسی و در چه زمانی باید نمایش داده بشه ؟
هدف نهاییتون رو بفرمایید .
ravand
یک شنبه 14 اسفند 1390, 08:31 صبح
دادا فرقي نميكنه چه عكسي.
ما براي خودمون يه عكسي رو در نظر ميگيرم. مثلا اين عكس ماست :

<img src="aks.gif">
و من مقدار x مساوي 56 و y مساوي 90 هست . حالا ميخوام اين عكس با اين مختصات در صفحه ي من چاپ بشه.
در واقع كدي ميخوام كه يه سري مختصات رو بگيره و بر اساس اون مختصات ، عكسي رو در صفحه چاپ كنه . به محض اينكه مختصات رو گرفت عكس رو چاپ كنه.
hakan648
یک شنبه 14 اسفند 1390, 15:03 عصر
دو تابع نوشتم برای نمایش و مخفی کردن تصویر - یکسری 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>
<title>Dynamic Image</title>

<script type="text/javascript" src="jquery.min.js"></script>

<style type="text/css">
.dynamicImage
{
position:fixed;
z-index:100;
}
</style>
</head>
<body>

<div class="dynamicImage"><img src="myPic.jpg" alt="Dynamic Image Loading ..."/></div>

<script type="text/javascript">
function showImage(x, y) {
$(".dynamicImage").show();
$(".dynamicImage").width($(".dynamicImage img").width());
$(".dynamicImage").height($(".dynamicImage img").height());

$(".dynamicImage").css("top", y);
$(".dynamicImage").css("left", x);
}

function hideImage() {
$(".dynamicImage").hide();
}

window.onload = function () {
showImage(200, 5);
}
</script>

</body>
</html>


موفق باشی ...
ravand
یک شنبه 14 اسفند 1390, 15:33 عصر
خيلي ممنون مهندس من دو روز روي اين كار كردم ولي نتونستم بنويسم.
يعني الان عدد 200 و 5 مختصات x و y ما هستن؟
يعني در واقع x و y همان مقدار left و top هستن؟
اين مقادير رو نميشه با css نوشت و حتما بايد با جاوا اسكريپت ايجاد كنيم؟
متشكرم.
hakan648
یک شنبه 14 اسفند 1390, 15:50 عصر
سلام

يعني الان عدد 200 و 5 مختصات x و y ما هستن؟
بله

يعني در واقع x و y همان مقدار left و top هستن؟
بله

اين مقادير رو نميشه با css نوشت و حتما بايد با جاوا اسكريپت ايجاد كنيم؟
میشه مستقیم مقادیر رو در خورد تگ وارد کنید - اما با توجه سوالتون من این پاسخ رو دادم .

باید دقیقا مقادیر گرفته شده از PHP رو در مقابل مقادیر موجود در خود تگ قرار بدید :


<div class="dynamicImage" style="left:Xpx;top:Ypx;"><img src="myPic.jpg" alt="Dynamic Image Loading ..."/></div>
ravand
یک شنبه 14 اسفند 1390, 16:01 عصر
خيلي ممنون مهندس.
خوب اگه با همين خط كد هم ميشه مقدار مختصات رو گرفت ديگه اينطوري من نيازي به كدهاي جاوا اسكريپت ندارم . من اصلا ً كدهاي جاوا اسكريپت رو ميخواستم فقط براي اينكه مقدار مختصات رو از php برام بگيره و عكس رو طبق اون چاپ كنه.
من به اين شكل توي php وارد كردم :

$aks = 'img/asb.gif';
echo "<img src=\"{$aks}\" style=\"left:{$y1}; top:{$x1};\">";
ولي نميدونم اين با پيكسل چاپش ميكنه يا با واحد ديگه؟
متشكرم.
ravand
یک شنبه 14 اسفند 1390, 16:56 عصر
خيلي متشكر.
كدي كه در بالا ارسال كردم اشتباه بود . بايد حتما از جاوا اسكريپت استفاده كنم. براي ارتباط php با كدهاي جاوا اسكريپت بايد به اين شكل عمل كنم:

showImage(<?php echo $x1; ?>, <?php echo $y1; ?>);
در ضمن اول اسكريپتمون حتما بايد از اين خط استفاده كنيم وگرنه كار نميكنه :

<!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" >
hakan648
یک شنبه 14 اسفند 1390, 17:26 عصر
همون کد CSS هم میشه فقط px رو هم باید قرار بدید !

همونطوری که الان مقادیر رو در تابع جاوا اسکریپت قرار دادید , باید در تگ img قرار بدید . نیازی نیست کل تگ رو با دستور echo چاپ کنید . ( البته php بلد نیستما :لبخند: )
ravand
یک شنبه 14 اسفند 1390, 19:11 عصر
همون کد CSS هم میشه فقط px رو هم باید قرار بدید !
من اينطوري نوشتمش ولي نميدونم چرا كار نميكنه يه نگاش بكنيد:

<!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>
<title>aks</title>
</head>
<body>
<img src="shah.gif" style="left:50px;top:60px;">
</body>
</html>



نیازی نیست کل تگ رو با دستور echo چاپ کنید . ( البته php بلد نیستما )
براي اينكه كدهاي php رو داخل كدهاي جاوا اسكريپت قرار بديم اينطوري مي نويسيم.
متشكرم.
hakan648
یک شنبه 14 اسفند 1390, 22:26 عصر
براي اينكه كدهاي php رو داخل كدهاي جاوا اسكريپت قرار بديم اينطوري مي نويسيم.
اونی که با echo چاپ میکردید که تگ img بود - چرا داخل كدهاي جاوا اسكريپت میخواستید قرار بدید ؟

راستش رو بخواید یکمی php کار کردم :چشمک:
در نهایت همچین چیزی باید داشته باشید :


<img src="shah.gif" style="left:<?php echo $x1; ?>px;top:<?php echo $y1; ?>px;">
ravand
یک شنبه 14 اسفند 1390, 22:40 عصر
اين كه ديديد من img رو با echo چاپ كردم به اين دليل بود كه من ميخواستم اين تگ رو به همراه كدهاي html ديگه داخل كدهاي php قرار بدم براي همين اين كار رو كردم. البته ميتونستم از كدهاي php هم اين كدها رو بيارم بيرون . ولي بازم بايد متغيير ايكس و واي رو با echo چاپ ميكردم . پس فرقي نميكرد.

در رابطه با اين كد شما ، ميگم اگه اين كدي كه الان داديد كار بكنه پس اينم بايد كار بكنه چرا كار نميكنه؟

<img src="shah.gif" style="left:50px;top:45px;">
متشكرم.
hakan648
یک شنبه 14 اسفند 1390, 23:04 عصر
شما CSS هایی که در این پست (http://barnamenevis.org/showthread.php?330748-%DA%AF%D8%B1%D9%81%D8%AA%D9%86-%D8%AF%D9%88-%D8%B9%D8%AF%D8%AF-%D8%A8%D9%87-%D8%B9%D9%86%D9%88%D8%A7%D9%86-%D9%85%D8%AE%D8%AA%D8%B5%D8%A7%D8%AA-%D8%A8%D8%B1%D8%A7%D9%8A-%DA%86%D8%A7%D9%BE-%D9%8A%D9%83-%D8%B4%D9%8A-%D8%AF%D8%B1-%D8%B5%D9%81%D8%AD%D9%87&p=1456384&viewfull=1#post1456384) دادم رو فراموش کردید .
ravand
یک شنبه 14 اسفند 1390, 23:25 عصر
منظورتون ايناست؟

<style type="text/css">
#dynamicImage
{
position:fixed;
z-index:100;
}
</style>
اگه ميشه كلش رو بنويسد اينا كدهاي منه:

<!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>
<title>aks</title>
</head>
<body>
<img src="shah.gif" style="left:50px;top:45px;"/>
</body>
</html>
ravand
یک شنبه 14 اسفند 1390, 23:27 عصر
اينطوري؟

<!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>
<title>aks</title>
</head>
<body>
<img src="shah.gif" style="left:50px;top:45px;position:relative;"/>
</body>
</html>
hakan648
دوشنبه 15 اسفند 1390, 07:27 صبح
عجب تاپیکی شد !


<img src="myPic.jpg" alt="Loading ..." style="top:50px; left:50px; position:fixed; z-index:100;" />

فقط همین رو در body قرار بدید .
ravand
دوشنبه 15 اسفند 1390, 09:01 صبح
اين z-index:100 اينجا كارش چيه؟
چون وقتي من از توي كد حذفش كردم عملكرد كد هيچ فرقي نكرد . من قبلا با اين دستور براي شماره گذاري لايه استفاده ميكردم ولي اينجا كارش چيه؟
e107365
دوشنبه 15 اسفند 1390, 15:15 عصر
عجب تاپیکی شد !
یه لایک :))