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

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


موضوع مغلق

الصفحة 1 من 2 < 1 2 > الأخيرة »


06-04-2014 12:17 مساء
محمد
عضـو متميز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 15-10-2012
رقم العضوية : 2494
المشاركات : 609
الدولة : ..::اليمن السعيد::..
الجنس : ذكر
تاريخ الميلاد : 10-1-1994
الدعوات : 18
يتابعهم : 3
يتابعونه : 1
قوة السمعة : 2100
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
السلام عليكم....,,
إستفساري هو لدي صورة وأريد إضافه رابط على جزء منها فمثلاً:-
MjYyMTMxLogini*nputBg
أريد أن أجعل الخانه الأولى لإسم المستخدم والخانه للباسوورد وزر دخول للدخول بدون تقطيع الصورة ....



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

 
 
  LoginInputBg.jpg   تحميل jpg LoginInputBg.jpg مرات التحميل :(1)
الحجم :(11.819) KB
  SearchInputBg.jpg   تحميل jpg SearchInputBg.jpg مرات التحميل :(2)
الحجم :(8.786) KB
 


06-04-2014 04:08 مساء
مشاهدة مشاركة منفردة [1]
Mr King
PBB Staff
rating
العضو غائب
معلومات الكاتب ▼
تاريخ الإنضمام : 27-11-2012
رقم العضوية : 2642
المشاركات : 3210
الدولة : morocco
الجنس : ذكر
تاريخ الميلاد : 1-1-1987
الدعوات : 3
يتابعهم : 2
يتابعونه : 30
قوة السمعة : 18610
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
مرحبا أخي،

بالنسبة لتسجيل الدخول
كود html
<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
#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;
}


06-04-2014 04:43 مساء
مشاهدة مشاركة منفردة [2]
Mr King
PBB Staff
rating
العضو غائب
معلومات الكاتب ▼
تاريخ الإنضمام : 27-11-2012
رقم العضوية : 2642
المشاركات : 3210
الدولة : morocco
الجنس : ذكر
تاريخ الميلاد : 1-1-1987
الدعوات : 3
يتابعهم : 2
يتابعونه : 30
قوة السمعة : 18610
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
بالنسبة لخانة البحث

كود html
<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
.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;
}


07-04-2014 06:28 صباحا
مشاهدة مشاركة منفردة [3]
محمد
عضـو متميز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 15-10-2012
رقم العضوية : 2494
المشاركات : 609
الدولة : ..::اليمن السعيد::..
الجنس : ذكر
تاريخ الميلاد : 10-1-1994
الدعوات : 18
يتابعهم : 3
يتابعونه : 1
قوة السمعة : 2100
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة

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


07-04-2014 01:30 مساء
مشاهدة مشاركة منفردة [4]
محمد
عضـو متميز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 15-10-2012
رقم العضوية : 2494
المشاركات : 609
الدولة : ..::اليمن السعيد::..
الجنس : ذكر
تاريخ الميلاد : 10-1-1994
الدعوات : 18
يتابعهم : 3
يتابعونه : 1
قوة السمعة : 2100
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
هناك أخطاء بسيطة فقط
MTEyNjc4MQ9191%D8%A8%D8%AF%D9%88%D9%86%20%D8%B9%D9%86%D9%88%D8%A7%D9%86
 
  بدون عنوان.png   تحميل png بدون عنوان.png مرات التحميل :(0)
الحجم :(48.975) KB
 


07-04-2014 02:17 مساء
مشاهدة مشاركة منفردة [5]
Mr King
PBB Staff
rating
العضو غائب
معلومات الكاتب ▼
تاريخ الإنضمام : 27-11-2012
رقم العضوية : 2642
المشاركات : 3210
الدولة : morocco
الجنس : ذكر
تاريخ الميلاد : 1-1-1987
الدعوات : 3
يتابعهم : 2
يتابعونه : 30
قوة السمعة : 18610
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة
كما تلاحظ أخي،

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


07-04-2014 02:22 مساء
مشاهدة مشاركة منفردة [6]
محمد
عضـو متميز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 15-10-2012
رقم العضوية : 2494
المشاركات : 609
الدولة : ..::اليمن السعيد::..
الجنس : ذكر
تاريخ الميلاد : 10-1-1994
الدعوات : 18
يتابعهم : 3
يتابعونه : 1
قوة السمعة : 2100
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif [مجابه] إضافة رابط لجزء معين من الصورة

تمام لكن ما هي ال margin



الصفحة 1 من 2 < 1 2 > الأخيرة »

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

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







الساعة الآن 11:50 صباحا