This is the first version of a background changer that I came up with. I wanted to let users be able to preview backgrounds on my site. This is how this works:
To create your own, you will need to add this code to your CSS stylesheet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* you can edit virtually ALL of the values to suit your needs */ div#example { width: 90%; height: 150px; margin: 0 auto; border-radius: 20px; border: 3px solid #ededed; padding-top: 20px; text-align: center; background: #eeeeee; text-shadow: 0px 0px 8px #802e8e; text-align: center; font-family: 'Tahoma', sans-serif; font-size: 14px; letter-spacing: -.5px; word-spacing: 2px; text-transform: uppercase; font-weight: bold; color: #000000; } p { text-align: center; } |
Then, you will need to add this bit of JavaScript to the head of your document:
|
1 2 3 4 5 6 7 8 9 |
<script> function bgChange1() { document.getElementById("example").style.backgroundImage = "url('https://angelicas.site/files/graphics/bgs/cupcakes.gif')"; } function bgChange2() { document.getElementById("example").style.backgroundImage = "url('https://angelicas.site/files/graphics/bgs/space.jpg')"; } </script> |
Finally, you use this HTML code to add the effect to your page:
|
1 2 3 4 5 6 |
<div id="example">This is a little example of how the background will look!</div> <p> <a href="#" onclick="bgChange1()"><img src="https://angelicas.site/files/graphics/bgs/cupcakes.gif" width="50px;"></a> <a href="#" onclick="bgChange2()"><img src="https://angelicas.site/files/graphics/bgs/space.jpg" width="50px;"></a> </p> |
Some extra information:
- The HTML onclick=”bgChange#()” correlates with the JavaScript code that calls upon the background
- You must change the value of bgChange# to match with one in the JavaScript