Onmouseover="document.getElementById('PopUp').style.display = 'none' " In this case we identify the DIV element by its ID 'PopUp' and change its style display property to 'none' so that it becomes invisible. 'I can\'t have quotes within quotes.').įinally, we used a bit of JavaScript in the DIV definition to make it disappear automatically whenever the mouse touches it. Later, we will be able to change the contents of the SPAN using a line of JavaScript, just as we can change the contents of a textbox or other object.ĭocument.getElementById('PopUpText').innerHTML = "Here is the new text that will appear in place of the word TEXT in our SPAN" ĭon't forget that in any text, you may need to use an escape character to include quotes within quotes: \' or \" (e.g. ![]() When we created the DIV, the SPAN contained the word "TEXT". We refer to the SPAN by name or ID this SPAN is called 'PopUpText'. It just allows us to easily apply and change properties of whatever is within the SPAN. In order to change the contents of the DIV for appropriate feedback for each answer, we need a named element that our JavaScript code can refer to. We can later make changes to the DIV properties by referring to the DIV by name or ID this DIV is called 'PopUp'. In our example, the width of the DIV is 135 pixels (135px), but the height will automatically adjust to whatever it contains. Note that the various properties in the DIV style are all between quotation marks, single or double. STYLE='display:block ' or STYLE='display:none ' can make the DIV appear and disappear. These include display, left, top, border, background-color, font-size, width, and others. The characteristics or properties of the DIV are controlled by its STYLE. ![]() You can copy and paste this DIV into the BODY (not the HEAD) of your web page in CODE view. This DIV is designed to automatically disappear when the user mouses over it (preventing a student from copying and pasting an answer from the popup box). It includes a SPAN called PopUpText that will receive the contents that will be shown in the PopUp box. This is the code for a DIV named PopUp that is a box which can appear and disappear. Question 2: What is the color of Henri V's white horse? Question 1: Who is buried in Grant's tomb? Second, you need a script function to make the DIV appear & disappear and change it's contents and location.Ĭlick on the button to answer the questions. First, you must create the DIV on your page (it can be invisible to start). There are two steps to using a DIV as a popup box. Using a DIV as a popup window to provide feedback within the same web page can be more elegant than putting that feedback in a separate popup window or in a textbox. You can create a single DIV on a page and use this same DIV as a popup box appearing where needed and changing its contents each time it appears. It can be made to appear and disappear, change size, and move to a new location on the fly. ![]() It can have a particular location, size, border, and color. A DIV can be referred to by it's name or ID. Think of a DIV as a rectangle that can appear on a web page, be positioned where you wish, and hover over other content on the page. A DIV is a very powerful HTML object that can be used for many purposes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |