Generally about dhtml.
Dynamic html is usually shortened to dhtml, the new way to make your website more interactive in real time ie dynamic. It is definitely not a new version of the markup language html :). Ordinary html pages are static, when the page is loaded you can look at it but as soon as something happens, the page must be reloaded in your browser, a call to the web server must be made. What distinguishes dhtml is the fact that the page does not need to be reloaded every time something interactive happens on the page – it happens in the present (real time).
What is a bit sad for a website builder is the fact that NS (Netscape) and MSIE (Internet Explorer) do not look the same way when it comes to dhtml and uses partially different techniques. So what works well in MSIE may not even be visible in NS, so don’t build the entire page with dhtml but make sure it works for every other oxo. Therefore, it is very important that you check the page in both browsers when making your page.
Since this is a beginner’s guide, I will not go as far into the use and coding of dhtml. As a beginner, there is so much else to think about to get a website at all, so starting experimenting with dhtml may not be the first thing to do. But many have asked for this particular section on dynamic html so I think a little briefly explain what it is and how to apply it to its website, most simple and easy to understand examples of course. But under the section Read more! you can get tips on where to read more about this.
What is dhtml?
Dhtml is a blend of html, style sheets (CSS), object model (see section below) and one or more variants of scripting languages. It can be anything from such a simple thing that the text changes color as you move your mouse over it to advanced games. Try moving your mouse over the word dynamically! The text turns red in MSIE when you move the cursor over the word and returns to black when you remove the cursor from the word, the code for this is:
<span onMouseOver=”this.style.color=’red'” onMouseOut=”this.style.color=’black'”>dynamiskt!</span>
Since the span in the example above has no ID, it is this.style.colorused to tell that something is going to happen here. Had the span tag received an ID encoded, it would have been possible to address directly through its ID both in the tag and from outside scripts. Move the cursor over the word dynamic! In MSIE, the word turns green.
<span id=”demo” onMouseOver=”demo.style.color=’green'” onMouseOut=”demo.style.color=’black'”>dynamiskt!</span>
It will be clearer when you look at the examples below what the scope id has in dhtml.
Object Model
Object Model is a straight translation of English Document Object Model (DOM). The use of the object model differs in NS and MSIE respectively. Netscape and Exporer have developed their own object model, however there is a recommendation at http://www.w3.org/ . Here you can read about NS documentation , and how it differs in Netscape 6. * . Of course, MSIE has solid documentation.
An object model is what describes the order (hierarchy) of elements in an html document, one can see it as a tree branching out. This is useful, for example, when you want to * reach * / call an element / layer on the page and perform something when you might hover over that element or click on a link. An important part of dhtml is precisely the id attribute that creates an object of an html element and is then used when you want to * reach * it for something to happen to that particular element. Difficult? Well, it’s not _very_ simple. You will understand a little more when you look at the examples under each section below.
Taking
NS into account uses – document.layers in its object model and MSIE – document.all. The best way to determine which browser is used is to customize the script for both NS and MSIE, in case it works so – most examples here are based on that principle. Another variant is to redirect NS and MSIE to each page, may be good as they interpret dynamic html slightly different or not at all in some cases. You can see how to do this easily here!
Working with different layers
You can divide the page into layers or I prefer to call it layers, this happens regardless of other content on the website if you position withposition: absolute. This means that it is possible to put elements seemingly on top of each other. Another point is that after loading the page you can change the placement of the content via, for example, scripts. Which is a big difference against old static html pages that are loaded and then nothing more happens until a new html page is loaded and / or, for example, via a cgi script, the server is called to perform something.
A layer is a “part” of a web page that is treated as a completely independent entity, the layer can be viewed, hidden and / or moved. Here, Netscape and Microsoft are different, not entirely unexpected :-). Netscape uses the layer tag to create a layer.
<layer top=0 left=0>denna text ligger i ett lager positionerat till vänstra övre hörnet via top och left</layer>
Now the layer has been placed on the web page via the coordinates given in the top and left – the starting point is 0.0 which means at the top left corner of the page. Read more about NS and the tag layer! You can of course have several layers on the page, look here for an example of layer and how NS interprets this and if you have MSIE you will see that it does not work at all :).
But the best way is to use a div tag and thus avoid too much double-coding pure html in terms of it works in both NS and MSIE. You still do not have to distinguish between the different object models in script.
<div id=”lager” style=”position: absolute; top: 10px; left: 50px; width: 150px”>
<img src=”bild.gif” width=32 height=50 alt=”alternativtext”>
</div>
Visible , invisible
An element / layer can be made visible or invisible via dynamic html. For example, an image may be invisible when loading the page and later be made visible via a script. You specify in the div tagvisibility: hiddenfor invisible and
visibility: visiblefor visible.
<div id=”pos” style=” visibility: hidden; position: absolute; top: 10px; left: 50px”>
<img src=”bild.gif” width=32 height=50 alt=”Kevin”>
</div>
If you place the image within a layer tag applies visibility=hideto the hidden and visibility=showto make the image visible.
<layer visibility=hide><img src=”bild.gif” width=65 height=71 alt=”alternativtext”></layer>
When using a script to * reach * the element / layer to make changes, you write differently depending on which object model you are turning to. In NS (id equals div tag id)
document.id.visibility = “show”
to make it visible and
document.id.visibility = “hide”
to make it invisible. In MSIE you write
id.style.visibility = “visible”
to make it visible and
id.style.visibility = “hidden”
to make it invisible. Here you can see an example of an image that disappears when you click it. Here you can see an example of how an invisible image is elicited.
Position cation
in a standard HTML page, the various elements in the order encoded and each one has its location / width / height of the page. Much in dhtml is based on positioning elements / layers, that is, where they should be on the page when it is loaded and that it should be able to change its positions dynamically via script. What happens in the example above is that the image is placed 10 pixels from the top edge and 50 pixels from the left edge and indicates that it should be positioned according to the exact coordinates given and relative to the body element, ie from the upper left the corner much like the card is placed :). In the nested layers, the upper-left corner of the parent layer is counted, but it is a bit overpriced but there is an example below.
<img src=”bild.gif” width=32 height=50 alt=”Kevin” style=”position: absolute; top: 10px; left: 50px”>
position: absolute
However, this does not work in Netscape to put the positioning instructions directly into the element and therefore it is better to use a div tag that encloses the element you want to position. Click here to see an example.
<div id=”pos” style=”position: absolute; top: 10px; left: 50px”>
<img src=”bild.gif” width=32 height=50 alt=”Kevin”>
</div>
The benefit of giving the div tag an ID can be seen in the example below and above all you have the benefit if you later manipulate the div tag via script.
<style type=”text/css”>
<!–
#pos { position: absolute; top: 250; left: 300 }
–>
</style>
Above, position the div tag in an embedded style sheet template and place the positioning instructions there. Note the # sign in front of pos, which is in the example div tag id.
<div id=”pos”>
<img src=”bild.jpg” width=32 height=50 alt=”Kevin”>
</div>
Friend of order might wonder the difference between position: absolute and position: relative? If we take an example of the opposite position: relative, it might clear. Here is the plain text, here is the text 3 pt (dots) below and here it is plain again. Magic? No not at all.
<span style=”position: relative; top: +3pt”>här är texten 3 pt (punkter) nedanför</span> och här är den vanlig igen.
The difference is that position: relative follows the other side, it would have been position: absolutely instead, the text within the span tag had been at the top of the page. There is an example below (nested layers) that you can look at a little more what happens. In the example above you saw that it is of course possible to position in anything other than px (pixels), but nothing is stated but only a number is written, it is assumed that it is px that applies.
When it comes to positioning elements / layers, apart from the x and y axes, there is a third * dimension * – the z axis which is the one that determines how the elements * lie * on each other (backwards and forwards), ie in the order in which they are displayed. if several are placed on each other. An example, z-index: 3(the higher the value the closer to the viewer) and the benefit of this can be to avoid that if you have many elements that they are inadvertently placed on each other by giving them different different z-indexes and controlling the order of the layers if they overlap / lie on each other.
What benefit do I have from all this? Besides being able to precisely determine the positioning of an element / layer? Here are some examples! With the help of positioning and javascript you can get a picture moving around the page, you can see it here! You can of course add more than just one image as in the example above. Look in here you will see! You can also nest layers, look here you can see an example and on the same page describe how clip: rectworks to make a * peep hole * in a layer.
HTML exchange
HTML exchange means that it is possible to change text and images * on the fly * – only works in MSIE. The whole thing is that an object is created by the attribute id = in an element and then it is replaced by, for example, an event. There are four properties that can be used, the ones I will describe are innerHTML and innerText.
Source: Visit AbbreviationFinder for DHTML which means Dynamic Hyper Text Markup Language.