jquery - How to make background images clickable (javascript or css) - Stack Overflow

admin管理员组

文章数量:1321440

Please take a look this fiddle

How to make the background image clickable? When click "Take the survey" will go to a new page.

<div style="height:300px;width:300px;border-style:solid;border-width:5px;background-image:url('.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 or CSS are all preferred.

Edit: I don't want to use image float to right corner.

Please take a look this fiddle

How to make the background image clickable? When click "Take the survey" will go to a new page.

<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 or CSS are all preferred.

Edit: I don't want to use image float to right corner.

• javascript
• jquery
• css
• background-image
• clickable

Share Improve this question Follow asked Jan 10, 2012 at 22:15 user503853user503853 4

• why do you use that image as a background? if would be more logical wrap a regular <img> in a <a> element. And float is not necessary if you don't want use it – Fabrizio Calderan Commented Jan 10, 2012 at 22:19
• please give a example on not using float. – user503853 Commented Jan 10, 2012 at 22:22
• You cant register a handle to a background image. You'll have to go with something like this: fiddle-fork – Sindri Guðmundsson Commented Jan 10, 2012 at 22:23
• @sophia take a look at my answer below. – Fabrizio Calderan Commented Jan 10, 2012 at 22:24

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You shouldn't.

What if a user has styles turned off, or is using a screen reader? They should be able to take the survey as well.

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

that's a simple example using position relative + absolute

http://jsfiddle/RZWCS/

you could also think to absolute positioning the link and use that image as link background (the text of the link could be the same appearing on the image and moved outside with negative text-indent or similar techniques)

Check here for more info: http://bluedogwebservices./css-trick-turning-a-background-image-into-a-clickable-link/

Also, you could make the div relative, then just put image wrapped with anchor and position it absolutely in top right corner.

Edit

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;
}

I could be wrong here, but I don't think that CSS backgrounds can have events bound to them. I would personally cover it with a transparent div, or use a real image to tap into the events of the DOM element.

I would be interested if someone had a way to do this :)

Just turn the div into an <a> element?

<a href="mysite." 
    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/>

本文标签： jqueryHow to make background images clickable (javascript or css)Stack Overflow