Kompx.com or Compmiscellanea.com

VBScript rollover. Image swap

Windows : Internet Explorer 4.0+.

VBScript rollover, using image swap. Two examples: several ways of applying VBScript in a web page.

VBScript rollover

Example 1

VBScript rollover. Image swap

HTML / XHTML. Code:

<a href="#" onmouseover="onMouse_over()" onmouseout="onMouse_out()"><img src="out.gif" id="rollover" alt="" /></a>

VBScript. Code (<script> tag including):

<script type="text/vbscript">

Sub onMouse_over()

rollover.src='over.gif'

End Sub

Sub onMouse_out()

rollover.src='out.gif'

End Sub

</script>

Note: an external VBScript script file may also be used. The code itself is the same (without <script> tag pair, surely). The file is linked to page very much like a JavaScript file would be:

<script type="text/vbscript" src="vbscript.vbs"></script>

VBScript rollover

Example 2

VBScript rollover. Image swap

HTML / XHTML. Code:

<a href="#"><img src="out.gif" id="rollover2" alt="" /></a>

VBScript. Code (<script> tag including):

<script type="text/vbscript" event="OnMouseOver" for="rollover2">

rollover.src='over.gif'

</script>

<script type="text/vbscript" event="OnMouseOut" for="rollover2">

rollover.src='out.gif'

</script>


Aliosque subditos et thema

 

CSS centering <hr />

 

CSS centering <hr />, if its width is less than 100%. Horizontal centering. Example: HTML / XHTML. Code: <hr /> CSS. Code: hr {width: 50%; margin: 0 25% 0 25%;} /* Extra CSS, just styling the look: */ hr {height: 1px; float: left; border: 0px; color: #f00; background: #f00;} Note: mostly it works both with float: left and float: none. But float: left makes it for sure. [ 1 ] As well as Netscape 4.04+, Mozilla 0.6+. [ 2 ] As well as Netscape 4.04+, Mozilla 0.6+.

CSS centering

 

1 ) CSS horizontal and vertical centering - 1 Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More for modern web browsers : [ More ] : [ Open demo page ] 2 ) CSS horizontal and vertical centering - 2 Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More conservative, than the previous method. Suitable not only for modern web browsers, but for older ones as well - like Internet Explorer 6 or earlier Maxthon. A shortcoming - it takes more efforts to maintain the CSS code compared to [ CSS horizontal and vertical centering - 1 ] method : [ More ] : [ Open demo page ] 3 ) CSS centering floated elements Floated elements of unknown width are CSS centered horizontally : [ More ] : [ Open demo page ] 4 ) CSS centering absolutely positioned elements CSS horizontal centering of an absolutely positioned element : [ More ] 5 ) CSS centering image CSS horizontal centering of an image : [ More ] 6 ) CSS vertical alignment CSS vertical alignment of a block element containing text and images. The method works for various combinations of inline and block elements : [ More ] 7 ) JavaScript + CSS centering Centering content of a web page by means of JavaScript and CSS. A block containing the content of a page is JavaScript + CSS centered horizontally and vertically : [ More ] : Two cases : 1. A block is centered, if screen resolution is equal to or greater than 1024x768 : [ Open demo page ] 2. A block is centered, if screen resolution is equal to or greater than 1024x768 + mouse cursor is moved over a link in an element of the page content : [ Open demo page ]