Kompx.com or Compmiscellanea.com

Контакт


Aliosque subditos et thema

 

VBScript rollover. Image swap

 

VBScript rollover, using image swap. Two examples: several ways of applying VBScript in a web page. VBScript rollover Example 1 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 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>

Mobile-friendly HTML table

 

If an HTML table is too wide, having too much data, it may not shrink anymore, it gets wider than the available space and breaks page layout. An horizontal scroll added to the table fixes it up. Example: 12345678910 Table_data_1 Table_data_2 Table_data_3 Table_data_4 Table_data_5 Table_data_6 Table_data_7 Table_data_8 Table_data_9 Table_data_10 HTML / XHTML. Code: <table> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> </tr> <tr> <td>Table_data_1</td> <td>Table_data_2</td> <td>Table_data_3</td> <td>Table_data_4</td> <td>Table_data_5</td> <td>Table_data_6</td> <td>Table_data_7</td> <td>Table_data_8</td> <td>Table_data_9</td> <td>Table_data_10</td> </tr> </table> CSS. Code: table {display: block; overflow-x: auto;} /* Extra CSS, just styling the look: */ table {border-collapse: collapse;} table td,th {padding: 10px; border: 1px #000 solid;} Note: the CSS property of display: block makes the table to occupy only as much space horizontally as it is needed to contain the data without shrinking. Not more, not making itself to stretch from the leftmost to the rightmost sides of the available space - even if width: 100% is added to CSS. Example: 123 Table_data_1 Table_data_2 Table_data_3 [ 1 ] As well as Netscape 9.0. [ 2 ] As well as Netscape 9.0.