Can someone help me out?
I am trying to change the backgound image of a div (using code based on this).
It worked fine initially, but when I change the button type to image it caused the background image to revert back after a second, or maybe the page is refreshing or something. Any ideas why?
Here's my code:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Change Background</title> <style type="text/css"> #banner { background-image:url(test1.jpg); width:728px; height:339px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; } </style> <script type="text/javascript"> image1 = new Image(); image1.src = "test1.jpg"; image2 = new Image(); image2.src = "test2.jpg"; function ChangeBackground(background) { switch (background) { case 1: document.getElementById('banner').style.backgroundImage = 'URL(test1.jpg)'; break; case 2: document.getElementById('banner').style.backgroundImage = 'URL(test2.jpg)'; break; } } </script> </head> <body> <div id="banner"> I am a div with a background image<br /> If you click one of the buttons, my background will change. </div> <form id="frmTest" name="frmTest" action="" method="get"> <input type="image" src="button1.jpg" id="btnDo1" name="btnDo1" onclick="ChangeBackground(1)" value="Click to change to Background 1" /> <input type="image" src="button2.jpg" id="btnDo2" name="btnDo2" onclick="ChangeBackground(2)" value="Click to change to Background 2" /> </form> </body> </html>
Bookmarks