This is the initial placeholder text... |
Step to Step instructions: 1- Create a placeholder HTML "DIV" element First of all we have to create the destination HTML element that will contain our HTML code; the most used HTML tag for this type of operations is named "DIV" (but we can also use TD, SPAN, etc...); we need only to create an empty "DIV" tag and give it an "id" property so we can find it into the page. The code needed is like this: <div id="mydiv"></div> The best way to do this in DHWE is to use a Generic object because we can customize its internal HTML code and we can use $WIDTH and $HEIGHT variables; so by drawing the generic object into the editor we will set the real size of the container DIV tag. So draw an IFRAME generic object and replace its HTML code with this: <div id="mydiv" style="width:$WIDTHpx;height:$HEIGHTpx;"> <table bgcolor="yellow" style="width:100%;height:100%"> <tr height="100%"> <td align="center" valign="middle"> This is the initial placeholder text... </td></tr></table></div> $WIDTH and $HEIGHT will be replaced by DHWE with the size of the drawn object 2- Prepare the Javascript code The javascript code used by this sample has been positioned into the HEAD section of the page (Page Properties / Scripts-Events / Head Code) I made only two javascript very simple functions: updateMyDiv, that will set the HTML content of the div called "mydiv" makeAction, that is called everytime you click over a "Put" link The line "Put Image1 into the PlaceHolder" calls the function "makeAction" passing it the value 1 so "makeAction(1);" The line "Put Image2 into the PlaceHolder" calls the function "makeAction" passing it the value 2 and so on... 3- Customize the HTML code Now we need only to customize the "makeAction" function. The javascript instruction "switch" permits you to choose among many options; the "i" parameter is passed to this function so when we call the "makeAction(1)" the code in red will run; when we call "makeAction(2)" the code in green will run and so on. The "break" statement exits from the switch instruction. function makeAction(i) { var s=""; switch(i) { // some images case 1: s="<img src='images/image1.jpg'></img>"; updateMyDiv(s); break; case 2: s="<img src='images/image2.jpg'></img>"; updateMyDiv(s); break; [...] [...] [...] } } ([...] --> I cutted the function here, this is not a valid instruction; refer to the real function contained in the Header section of this page ;-)) |