Click here to Skip to main content
14,639,661 members
Rate this:
Please Sign up or sign in to vote.
See more:
So I am using a very weird CMS, which is preventing me from attaching a link to a url.

I cannot tell you the name of the CMS, for unspecified reasons, but that is beyond the point.

I have a background image on the body and I would like to make the background image a clickable link, which would lead to another page.

I need to do this with jQuery alone.

What I have tried:


$('body').click(function()
{
window.open('link');
});
Posted
Updated 22-Oct-19 4:50am
Rate this:
Please Sign up or sign in to vote.

Solution 1

What you need to do is going to be able to figure out how to identify that particular element; and the way to do this is via the jQuery selector.
Your current code selects the entire BODY of the page

If that image has an ID attribute on it, or you could add one; that would be the best way and the selector would be $("#ImageID"). The reason I believe this would be the best way is that in compliant HTML, an ID can only appear once.

If using the ID attribute is not an option, you may want to base your selector on the actual image source attribute.
<img src="smiley.jpg" /> would use $("[src='smiley.jpg']")

Reference:
jQuery Selectors[^]
   
Comments
Ves93 22-Oct-19 7:54am
   
The problem is that the image is added to the background in this way:


body {
background-image: url("redacted img url");
}


So how would I target it in this case???
Rate this:
Please Sign up or sign in to vote.

Solution 3

Hi Ves93

yes This can be done easily.

First set background image to the body tag. after that you need to add a simple jquery code in <script> tag:

<html>
<head>
<style>
        body {
            background-image: url('img.jpg');
        }
 </style>
</head>
<body>
<h1>This is Body</h1>
</body>
</html>

<script>
$(document).ready(function () {
        $("*").click(function () {
            window.open('https://www.google.com/');
        });
    });   
</script>

so as you can see that "*" will select all the content of the entire web page so when you will click anywhere in entire page, you will redirect to your another page. Replace above link by adding your link.

Hope This will help you.
Thank you.
   
Comments
Ves93 22-Oct-19 8:44am
   
Ah, the problem is that the background image is only visible on the sides - left and right - and I wouldn't want people to be redirected to that specific link when they click on something that's NOT the background image.
[no name] 22-Oct-19 9:23am
   
can you please show your code and your page please so can find solution ??
Rate this:
Please Sign up or sign in to vote.

Solution 4

Quote:
the problem is that the background image is only visible on the sides - left and right - and I wouldn't want people to be redirected to that specific link when they click on something that's NOT the background image.

Effectively, you need to intercept the click events on anything inside the body, and stop them from propagating to the body itself. Using jQuery:
$("body").click(function(){ 
    window.open(...); 
});
$("body > *").click(function(e){ 
    e.stopPropagation(); 
});
Demo[^]

NB: You'll need to make sure the body always fills the height of the window, even if the page content is short:
body {
    min-height: 100vh;
}

Also note that the margins between elements can create gaps which will be clickable. If you want to avoid that, you'll need to wrap your non-clickable content in another element.
   
Comments
Ves93 22-Oct-19 11:56am
   
Wow, that's quite some knowledge!

It's beginning to look like an undoable task

Why? I use this very stupid CMS and it causes a tonne of unforeseen complications, stemming from the fact that the elements created with the CMS come with automatically-generated classes; and the rules for these classes aren't visible to me, at least for the most part, because they are "behind the scenes", so to speak.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100