IE4.asp establece el conjunto de marcos de este ejemplo para facilitar la exploración.
IE4.htm utiliza DHTML para crear un efecto visual cuando se sitúa el cursor del mouse (ratón) sobre un vínculo. Este proceso se lleva a cabo estableciendo diferentes estilos para la etiqueta <A>:
<style>
A.Item {
cursor:
hand;
font-family: verdana;
font-size: 12;
font-style: normal;
background-color:
black;
color: white;
text-decoration: none
}
A.Highlight {
cursor: hand;
font-family: verdana;
font-size: 12;
font-style:
italic;
background-color: white;
color: black;
text-decoration: none
}
</style>
Con el fin de alternar entre estos estilos, se utiliza JavaScript para cambiar el estilo aplicado cuando se sitúa el cursor del mouse (ratón) sobre un vínculo o se retira de encima:
<script LANGUAGE=JavaScript>
function rollon() {
if
(window.event.srcElement.className == "Item") {
window.event.srcElement.className = "Highlight";
}
}
Rollover.onmouseover = rollon;
function rolloff() {
if
(window.event.srcElement.className == "Highlight") {
window.event.srcElement.className = "Item";
}
}
Rollover.onmouseout = rolloff;
</script>
Filter.htm muestra cómo aplicar diferentes filtros a objetos en la página Web. En este ejemplo, se cambia el texto, los gráficos y los objetos mediante filtros.
Se utiliza una etiqueta <DIV> para controlar los objetos de la página que se modifican. Dentro de la etiqueta <DIV> hay texto, la imagen de un globo terráqueo y un objeto que dibuja una imagen compleja:
<DIV ID=theImg style="WIDTH:90%"
style="font-size:18pt;font-family:verdana;font-style:bold" >
Los filtros pueden afectar a cualquier elemento HTML; incluidos texto, controles sin ventanas, controles intrínsecos e imágenes.
<IMG id=glbimg hspace=10 vspace=10 width=150 height=150
src="../images/globe.gif">
<OBJECT ID=SG1
STYLE="HEIGHT:150; WIDTH:150"
CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
<PARAM NAME="Line0001"
VALUE="SetFillStyle(1)">
<PARAM NAME="Line0002"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0003"
VALUE="Pie(-75,-75,150,150,0,10,0)">
<PARAM NAME="Line0004"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0005"
VALUE="Pie(-75,-75,150,150,0,10,18)">
<PARAM NAME="Line0006"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0007"
VALUE="Pie(-75,-75,150,150,0,10,36)">
<PARAM NAME="Line0008"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0009"
VALUE="Pie(-75,-75,150,150,0,10,54)">
<PARAM NAME="Line0010"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0011"
VALUE="Pie(-75,-75,150,150,0,10,72)">
<PARAM NAME="Line0012"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0013"
VALUE="Pie(-75,-75,150,150,0,10,90)">
<PARAM NAME="Line0014"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0015"
VALUE="Pie(-75,-75,150,150,0,10,108)">
<PARAM NAME="Line0016"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0017"
VALUE="Pie(-75,-75,150,150,0,10,126)">
<PARAM NAME="Line0018"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0019"
VALUE="Pie(-75,-75,150,150,0,10,144)">
<PARAM NAME="Line0020"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0021"
VALUE="Pie(-75,-75,150,150,0,10,162)">
<PARAM NAME="Line0022"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0023"
VALUE="Pie(-75,-75,150,150,0,10,180)">
<PARAM NAME="Line0024"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0025"
VALUE="Pie(-75,-75,150,150,0,10,198)">
<PARAM NAME="Line0026"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0027"
VALUE="Pie(-75,-75,150,150,0,10,216)">
<PARAM NAME="Line0028"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0029"
VALUE="Pie(-75,-75,150,150,0,10,234)">
<PARAM NAME="Line0030"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0031"
VALUE="Pie(-75,-75,150,150,0,10,252)">
<PARAM NAME="Line0032"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0033"
VALUE="Pie(-75,-75,150,150,0,10,270)">
<PARAM NAME="Line0034"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0035"
VALUE="Pie(-75,-75,150,150,0,10,288)">
<PARAM NAME="Line0036"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0037"
VALUE="Pie(-75,-75,150,150,0,10,306)">
<PARAM NAME="Line0038"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0039"
VALUE="Pie(-75,-75,150,150,0,10,324)">
<PARAM NAME="Line0040"
VALUE="SetFillColor(0,90,200)">
<PARAM NAME="Line0041"
VALUE="Pie(-75,-75,150,150,0,10,342)">
<PARAM NAME="Line0042"
VALUE="SetFillColor(255,255,255)">
<PARAM NAME="Line0043"
VALUE="Pie(-75,-75,150,150,0,10,360)">
</OBJECT>
</DIV>
El resto de la página contiene botones que permiten aplicar diferentes filtros a los objetos mencionados anteriormente. A continuación, se expone un ejemplo del botón que voltea todos los objetos horizontalmente:
<input CLASS=clsbtn value="FlipH" type=button
name=filt onclick="theImg.style.filter = 'fliph(enabled=1)';
progress.innerText = 'Voltear horizontalmente (fliph): Voltea los píxeles visibles sobre el eje horizontal.';">
Trans.htm recorre en ciclo los diversos efectos de transición que se pueden realizar sobre los objetos. En este ejemplo, se muestra una imagen sobre un texto y se desvanece o se hace más clara con distintas transiciones:
AB.filters.item(0).Transition = curtrans
AB hace referencia a la etiqueta <DIV> que define los objetos que se verán afectados:
<DIV
ID="AB" STYLE="POSITION:ABSOLUTE; WIDTH:300; HEIGHT:360;
Left:45%; Top:15%;background-color:black; FILTER:revealTrans(Duration=3.0,
Transition=1)">
curtrans es una variable del código JavaScript que recorre en ciclo los diferentes efectos de transición:
curtrans =
curtrans + 1
if curtrans > numtrans then curtrans = 0
end if