Altering the Background of an Item PageIf you recall from examples throughout the book, not to mention Hour 9, "Custom Backgrounds and Colors," web page backgrounds are set via the background-color and background-image style properties. For these properties to apply to an entire page, they must be set in the <body> tag. This isn't possible with eBay auction item pages, so you have to resort to some JavaScript trickery to get the desired effect. The JavaScript trick to which I'm referring involves dynamically setting the value of the document.body.background property, which happens to store the background of a page. Following is an example of how to set this property using a single line of JavaScript code: document.body.background = "http://www.yourwebsite.com/background.jpg"; Notice in this sample code that I've provided the full URL for the background.jpg image. This is very important because the auction item page will be hosted on eBay, while the background image will likely be stored somewhere on your web server. Therefore, you must spell out the full address in order for the image to be located. Listing 20.3 contains the code for a modified hockey skates auction page that now includes a dynamically altered background image. Listing 20.3. This Code Dynamically Sets the Background Image Within the <body> Tag
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title></title></head>
<body>
<!-- EBAY HTML CODE STARTS HERE -->
<script type="text/javascript">
<!-- Hide the script from old browsers
// Set the background image
document.body.background =
"http://www.michaelmorrison.com/ebay/missionback.jpg";
// Stop hiding the script -->
</script>
<h2 style="text-align:center; color:white">Mission Amp Fly Men's Ice Hockey
Skates - Size 12</h2>
<div style="color:white">
This size 12 pair of Mission Amp Fly men's ice hockey skates is used but in
very good condition. These suckers have plenty of life in them, not to
mention a few goals and assists. Following are the details of the skate
features, along with a picture. Thanks for bidding!
<ul>
<li>Carbon outsole stiffer, lighter and thinner</li>
<li>Split Throat™ pattern design for improved flexibility and
minimized creasing</li>
<li>Indy Foam® ankle chambers with multiple foam layers provide
superior ankle lock and increased comfort</li>
<li>Interior Material - Clarino™ moisture wicking lining</li>
<li>Sensory™ footbed</li>
<li>Stiffness Rating - 7.3 Surlin™</li>
<li>Leather quarters</li>
<li>Improved Formula™ Bladeholder with DriveShaft technology. Single
allen key bolt system</li>
<li>Laser-cut stainless steel runner from Sweden, with superior grain</li>
</ul>
</div>
<div style="text-align:center; color:white">
<img src="http://www.michaelmorrison.com/ebay/skates1.jpg" alt="Mission Amp
Fly Ice Hockey Skates" style="border:5px solid black" /><br />
<div style="text-align:center; font-size:16pt; font-weight:bold">Side view of
skates, some scuffs but overall good shape.</div>
</div>
<p style="color:white">
To learn more about me, just click <a
href="http://members.ebay.com/aboutme/stalefishlabs/"><img
src="http://pics.ebay.com/aw/pics/aboutme-small.gif" alt="About Me"
style="border-style:none" /></a>.
</p>
<!-- EBAY HTML CODE ENDS HERE -->
</body>
</html>
The key to this code is the <script> tag that appears at the start of the body. Within this tag, the document.body.background property is set to an image that provides a considerable amount of sizzle to the hockey skates page (see Figure 20.6). You may have also caught on that I had to add some CSS style properties to this version of the hockey skates item page so that the text is more visible on top of the dark background. I set all the text on the page to white via the color style property. |