4 Replies - 1872 Views - Last Post: 15 March 2012 - 06:13 PM

#1 huw1990  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 02-March 12

Change Page Background Image When Hovering Over a Button

Posted 12 March 2012 - 02:42 PM

Hi,

I am creating a webpage using HTML, CSS and a very small amount of PHP. Does anyone know any way of changing the background image of a whole page when hovering over a button? I've posted this in the general web development forum because the research I've done so far and what I already know about HTML and CSS tells me that this isn't possible just using HTML and CSS, but other than that I've got no idea how to do it. I've got a very basic understanding of Javascript if there's a way to do it using that, but I'd appreciate a bit of help to start it off :)

Thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: Change Page Background Image When Hovering Over a Button

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Change Page Background Image When Hovering Over a Button

Posted 12 March 2012 - 03:42 PM

Hey.

You'd need a bit of Javascript for this. Basically you need to capture the mouseover and mouseout events of your button, and when those are fired, change the background style of the body element.

First, you'd want to use the window's load event to execute your code. The simplest version of that looks like this:
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<meta charset="UTF-8"/>
	<script>
	window.onload = function() {
		// Put your code here.
	}
	</script>
</head>
<body>
	<!-- Put your HTML here -->
</body>
</html>


Any Javascript code put where the //Put your code here comment is will be executed when the page is finished loading.

To allow your Javascript code to easily find your button, you should put an ID on it. Then you can use document.getElementById to find it in your code.
<button id="theButton">Button to hover over</button>


var buttonElem = document.getElementById("theButton");



From there you can use the buttonElem variable to set the mouseove and mouseout events using the onmouseover and onmouseout properties. (There are better ways, but these are simpler.)
buttonElem.onmouseover = function() {
    // Code to execute when mouse hovers over button.
}

buttonEleme.onmouseout = function() {
    // Code to execute when mouse leaves button.
}



Finally, in those events you want to set the background style for the body element. Each of the CSS styles applied to an element can be found, and changed, using the style property of the element. The body element can be accessed via the document.body property. Which means you can do:
document.body.style.background = 'url("theImage.jpg") repeat';


Was This Post Helpful? 1
  • +
  • -

#3 huw1990  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 02-March 12

Re: Change Page Background Image When Hovering Over a Button

Posted 12 March 2012 - 04:25 PM

View PostAtli, on 12 March 2012 - 03:42 PM, said:

Hey.

You'd need a bit of Javascript for this. Basically you need to capture the mouseover and mouseout events of your button, and when those are fired, change the background style of the body element.

First, you'd want to use the window's load event to execute your code. The simplest version of that looks like this:
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<meta charset="UTF-8"/>
	<script>
	window.onload = function() {
		// Put your code here.
	}
	</script>
</head>
<body>
	<!-- Put your HTML here -->
</body>
</html>


Any Javascript code put where the //Put your code here comment is will be executed when the page is finished loading.

To allow your Javascript code to easily find your button, you should put an ID on it. Then you can use document.getElementById to find it in your code.
<button id="theButton">Button to hover over</button>


var buttonElem = document.getElementById("theButton");



From there you can use the buttonElem variable to set the mouseove and mouseout events using the onmouseover and onmouseout properties. (There are better ways, but these are simpler.)
buttonElem.onmouseover = function() {
    // Code to execute when mouse hovers over button.
}

buttonEleme.onmouseout = function() {
    // Code to execute when mouse leaves button.
}



Finally, in those events you want to set the background style for the body element. Each of the CSS styles applied to an element can be found, and changed, using the style property of the element. The body element can be accessed via the document.body property. Which means you can do:
document.body.style.background = 'url("theImage.jpg") repeat';



That's great, thanks! When I tried searching online the only possible way mentioned was using jQuery, but this looks a lot easier and works a treat!
Was This Post Helpful? 0
  • +
  • -

#4 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Re: Change Page Background Image When Hovering Over a Button

Posted 15 March 2012 - 06:11 PM

You think pure Javascript looks easier than jQuery? Interesting.. jQuery is extremely simple in comparison, though I suppose this is a short example.
Was This Post Helpful? 0
  • +
  • -

#5 tpowell  Icon User is offline

  • New D.I.C Head

Reputation: -11
  • View blog
  • Posts: 21
  • Joined: 05-March 12

Re: Change Page Background Image When Hovering Over a Button

Posted 15 March 2012 - 06:13 PM

I know both javascripts and query, and I do agree that query is much more simple... however javascript can have more customization for the more "finicky" web developer.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1