JavaScript is a widely-used scripting language which can add interactivity to web pages. As users interact with elements on the page via the mouse or keyboard, JavaScript functions can be triggered to perform a wide variety of operations. Dreamweaver’s Set Text of Container JavaScript behaviour is used to replace the contents of an HTML element such as a DIV, SPAN or table cell. A classic use of this behavior is to have content which appears when the mouse hovers over a given item and then disappears again when the mouse leaves the object.
The container which will have its contents changed needs to be given an ID which will be used in the JavaScript to identify it. In Dreamweaver, a good way of selecting elements is to click on the appropriate part of the page, then in the tag selector (the area in the bottom left of the document window), click on the tag of the container to highlight it and then enter an ID in the Properties panel. The element that you choose will determine what can be placed in the container. If a DIV tag is being used, then you can put pretty much anything; if an H1 tag is used, then only text can be used and so forth.
You may also find it useful to create the content before using the behavior then select the content, switch to Code view and cut or copy it to the clipboard.
To use the Set Text of Content behavior, as is always the case with Dreamweaver behaviors, you begin by selecting the element which will trigger the JavaScript. This could be a hyperlink, an image or an image map hotspot. Next, locate the Behaviors panel (Windows – Behaviors) and choose Set Text then Set Text of Container from the panel menu.
At the top of the dialogue box which appears, begin by choosing the element which will be used as the container from the drop-down menu. This is where giving the element an ID becomes useful, since elements without IDs are simply shown as “unidentified”. Finally, enter your text or code in the box marked “New HTML” or simply paste the code previously copied in Code view.
Experienced JavaScript developers may be interested to know that you can embed JavaScript function calls, variables and other expressions within the code simply by placing them within curly braces. For example “{strUserName}” would evaluate to the current contents of a global JavaScript called “strUserName” defined somewhere on the current page.
Learn more about Dreamweaver JavaScript behaviors on our tutor-led Dreamweaver training courses in London.