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 absolutely positioned elements

 

CSS horizontal centering of an absolutely positioned element. Example: HTML / XHTML. Code: <div class="example"> <img src="image.jpg" alt="Image" /> </div> CSS. Code: .example {position: relative; left: 0px; top: 0px; height: 90px; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto; width: 68px;} An absolutely positioned img is centered in the example. But this method of horizontal centering also works with other both inline and block absolutely positioned elements. The width of an absolutely positioned element may also be in percent or other units. CSS properties of a container (here it is .example), holding an element to be centered, may vary. The element's centering is achieved by styles applied to the element itself: .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto;}. [ 1 ] As well as Netscape 8.01+, Mozilla 1.5+. [ 2 ] As well as Netscape 8.01+, Mozilla 1.5+.

JavaScript rollover. Image swap

 

Example n.1 ( For modern web browsers: Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, [ 3 ] ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" width="728" height="67" alt="JavaScript rollover. Image swap" /></a> CSS. Code: .image {border: 0px;} JavaScript. Code: imageout=new Image(); imageout.src="out.gif"; imageover=new Image(); imageover.src="over.gif"; function image_out(){ document.images['imageout'].src='out.gif'; }; function image_over(){ document.images['imageout'].src='over.gif'; }; Swap image 1 ( out.gif ): Swap image 2 ( over.gif ): Example n.2 ( For older web browsers: Internet Explorer 4.0+, Netscape 3.04+, Opera 3.21+ ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" name="imageout" width="728" height="67" border="0" alt="JavaScript rollover. Image swap"></a> JavaScript.