1 صورة 2 روابط
-
29-09-2019 - |
سؤال
كيف يمكنك جعل الصورة قابلة للنقر في HTML في مناطق مختلفة من الصورة وتؤدي إلى عنوان URL مختلف ... على سبيل المثال ، لدي صورة أو "زر" إذا كنت كذلك ، لكنني أريدها أن تكون في الواقع 2 الروابط ... جانب واحد من الزر هو "التسجيل" بينما الجانب الآخر هو "Try Out"
المحلول
استخدم CSS-SPRITES
أعتقد أن أفضل طريقة هي استخدام CSS Sprite: http://www.jsfiddle.net/pereskokov/vvhde/1/. الفائدة الرئيسية لاستخدامه - لن تكون صورتك جزءًا من المحتوى ، إنها مجرد ديكور. لذلك سيكون المحتوى الخاص بك يمكن الوصول. كما يمكنك تغيير زخرفة موقعك عبر CSS واستخدام صورة أخرى.
استخدام map
مبرر فقط عندما تكون الصورة جزءًا من المحتوى - بالنسبة لـ exemple ، فهي كذلك خريطة حقيقية :)
لغة البرمجة
<a href="#login" title="Log In" id="login"><span></span>Log In</a>
<a href="#signin" title="Sign In" id="signin"><span></span>Sign In</a>
CSS
#login, #signin {
width: 50px;
height: 27px;
overflow: hidden;
position: relative;
display: block;
float: left;
}
#login span {
width: 50px;
height: 27px;
position: absolute;
top: 0;
left: 0;
background: url(http://dl.dropbox.com/u/5988007/sprite.png) 0 0 no-repeat;
}
#signin span {
width: 50px;
height: 27px;
position: absolute;
top: 0;
left: 0;
background: url(http://dl.dropbox.com/u/5988007/sprite.png) -50px 0 no-repeat;
}
نصائح أخرى
استخدم خرائط صورة HTML: http://www.javascriptkit.com/howto/imagemap.shtml
مثال:
<img src="button.gif" usemap="#yourmap" border="0">
<map name="yourmap">
<area shape="rect" coords="0,0,50,50" href="http://www.yoursite.com/link1.html">
<area shape="rect" coords="50, 0, 100, 100" href="http://www.yoursite.com/link2.html">
</map>
لا تنتمي إلى StackOverflow