Как сделать фоновые изображения кликабельны (JavaScript или CSS)

Пожалуйста, посмотрите этот fiddle Как сделать фоновые изображения кликабельны (JavaScript или CSS)

Как сделать кликабельным фоновое изображение? Когда нажмете «Take the survey», вы перейдете на новую страницу.

<div style="height:300px;width:300px;border-style:solid;border-width:5px;background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); background-repeat:no-repeat;background-position:right top;"> 

By default, the background-image property repeats an image both horizontally and vertically. 

</div>

Javascript или CSS являются предпочтительными.

Редактировать: я не хочу использовать изображение поплавок в правом углу.

источник

2012-01-10 Anonymous

Почему вы используете это изображение в качестве фона? если было бы более логично обернуть регулярный в элементе . И плавать не нужно, если вы не хотите использовать его – fcalderan

, пожалуйста, дайте пример, чтобы не использовать float. –

Вы не можете зарегистрировать ручку на фоновом изображении. Вам нужно будет что-то вроде этого: [fiddle-fork] (http://jsfiddle.net/EdRSC/) –

Вы не должны.

Что делать, если пользователь отключил стили или использует устройство чтения с экрана? Они также должны иметь возможность провести опрос.

div{position:relative;} 
a {display:block; width:120px; height:120px; 
    position:absolute; 
    top:0; right:0; 
    text-indent:-9999px; 

    background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); 
    background-repeat:no-repeat;background-position:right top;}

Demo

источник

2012-01-10 22:23:12 bookcasey

Проверить здесь для получения дополнительной информации: http://bluedogwebservices.com/css-trick-turning-a-background-image-into-a-clickable-link/

Кроме того, вы могли бы сделать Div родственника, а затем просто положить изображение завернутые с якоря и поместите его абсолютно в правом верхнем углу.

Редактировать

Html

<div class="wrapper"> 
<a href="/"><img src="yoursrc" alt="description"/></a> 
<p>Some other text regularly positioned.</p> 
<div>

CSS:

.wrapper 
{ 
position:relative; 
width:500px; 
height:500px; 
} 

.wrapper a 
{ 
position:absolute; 
top:0px; 
right:0px; 
}

источник

2012-01-10 22:19:01

Можете ли вы привести пример живой скрипки на «вы могли бы сделать div-родственника, а затем просто поместить изображение, завернутое в якорь, и позиционировать его абсолютно в верхнем правом углу» –

, который является умным, но это своего рода взломать. Конечно, это работает :). – farina

см. Редактирование, надеюсь, что это поможет. –

Я мог бы быть неправильно, но я не думаю, что CSS фон может иметь события, связанные с ними. Я лично покрою его прозрачным div или использую реальное изображение, чтобы задействовать события элемента DOM.

мне было бы интересно, если кто-то способ сделать это :)

источник

2012-01-10 22:21:51 farina

это простой пример, используя позицию относительно + абсолютного

http://jsfiddle.net/RZWCS/

вы могли бы также думать абсолютное позиционирование ссылки и использовать это изображение в качестве фона ссылки (текст ссылка может быть такой же, как на изображении, и перемещаться наружу с отрицательными текстовыми или отступными способами)

источник

2012-01-10 22:24:11 fcalderan

Просто превратите div в элемент <a>?

<a href="mysite.com" 
    style="display: block; 
    height:300px; 
    width:300px; 
    border: 5px solid; 
    background: url('http://cdn.survey.io/embed/1.0/right_top_blue.png') right top no-repeat;"> 
<a/>

источник

2012-01-10 22:29:21 adeneo

Как сделать фоновые изображения кликабельны (JavaScript или CSS)

ответ

Смежные вопросы