Styjun

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?

0

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

share|improve this question

asked Mar 21 at 20:32

Nathan De LimaNathan De Lima

125

• 
  
  
  

  
  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
  

  
  
  
  

add a comment | 

0

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

share|improve this question

asked Mar 21 at 20:32

Nathan De LimaNathan De Lima

125

• 
  
  
  

  
  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
  

  
  
  
  

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

share|improve this question

asked Mar 21 at 20:32

Nathan De LimaNathan De Lima

125

 .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");
 

share|improve this question

asked Mar 21 at 20:32

Nathan De LimaNathan De Lima

125

share|improve this question

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

1 Answer
1

active

oldest

votes

0

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.

share|improve this answer

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



);

draft saved

draft discarded

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

Name

Email

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

Name

Email

Required, but never shown

0

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.

share|improve this answer

answered Mar 21 at 20:41

IceMetalPunkIceMetalPunk

989716

add a comment | 

0

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.

share|improve this answer

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.

share|improve this answer

answered Mar 21 at 20:41

IceMetalPunkIceMetalPunk

989716

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;

share|improve this answer

answered Mar 21 at 20:41

IceMetalPunkIceMetalPunk

989716

answered Mar 21 at 20:41

IceMetalPunkIceMetalPunk

989716

answered Mar 21 at 20:41

IceMetalPunkIceMetalPunk

989716