أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

إضافة رابط لجزء معين من الصورة

السلام عليكم....,, إستفساري هو لدي صورة وأريد إضافه رابط على جزء منها فمثلاً:- أريد أن أجعل الخانه الأولى لإسم المستخدم والخانه للباسوورد وز


موضوع مغلق


06-04-2014 12:17 مساءً
معلومات الكاتب ▼
انضم في : 15-10-2012
رقم العضوية : 2,494
المشاركات : 616
الدولة : اليمن
الجنس :
تاريخ الميلاد : 10-1-1998
الدعوات : 23
قوة السمعة : 2,100
موقعي : زيارة موقعي
العضو غائب تدهور الاوضاع في في المنطقه
السلام عليكم....,,
إستفساري هو لدي صورة وأريد إضافه رابط على جزء منها فمثلاً:-
MjYyMTMxLoginInputBg
أريد أن أجعل الخانه الأولى لإسم المستخدم والخانه للباسوورد وزر دخول للدخول بدون تقطيع الصورة ....

+

وكدا مع مربع البحث الموضح في الصورة:
Mjg0MTA4MQ9191SearchInputBg
أريد أن أجعل الجزء الأول من الصورة لكلمة البحث والزر الدي في الطرف للبحث بدون تقطيع الصورة مع شرح مبسط لو تكرمتم
أتمنى الفكر وصلت لأنه أعتقد هدا شي أساسي في التحويل

 
 


look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  06-04-2014 04:08 مساءً   [1]
معلومات الكاتب ▼
انضم في : 27-11-2012
رقم العضوية : 2,642
المشاركات : 3,234
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18,850
مرحبا أخي،

بالنسبة لتسجيل الدخول
كود html
CODE
<div id="loginBG">
    <div class="login">
        <div class="vis">
            <form method="post" action="index.php?page=login&login=1">
            <input type="text" id="navbar_username" class="login_input" name="username" value="{$lang['username']}" onfocus="if (this.value == '{$lang['username']}') this.value = '';" size="12"  />
            <input type="password" id="navbar_password" class="login_input" name="password" value="pass" onfocus="if (this.value == 'pass') this.value = '';" size="12"/>
            <input type="submit" class="submit_login" value="{$lang['login']}" />
            <label for="fp1"><input type="checkbox" name="temporary" value="on" id="fp1" />  {$lang['Temp_login']}</label>  
            </form>
            <p class="tasgiil">
            <a href="index.php?page=forget&index=1"> {$lang['Lost_password']}</a> |
            </p>
            <p class="nseet">
            <a href="index.php?page=forget&active_member=1&send_active_code=1">{$lang['send_active_code']} </a>
            </p>
        </div>    
    </div>    
</div>


كود css
CODE
#loginBG {
    height: 115px;
    position: relative;
}
#loginBG .login {
    height: 70px;
    width: 438px;
    background: url('images/login.png') no-repeat scroll right center transparent;
    top: 15px;
    right: 10px;
    left: auto;
    position: absolute;
}
#loginBG .login .vis {
    position: absolute;
    background: url('images/blue/vis.png') no-repeat scroll 0% 0% transparent;
    width: 352px;
    height: 30px;
    right: 85px;
    left: auto;
    top: 10px;
}
#loginBG .login .vis input[type="text"] {
    border: 0px none;
    position: absolute;
    top: 2px;
    width: 105px;
    height: 25px;
    background: none repeat scroll 0% 0% transparent;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-family: tahoma;
    font-weight: bold;
    direction: rtl;
    color: #A2A2A2;
    border-radius: 2px;
    right: 36px;
}
#loginBG .login .vis input[type="password"] {
    border: 0px none;
    position: absolute;
    top: 2px;
    width: 105px;
    height: 25px;
    background: none repeat scroll 0% 0% transparent;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-family: tahoma;
    font-weight: bold;
    direction: rtl;
    color: #A2A2A2;
    border-radius: 2px;
    right: 185px;
}
#loginBG .login .vis input[type="submit"] {
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    border: 0px none;
    background: none repeat scroll 0% 0% transparent;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 53px;
    height: 29px;
}
#loginBG .login .vis label {
    position: absolute;
    right: -10px;
    top: 53px;
    direction: rtl;
    color: #FFF;
    font-family: GESSTwoMedium-Medium;
    font-size: 10px;
    line-height: 24px;
    width: 130px;
    background: none repeat scroll 0% 0% transparent;
}
#loginBG .login .vis label input[type="checkbox"] {
    float: right;
    margin: 5px;
}
#loginBG .login .vis .tasgiil {
    color: #FFF;
    font-family: GESSTwoMedium-Medium;
    font-size: 12px;
    position: absolute;
    width: 114px;
    height: 12px;
    top: 44px;
    left: 10px;
}
#loginBG .login .vis .nseet {
    color: #FFF;
    font-family: GESSTwoMedium-Medium;
    font-size: 12px;
    position: absolute;
    width: 100px;
    height: 12px;
    top: 44px;
    left: 123px;
}

look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  06-04-2014 04:43 مساءً   [2]
معلومات الكاتب ▼
انضم في : 27-11-2012
رقم العضوية : 2,642
المشاركات : 3,234
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18,850
بالنسبة لخانة البحث

كود html
CODE
<div class='search'>
<form name="search" action="index.php?page=search" method="get">
<input type="hidden" name="page" value="search" />
<input type="hidden" name="start" value="1"/>
<input type="hidden" name="search_only" value="1" />
<input type="hidden" name="sort_order" value="DESC" />
<input type="hidden" name="section" value="all" />
<label for='main_search' class='hide'>{$lang['start_search']}</label>
<div>
<input type="text" name="keyword"  value="{$lang['search_keyword']}" onfocus="if (this.value == '{$lang['search_keyword']}') this.value = '';"
dir="{$_CONF['info_row']['content_dir']}" />
<input type="submit"  title="{$lang['start_search']}" tabindex="6" />
</div>
</form>
</div>


كود css
CODE
.search {
    position: absolute;
    width: 244px;
    height: 34px;
    background: url('images/search.png') no-repeat scroll 0% 0% transparent;
}
.search input[type="text"] {
    border: 0px none;
    position: absolute;
    top: 1px;
    left: 52px;
    width: 154px;
    height: 29px;
    background: none repeat scroll 0% 0% transparent;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-family: tahoma;
    font-weight: bold;
    direction: rtl;
    color: #A2A2A2;
}
.search input[type="submit"] {
    border: 0px none;
    position: absolute;
    top: 4px;
    left: 5px;
    width: 45px;
    background: none repeat scroll 0% 0% transparent;
    margin: 0px;
    padding: 0px;
    height: 25px;
    cursor: pointer;
}

look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  07-04-2014 06:28 صباحاً   [3]
معلومات الكاتب ▼
انضم في : 15-10-2012
رقم العضوية : 2,494
المشاركات : 616
الدولة : اليمن
الجنس :
تاريخ الميلاد : 10-1-1998
الدعوات : 23
قوة السمعة : 2,100
موقعي : زيارة موقعي
العضو غائب تدهور الاوضاع في في المنطقه
سلمت يداك وسأجربه لكن ممكن شرح لكود ال css لأستفيد منه لأقصى حد

look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  07-04-2014 01:30 مساءً   [4]
معلومات الكاتب ▼
انضم في : 15-10-2012
رقم العضوية : 2,494
المشاركات : 616
الدولة : اليمن
الجنس :
تاريخ الميلاد : 10-1-1998
الدعوات : 23
قوة السمعة : 2,100
موقعي : زيارة موقعي
العضو غائب تدهور الاوضاع في في المنطقه
هناك أخطاء بسيطة فقط
MTEyNjc4MQ9191%D8%A8%D8%AF%D9%88%D9%86%20%D8%B9%D9%86%D9%88%D8%A7%D9%86
 
  بدون عنوان.png   تحميل png بدون عنوان.png مرات التحميل :(4)
الحجم :(48.975) KB
 


look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  07-04-2014 02:17 مساءً   [5]
معلومات الكاتب ▼
انضم في : 27-11-2012
رقم العضوية : 2,642
المشاركات : 3,234
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18,850
كما تلاحظ أخي،

فإنّ الكلاس الخاص بخانة البحث .search وضعنا له position: absolute
وبالتالي يجب تحديد مكان الخانة بإضافة left : 5px أو margin-left: 5px وكذلك top : 5px أو margin-top: 5px (إلى الكلاس .search)
مع تغيير القيمة 5px إلى ما يناسبك

look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  07-04-2014 02:22 مساءً   [6]
معلومات الكاتب ▼
انضم في : 15-10-2012
رقم العضوية : 2,494
المشاركات : 616
الدولة : اليمن
الجنس :
تاريخ الميلاد : 10-1-1998
الدعوات : 23
قوة السمعة : 2,100
موقعي : زيارة موقعي
العضو غائب تدهور الاوضاع في في المنطقه
[face=Arial, Times New Roman]تمام لكن ما هي ال [/face] margin

look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  07-04-2014 02:30 مساءً   [7]
معلومات الكاتب ▼
انضم في : 27-11-2012
رقم العضوية : 2,642
المشاركات : 3,234
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18,850
حينما يكون لديك
CODE
position : absolute


إذا استخدمت top فإنّ المحتوى سيذهب لأعلى الصفحة (يعني سيخرج من الإطار الموجود فيه، مثلا
إذا كان موجودا داخل table )
ولكن إذا استخدمت margin-top فإنّك تضع المحتوى في الجانب الأعلى ، داخل الاطار ( لن يخرج المحتوى عن الإطار )


تم تحرير المشاركة بواسطة :Mr King بتاريخ:03-05-2014 11:41 مساءً


look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  03-05-2014 11:41 مساءً   [8]
معلومات الكاتب ▼
انضم في : 27-11-2012
رقم العضوية : 2,642
المشاركات : 3,234
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18,850
السلام عليكم ورحمة الله وبركاته ،،
تم غلق الموضوع لأحد الأسباب التالية:
  1. تم حل المشكلة والحمد لله.
  2. بقاء الموضوع لمدة 3 أيام بدون الرد عليه أو وجود إشارة تدل على رجوع العضو إليه.
  3. لا يوجد حل لهذه المشكلة (إذا وجد الحل سوف يتم إعادة فتح الموضوع).
عزيزي العضو حرصا على عدم تداخل المواضيع ببعضها وبالتالي صعوبة إستخدام عملية البحث بالنسبة للأعضاء قررت إدارة المنتديات بإغلاق المواضيع التي تتوافق مع الأسباب السابقة. بإمكانك بدأ موضوع جديد أو مراسلة أحد المشرفين إن كنت متأكد من رغبتك في الإستمرار .

إدارة المنتديات،،



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
هل يمكن إضافة رابط في ملف xml Mr King
2 789 Mr King
[مجابه] ممكن طريقة إضافة رابط صفحة الموقع علي facebook newghanou
3 847 isma3eliano
يجب إضافة رابط منتداك الشخصي في معلوماتك الشخصية في ملفك الشخصي PhpMax
0 3196 PhpMax

الكلمات الدلالية
لا يوجد كلمات دلالية ..









الساعة الآن 12:24 AM