У меня есть следующие css и html:
CSS:
<style>
#sprite {
height:30px;
width: 40px;
background: url(/images/forCSS/sprites.png) no-repeat;
background-position: 0px -465px; /*152 i unit*/
border:1px solid;
}
HTML:
<div id="sprite">
</div>
На этом div отобразите изображение.
Как добавить URL-адрес этого изображения?
Благодарю!
Вы имеете в виду это?
<a href="url">
<div id="sprite"></div>
</a>
#sprite {
height:30px;
width: 40px;
background: url(/images/forCSS/sprites.png) no-repeat;
background-position: 0px -465px;
border:1px solid;
float:right; /* add this */
}
или вы можете сделать это:
$('#sprite').click(function(){
window.location = url;
});
Если вы попросите поместить ссылку через CSS
в этот div
, насколько мне известно, это невозможно. Возможны следующие варианты:
Оберните div
в <a>
<a href="https://www.google.com/"><div></div></a>
div {
background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
width: 570px;
height:150px;
}
Или мы можем поместить <a>
внутри div
и установить его height
и width
+ display: block;
, Это лучший вариант и имеет действительный синтаксис. Один выше работает, но это больше или взломать, чем угодно.
<div><a href="https://www.google.com/"></a></div>
div {
background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
width: 570px;
height:150px;
}
a {
width: 100%;
height: 100%;
display: block;
}
Надеюсь это поможет.
CSS
#sprite {
height:30px;
width: 40px;
background: url(http://omegazelda.files.wordpress.com/2008/04/orace-and-minish-sprite.png) no-repeat;
background-position: 0px -465px; /*152 i unit*/
border:1px solid;
}
HTML
<a href="http://www.google.com"><div id="sprite"></div></a>
Насколько я знаю, вы не можете добавить URL-адрес через css. Можно использовать JavaScript, но см. Как динамически добавлять метки привязки в div в Javascript?
Code-
<div id="sprite">
<a href="#" class="invisibleLink"></a>
</div>
CSS-
#sprite {
height:30px;
width: 40px;
background: url(/images/forCSS/sprites.png) no-repeat;
background-position: 0px -465px; /*152 i unit*/
border:1px solid;
}
.invisibleLink{
display:block;
height: 30px;
width: 40px;
}