How to link something when using background-image:urlHow to horizontally center a <div>?Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?How to make div not larger than its contents?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?How to make a div 100% height of the browser window?How to create an HTML button that acts like a link?How to disable resizable property of textarea?How do I vertically center text with CSS?
Is it possible to create a QR code using text?
Why is the sentence "Das ist eine Nase" correct?
Pact of Blade Warlock with Dancing Blade
What does the same-ish mean?
Why do I get negative height?
What is the most common color to indicate the input-field is disabled?
How dangerous is XSS
What is a Samsaran Word™?
Why didn't Boeing produce its own regional jet?
Is this draw by repetition?
Is it a bad idea to plug the other end of ESD strap to wall ground?
Forgetting the musical notes while performing in concert
In Bayesian inference, why are some terms dropped from the posterior predictive?
Notepad++ delete until colon for every line with replace all
Could the museum Saturn V's be refitted for one more flight?
What reasons are there for a Capitalist to oppose a 100% inheritance tax?
Were days ever written as ordinal numbers when writing day-month-year?
Does the Idaho Potato Commission associate potato skins with healthy eating?
Why was Sir Cadogan fired?
What's the meaning of "Sollensaussagen"?
Send out email when Apex Queueable fails and test it
How seriously should I take size and weight limits of hand luggage?
Does Dispel Magic work on Tiny Hut?
Do Iron Man suits sport waste management systems?
How to link something when using background-image:url
How to horizontally center a <div>?Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?How to make div not larger than its contents?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?How to make a div 100% height of the browser window?How to create an HTML button that acts like a link?How to disable resizable property of textarea?How do I vertically center text with CSS?
Okay, so I want to link another html webpage. Like let's a user clicks on one of the images in the slider and it opens items.html. Is there a way to do this with HTML and CSS?
Html:
<div class="slider">
</div>
</body>
</html>
Css:
.slider
background-position: center;
margin: 0 auto;
width: 1200px;
height:500px;
border:0px;
overflow:hidden;
background-repeat: no-repeat;
animation:one 30s infinite;
position:relative;
background-size:1200px 500px;
transition:2s ease;
transition-delay:2s;
@keyframes one
0%background-image:url("Images/Image.png");
20%background-image:url("Images/image2.png");
40%background-image:url("Images/Image.png");
60%background-image:url("Images/image2.png");
80%background-image:url("Images/Image.png");
100%background-image:url("Images/image2.png");
html css
asked Mar 21 at 20:32
Nathan De LimaNathan De Lima
125
add a comment |
Okay, so I want to link another html webpage. Like let's a user clicks on one of the images in the slider and it opens items.html. Is there a way to do this with HTML and CSS?
Html:
<div class="slider">
</div>
</body>
</html>
Css:
.slider
background-position: center;
margin: 0 auto;
width: 1200px;
height:500px;
border:0px;
overflow:hidden;
background-repeat: no-repeat;
animation:one 30s infinite;
position:relative;
background-size:1200px 500px;
transition:2s ease;
transition-delay:2s;
@keyframes one
0%background-image:url("Images/Image.png");
20%background-image:url("Images/image2.png");
40%background-image:url("Images/Image.png");
60%background-image:url("Images/image2.png");
80%background-image:url("Images/Image.png");
100%background-image:url("Images/image2.png");
html css
asked Mar 21 at 20:32
Nathan De LimaNathan De Lima
125
1
Can't you just wrap the.slidercontent inside an anchor tag and set itshrefattribute to the page you need?
– IvanS95
Mar 21 at 20:45
add a comment |
Okay, so I want to link another html webpage. Like let's a user clicks on one of the images in the slider and it opens items.html. Is there a way to do this with HTML and CSS?
Html:
<div class="slider">
</div>
</body>
</html>
Css:
.slider
background-position: center;
margin: 0 auto;
width: 1200px;
height:500px;
border:0px;
overflow:hidden;
background-repeat: no-repeat;
animation:one 30s infinite;
position:relative;
background-size:1200px 500px;
transition:2s ease;
transition-delay:2s;
@keyframes one
0%background-image:url("Images/Image.png");
20%background-image:url("Images/image2.png");
40%background-image:url("Images/Image.png");
60%background-image:url("Images/image2.png");
80%background-image:url("Images/Image.png");
100%background-image:url("Images/image2.png");
html css
asked Mar 21 at 20:32
Nathan De LimaNathan De Lima
125
Okay, so I want to link another html webpage. Like let's a user clicks on one of the images in the slider and it opens items.html. Is there a way to do this with HTML and CSS?
Html:
<div class="slider">
</div>
</body>
</html>
Css:
.slider
background-position: center;
margin: 0 auto;
width: 1200px;
height:500px;
border:0px;
overflow:hidden;
background-repeat: no-repeat;
animation:one 30s infinite;
position:relative;
background-size:1200px 500px;
transition:2s ease;
transition-delay:2s;
@keyframes one
0%background-image:url("Images/Image.png");
20%background-image:url("Images/image2.png");
40%background-image:url("Images/Image.png");
60%background-image:url("Images/image2.png");
80%background-image:url("Images/Image.png");
100%background-image:url("Images/image2.png");
html css
html css
asked Mar 21 at 20:32
Nathan De LimaNathan De Lima
125
asked Mar 21 at 20:32
Nathan De LimaNathan De Lima
125
asked Mar 21 at 20:32
Nathan De LimaNathan De Lima
125
asked Mar 21 at 20:32
Nathan De LimaNathan De Lima
125
asked Mar 21 at 20:32
Nathan De LimaNathan De Lima
125
125
1
Can't you just wrap the.slidercontent inside an anchor tag and set itshrefattribute to the page you need?
– IvanS95
Mar 21 at 20:45
add a comment |
1
Can't you just wrap the.slidercontent inside an anchor tag and set itshrefattribute to the page you need?
– IvanS95
Mar 21 at 20:45
1
1
Can't you just wrap the
.slider content inside an anchor tag and set its href attribute to the page you need?– IvanS95
Mar 21 at 20:45
Can't you just wrap the
.slider content inside an anchor tag and set its href attribute to the page you need?– IvanS95
Mar 21 at 20:45
add a comment |
1 Answer
1
active
oldest
votes
If you want it to be just one URL, then yes: just add an onclick="window.location.href='new_url_here'" to the DIV tag. If you want it to change where it goes to based on the image displayed, you'll need some more JavaScript. So for instance, you could have onclick="performLink(this)" and then this JS function:
function performLink(element)
let url;
switch (element.style.backgroundImage)
case "Images/Image.png":
url = 'http://some.url.com/first_url';
break;
// insert other cases here
window.location.href = url;
You could always do some more sophisticated things with it, like validate that a URL has been set (i.e. the background image was one of the ones you checked for), or use a map to look up the URLs from the image paths instead of a swtich statement, but that's the most basic idea.
answered Mar 21 at 20:41
IceMetalPunkIceMetalPunk
989716
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55288817%2fhow-to-link-something-when-using-background-imageurl%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you want it to be just one URL, then yes: just add an onclick="window.location.href='new_url_here'" to the DIV tag. If you want it to change where it goes to based on the image displayed, you'll need some more JavaScript. So for instance, you could have onclick="performLink(this)" and then this JS function:
function performLink(element)
let url;
switch (element.style.backgroundImage)
case "Images/Image.png":
url = 'http://some.url.com/first_url';
break;
// insert other cases here
window.location.href = url;
You could always do some more sophisticated things with it, like validate that a URL has been set (i.e. the background image was one of the ones you checked for), or use a map to look up the URLs from the image paths instead of a swtich statement, but that's the most basic idea.
answered Mar 21 at 20:41
IceMetalPunkIceMetalPunk
989716
add a comment |
If you want it to be just one URL, then yes: just add an onclick="window.location.href='new_url_here'" to the DIV tag. If you want it to change where it goes to based on the image displayed, you'll need some more JavaScript. So for instance, you could have onclick="performLink(this)" and then this JS function:
function performLink(element)
let url;
switch (element.style.backgroundImage)
case "Images/Image.png":
url = 'http://some.url.com/first_url';
break;
// insert other cases here
window.location.href = url;
You could always do some more sophisticated things with it, like validate that a URL has been set (i.e. the background image was one of the ones you checked for), or use a map to look up the URLs from the image paths instead of a swtich statement, but that's the most basic idea.
answered Mar 21 at 20:41
IceMetalPunkIceMetalPunk
989716
add a comment |
If you want it to be just one URL, then yes: just add an onclick="window.location.href='new_url_here'" to the DIV tag. If you want it to change where it goes to based on the image displayed, you'll need some more JavaScript. So for instance, you could have onclick="performLink(this)" and then this JS function:
function performLink(element)
let url;
switch (element.style.backgroundImage)
case "Images/Image.png":
url = 'http://some.url.com/first_url';
break;
// insert other cases here
window.location.href = url;
You could always do some more sophisticated things with it, like validate that a URL has been set (i.e. the background image was one of the ones you checked for), or use a map to look up the URLs from the image paths instead of a swtich statement, but that's the most basic idea.
answered Mar 21 at 20:41
IceMetalPunkIceMetalPunk
989716
If you want it to be just one URL, then yes: just add an onclick="window.location.href='new_url_here'" to the DIV tag. If you want it to change where it goes to based on the image displayed, you'll need some more JavaScript. So for instance, you could have onclick="performLink(this)" and then this JS function:
function performLink(element)
let url;
switch (element.style.backgroundImage)
case "Images/Image.png":
url = 'http://some.url.com/first_url';
break;
// insert other cases here
window.location.href = url;
You could always do some more sophisticated things with it, like validate that a URL has been set (i.e. the background image was one of the ones you checked for), or use a map to look up the URLs from the image paths instead of a swtich statement, but that's the most basic idea.
answered Mar 21 at 20:41
IceMetalPunkIceMetalPunk
989716
answered Mar 21 at 20:41
IceMetalPunkIceMetalPunk
989716
answered Mar 21 at 20:41
IceMetalPunkIceMetalPunk
989716
answered Mar 21 at 20:41
IceMetalPunkIceMetalPunk
989716
989716
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55288817%2fhow-to-link-something-when-using-background-imageurl%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Can't you just wrap the
.slidercontent inside an anchor tag and set itshrefattribute to the page you need?– IvanS95
Mar 21 at 20:45