8

I have a background image as part of a body class in CSS:

body.soon1 {
    background-color: white;
    background-image: url(soon1a.png);
    background-position: center;
    background-repeat: no-repeat;
}

Then later on I have a javascript function that will change the body class.

The reason I have the image in the background is that when the script activates, the background-color and the background-image will both change at exactly the same time and you can't select the image.

Is it possible that I could change the cursor type only while hovering over the background-image? I understand I can put

cursor: pointer;

in the body styles, but this makes the cursor appear over the entire page.

You can view the live page, currently, where the background changes when you click anywhere on the page.

Edit: I've got something that works for me now. I added a centered div with nothing in it:

div.clickme {
    width:300px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-150px 0 0 -200px;
    cursor: pointer;
}

This works for me because I can set my own arbitrary area, but if anybody has a better solution, let me know.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
paramesis
  • 183
  • 1
  • 1
  • 5
  • Why not just put the background image on a div, centered on the page. Then you can add cursor on the div. – Leeish Feb 12 '13 at 22:12
  • I have something like that, but with tables [here](http://www.paramesis.com/index3.html) The problem with that is you can select the image and if you click fast enough, you can see the mask of the image, neither of which look very good. That's more important to me than the cursor, I just wanted to see if I could have both. Thanks, though – paramesis Feb 12 '13 at 22:57

4 Answers4

5

There's really no compelling reason to make the image a background image. You would be better served by putting the image in two wrappers (required to guarantee absolute centering vertically and horizontally regardless of viewport).

You could extend your array by populating it with objects, so that it can hold possible values for the image and the body style. This way, you can use the same method (cycle through the array) to pick out all of the changes you want, even if you wanted to add other changes later.

Also, while web browsers are rather lenient with standards, it really is trivial to conform to the simple HTML 5 requirements and still keep the functionality.

Lastly, I strongly encourage you to avoid what I call "hipster coding". While it's fun to name functions, variables, et al with obscure names to delight the few that check the source code, it makes for needlessly obtuse language and lower maintainability. In short, it's a bad practice, even if you are the only maintainer.

Observe a new version of your source based on these comments (with indentation cleanup) below.

<html>
<head>
    <title>Something Amazing Will Happen</title>
    <style type="text/css">
        body.light {
            background-color: white;
        }
        body.dark {
            background-color: black;
        }
        div.outside-wrapper {
            position: absolute;
            top: 50%;
            width: 100%;
            height: 1px;
            overflow: visible;
        }
        div.inside-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 381px;
            height: 393px;
            margin: -197px 0 0 -191px;
            cursor: pointer;
        }
     </style>
     <script type="text/javascript">
         styleIndex = 0;
         var states = [{style: "light", image: "soon1a.png"}, {style: "dark", image: "soon2a.png"}];
         function nextStyle() {
             if (++styleIndex >= states.length)
                 styleIndex = 0;
             var state = states[styleIndex]; 
             document.body.className = state.style;
             document.getElementById("clickme").src = state.image;
         }
         var tap = true;
         document.addEventListener('touchstart',function(e) {
             tap = true;
         });
         document.addEventListener('click',function(e) {
             nextStyle()
             tap = false;
         });
         document.addEventListener('touchmove',function(e) {
             tap = false;
         });
         document.addEventListener('touchend',function(e) {
             if(tap)
                 nextStyle();
         });
    </script>
</head>
<body class="light">
    <div class="outside-wrapper">
        <div class="inside-wrapper">
        <img src="soon1a.png" id="clickme">
        </div>
    </div>
</body>
</html>
<!-- Don't ask me what it is. -->
Tohuw
  • 3,630
  • 5
  • 22
  • 24
  • For posterity, I've posted the original (current) source to pastebin so my commentary makes more sense should the live page change: http://pastebin.ca/2314337 – Tohuw Feb 16 '13 at 04:46
  • The issue I have with this method is that the background color and image don't change at exactly the same time, so that you see the outline of the png for that fraction of a second. As I mentioned in another comment, this is much more important to me than the cursor. It becomes even more noticeable when the second image hasn't loaded yet, which is why there's an invisible image style pre-loading that second image. – paramesis Feb 19 '13 at 03:35
  • Also, I would prefer if it were not possible to select the image by clicking and dragging. If there's a way to prevent this and to freeze the page so that graphics changes appear at exactly the same time, I would gladly keep the image out of the background if my method causes viewport issues. In my limited scope of understanding, having it in the background conveniently solves both problems. Additionally, the invisible divs method lets me set an arbitrary area. I do like the more efficient array that keeps everything bundled together, especially as I plan to add more images. – paramesis Feb 19 '13 at 03:47
0

Try this

body.soon1 {
    background-color: white;
    background-image: url(soon1a.png);
    background-position: center;
    background-repeat: no-repeat;
}
body.soon1:active{
    cursor: pointer;
}
Idrizi.A
  • 9,819
  • 11
  • 47
  • 88
  • I added that to the html. Doesn't seem to work. I also tried body.soon1.background-image:active and body.soon1:hover. no luck – paramesis Feb 12 '13 at 22:50
0

What you can do is, put the cursor: pointer on body and change the cursor on the childs. Do somthing like this: http://jsfiddle.net/HSdH3/

html:

<body>
    <div></div>
</body>

css:

body {
    background: red;
    width:100%;
    height: 100%;
}
body:hover {
    cursor: pointer;
}
div {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background: white;
}
div:hover {
    cursor: auto;
}
Chanckjh
  • 2,587
  • 2
  • 22
  • 28
  • 1
    Hmm. That's actually the exact opposite of what I was trying to do, but it's good to know you can do that. Thanks! – paramesis Feb 13 '13 at 00:23
0

Something like this should work:

<div id="myDiv" style="cursor: pointer">

Another option is to use jQuery, although it may be overkill for this. Regardless, here's what it would look like:

$(document).ready(function(){
    $("#myDiv").hover(function() {
        $(this).css('cursor', 'pointer');
    });
});

Check it out here: http://jsfiddle.net/K5fex/

gvirav
  • 1