Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Design the Page
Here are the steps to bring the Florida Keys inline graphic to life:
- Open Dreamweaver and create a new Web page. The page must contain a layer that will hold the random graphic; or you can use a table cell.
- Select the layer or table cell that you want to use for the random graphic
(Figure 1).
Figure 1 Example of a Web page with a blank layer to hold the inline graphics
- In the Dreamweaver document window, switch to the Code or Split view (Figure
2).
Figure 2 Split-screen view gives you access to the design and code of the active Web document.
- Insert an image source statement within the layer or table cell code.
Include a dummy name for the graphic (keys/key.jpg), and then give it a
reference name (florida). See Figure 3.
<div id="keywest" style="position:absolute; left:411px; top:124px; width:400px; height:300px; z-index:1; visibility: visible"><img src="keys/key.jpg" width="400" height="300" name="florida" /> </div>
Figure 3 The modified HTML in Code view
- Create an insertion point directly after the image source statement, but before the closing </div> statement, and insert the following JavaScript code (see Figure 4):
- Complete the design of the Web page by adding any additional desired objects, text, or static images.
- Save the document (File > Save).
)
)
)
<script language="JavaScript1.1"> <!--This JavaScript code creates the math to change the image source. document.florida.src="keys/key"+Math.round(Math.random()*6+.5)+".jpg"; /--> </script>
)
Figure 4 The completed JavaScript in Code view
The completed code for the entire layer will look like this:
<div id="keywest" style="position:absolute; left:411px; top:124px; width:400px; height:300px; z-index:1; visibility: visible"><img src="keys/key.jpg" width="400" height="300" name="florida" /> <script language="JavaScript1.1"> <!--This JavaScript code creates the math to change the image source. document.florida.src="keys/key"+Math.round(Math.random()*6+.5)+".jpg"; //--> </script> </div>