Menu
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.
289
You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.
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. -->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
