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

  1. الرئيسية
  2. قسم تطوير منتديات PBBoard
  3. ستايلات Styles
  4. مشاكل وحلول الاستايلات

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

موضوع مغلق


subject icon [مجابه] إضافة رابط لجزء معين من الصورة
06-04-2014 12:17 مساءً
صورة محمد الشخصية
محمد
معلومات الكاتب
السلام عليكم....,,

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

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

أريد أن أجعل الخانه الأولى لإسم المستخدم والخانه للباسوورد وزر دخول للدخول بدون تقطيع الصورة ....



+



وكدا مع مربع البحث الموضح في الصورة:

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

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

أتمنى الفكر وصلت لأنه أعتقد هدا شي أساسي في التحويل



 

look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  06-04-2014 04:08 مساءً   [1]
صورة Mr King الشخصية
Mr King
معلومات الكاتب
مرحبا أخي،



بالنسبة لتسجيل الدخول

كود 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="forget.html"> {$lang['Lost_password']}</a> |
            </p>
            <p class="nseet">
            <a href="active_user.html">{$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]
صورة Mr King الشخصية
Mr King
معلومات الكاتب
بالنسبة لخانة البحث



كود 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]
صورة محمد الشخصية
محمد
معلومات الكاتب
سلمت يداك وسأجربه لكن ممكن شرح لكود ال css لأستفيد منه لأقصى حد

look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  07-04-2014 01:30 مساءً   [4]
صورة محمد الشخصية
محمد
معلومات الكاتب
هناك أخطاء بسيطة فقط

إضافة رابط لجزء معين من الصورة
  بدون عنوان.png   تحميل png بدون عنوان.png مرات التحميل :(4)
الحجم :(48.975) KB
 

look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  07-04-2014 02:17 مساءً   [5]
صورة Mr King الشخصية
Mr King
معلومات الكاتب
كما تلاحظ أخي،



فإنّ الكلاس الخاص بخانة البحث .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]
صورة محمد الشخصية
محمد
معلومات الكاتب
[face=Arial, Times New Roman]تمام لكن ما هي ال [/face] margin

look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
  07-04-2014 02:30 مساءً   [7]
صورة Mr King الشخصية
Mr King
معلومات الكاتب
حينما يكون لديك
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]
صورة Mr King الشخصية
Mr King
معلومات الكاتب
السلام عليكم ورحمة الله وبركاته ،،

تم غلق الموضوع لأحد الأسباب التالية:
  1. تم حل المشكلة والحمد لله.
  2. بقاء الموضوع لمدة 3 أيام بدون الرد عليه أو وجود إشارة تدل على رجوع العضو إليه.
  3. لا يوجد حل لهذه المشكلة (إذا وجد الحل سوف يتم إعادة فتح الموضوع).
عزيزي العضو حرصا على عدم تداخل المواضيع ببعضها وبالتالي صعوبة إستخدام عملية البحث بالنسبة للأعضاء قررت إدارة المنتديات بإغلاق المواضيع التي تتوافق مع الأسباب السابقة. بإمكانك بدأ موضوع جديد أو مراسلة أحد المشرفين إن كنت متأكد من رغبتك في الإستمرار .



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


المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
إضافة أيقونة رفع ملف صوتي من الجهاز او ادراج رابط صوتي خارجي لمحرر المنتدى naseemtork
 6 213 naseemtork
هل يمكن إضافة رابط في ملف xml Mr King
 2 941 Mr King
[مجابه] ممكن طريقة إضافة رابط صفحة الموقع علي facebook newghanou
 3 934 isma3eliano
يجب إضافة رابط منتداك الشخصي في معلوماتك الشخصية في ملفك الشخصي PhpMax
 0 3290 PhpMax

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


« [مجابه] مشكله فى الإقتباس | [مجابه] طلب كود @font face »




الساعة الآن 06:08 PM