The Essential Guide to CSS and HTML Web Design

Prev | Current Page 216 | Next

Craig Grannell

"The Essential Guide to CSS and HTML Web Design"

Define the CSS rules. In CSS, define a border style, as per step 7 of the previous
exercise, but also edit the existing paragraph rule with a font property/value pair,
because in this example, you??™re going to add a caption based on the alt text value.
a img {
border: 0;
}
#randomImage {
border: solid 1px #000000;
}
p {
font: 1.2em/1.5em Verdana, sans-serif;
margin-bottom: 1.5em;
}
2. Set up the PHP tag. Change the file name of randomizer.html to randomizer.php
to make it a PHP document. Then, place the following on the page, in the location
where you want the randomized image to go. Subsequent code should be placed
within the PHP tags.
?>
3. Define the array. One array can be used to hold the information for the file names
and alt text. In each case, the alt text should follow its associated image.
$picarray = array("stream" => "A photo of a stream", "river" => "A
?? photo of a river", "road" => "A photo of a road");
$randomkey = array_rand($picarray);
4. Print information to the web page. Add the following lines to write the img and p
elements to the web page, using a random item set from the array for the relevant
attributes. Note that the paragraph content is as per the alt text. Aside from the
caption, the resulting web page looks identical to the JavaScript example.
echo '

?? alt="'.$picarray[$randomkey].'" width="300" height="300"
?? class="addBorder" />';
echo '

'.

Pages:
204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228

Your Electronic Books

Craig Grannell

"The Essential Guide to CSS and HTML Web Design"