Página Inicial de WebUsable

Página anterior Página Inicial de WebUsable Disminuir tamaño de letra Aumentar tamaño de letra Mapa de WebUsable Envía tus comentarios
 

 Filtros Multimedia mediante CSS's en IE: Scripting

Temas relacionados: Filtros Multimedia mediante CSS | Transiciones en IE

Contenido:
  1. Introducción
  2. Catálogo de Filtros
  3. Filtros y Javascript
    1. 3.1 Alpha
    2. 3.2 BasicImage
    3. 3.3 Blur
    4. 3.4 DropShadow
    5. 3.5 Emboss
    6. 3.6 Engrave
    7. 3.7 Glow
    8. 3.8 Light
    9. 3.9 MaskFilter
    10. 3.10 MotionBlur
    11. 3.11 Shadow
    12. 3.12 Wave

  1. Introducción
  2. Catálogo de Filtros

  3. Filtros y Javascript: Además de aplicar un filtro a un objeto mediante la asignación unívoca de una clase de estilo a dicho objeto, el filtro se le puede asignar mediante código Javascript. Veamos ejemplos:

    1. 3.1 Filtro "Alpha":

      2. Original Transformación
      Aspecto original
      Aspecto con Filtro Alpha

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Alpha:

      <img id="containerAlpha3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);"
      src="images/vela.gif" alt="Aspecto con Filtro Alpha" />

      Y a continuación incluímos el código Javascript que aplica el filtro Alpha:

      <script type="text/javascript">
      document.getElementById("containerAlpha3").filters.item("DXImageTransform.Microsoft.Alpha").opacity=50
      </script>


      Inicio de página


    2. 3.2 Filtro "BasicImage":

      3. Original Transformación
      Aspecto original
      Aspecto con Filtro Basic Image

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Basic Image:

      <img id="containerBasicimage3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(Invert=0, XRay=1)';
      filter: progid:DXImageTransform.Microsoft.BasicImage(Invert=0, XRay=1)"
      src="images/vela.gif" alt="Aspecto con Filtro Basic Image" />

      Y a continuación incluímos el código Javascript que aplica el filtro Basic Image:

      <script type="text/javascript">
      document.getElementById("containerBasicimage3").filters.item("DXImageTransform.Microsoft.BasicImage").Invert=0;
      </script>


      Inicio de página


    3. 3.3 Filtro "Blur":

      4. Original Transformación
      Aspecto original
      Aspecto con Filtro Blur

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Blur:

      <img id="containerBlur3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.Blur(attribute=value1, attribute2=value2)';
      filter: progid:DXImageTransform.Microsoft.Blur(attribute=value1, attribute2=value2)"
      src="images/vela.gif" alt="Aspecto con Filtro Blur" />

      Y a continuación incluímos el código Javascript que aplica el filtro Blur:

      <script type="text/javascript">
      document.getElementById("containerBlur3").filters.item("DXImageTransform.Microsoft.Blur").Property1=value1;
      </script>


      Inicio de página


    4. 3.4 Filtro "DropShadow":

      5. Original Transformación
      Aspecto original
      Aspecto con Filtro DropShadow

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Drop Shadow:

      <img id="containerDropshadow3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.dropShadow(color=#00ff00,offX=5,offY=5)';
      filter: progid:DXImageTransform.Microsoft.dropShadow(color=#AABBCC,offX=5,offY=5)"
      src="images/vela.gif" alt="Aspecto con Filtro DropShadow" />

      Y a continuación incluímos el código Javascript que aplica el filtro Drop Shadow:

      <script type="text/javascript">
      document.getElementById("containerDropshadow3").filters.item("DXImageTransform.Microsoft.dropShadow").Color=#FF0000;
      </script>


      Inicio de página


    5. 3.5 Filtro "Emboss":

      6. Original Transformación
      Aspecto original
      Aspecto con Filtro Light

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Emboss dejando el efecto inicialmente inhibido:

      <div>
      <img id="containerEmboss3"
      style=" -ms-filter: 'progid:DXImageTransform.Microsoft.Emboss(enabled=false)';
      filter: progid:DXImageTransform.Microsoft.Emboss(enabled=false);"
      src="images/vela.gif" alt="Aspecto con Filtro Emboss" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto Emboss:

      <script type="text/javascript">
      document.getElementById("containerEmboss3").filters.item("DXImageTransform.Microsoft.Emboss").enabled=true
      </script>


      Inicio de página


    6. 3.6 Filtro "Engrave":

      7. Original Transformación
      Aspecto original
      Aspecto con Filtro Engrave

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Engrave:

      <img id="containerEngrave3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.Engrave(attribute=value1, attribute2=value2)';
      filter: progid:DXImageTransform.Microsoft.Engrave(attribute=value1, attribute2=value2)"
      src="images/vela.gif" alt="Aspecto con Filtro Engrave" />

      Y a continuación incluímos el código Javascript que aplica el filtro Engrave:

      <script type="text/javascript">
      document.getElementById("containerEngrave3").filters.item("DXImageTransform.Microsoft.Engrave").Property1=value1;
      </script>


      Inicio de página


    7. 3.7 Filtro "Glow":

      8. Original Transformación
      Aspecto original
      Aspecto con Filtro Glow

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Glow:

      <div>
      <img id="containerGlow3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.Glow(attribute=value1, attribute2=value2)';
      filter: progid:DXImageTransform.Microsoft.Glow(attribute=value1, attribute2=value2)"
      src="images/vela.gif" alt="Aspecto con Filtro Glow" />
      </div>

      Y a continuación incluímos el código Javascript que aplica dichos efectos "addCone" y "moveLight":

      <script type="text/javascript">
      document.getElementById("containerGlow3").filters.item("DXImageTransform.Microsoft.Glow").Property1=value1;
      </script>


      Inicio de página


    8. 3.8 Filtro "Light" / Método "addAmbient":

      9. Original Transformación
      Aspecto original
      Aspecto con Filtro Light, Método addAmbient

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Light:

      <div>
      <img id="containerLight3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.Light()';
      filter: progid:DXImageTransform.Microsoft.Light();"
      src="images/vela.gif" alt="Aspecto con Filtro Light, Método addAmbient" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto Light:

      <script type="text/javascript">
      var myimg=document.getElementById("containerLight3")
      myimg.filters.item("DXImageTransform.Microsoft.Light").addAmbient(110, 120, 80, 70)
      </script>

    9. Filtro "Light" / Método "addCone":

      10. Original Transformación
      Aspecto original
      Aspecto con Filtro Light, Método addCone

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Light:

      <div> <img id="containerLight4" style="
      width: 76px;
      height: 203px;
      background-color: gray;
      -ms-filter: 'progid:DXImageTransform.Microsoft.Light()';
      filter: progid:DXImageTransform.Microsoft.Light();"
      src="images/vela.gif" alt="Aspecto con Filtro Light, Método addCone" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto Light-"addCone":

      <script type="text/javascript">
      var mydiv=document.getElementById("containerLight4")
      mydiv.filters.item("DXImageTransform.Microsoft.Light").addCone(0,0,1,140,120,255,255,0,20,10);
      </script>

    10. Filtro "Light" / Método "addPoint":

      11. Original Transformación
      Aspecto original
      Aspecto con Filtro Light, Método addPoint

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Light:

      <div> <img id="containerLight5" style="
      width: 76px;
      height: 203px;
      background-color: gray;
      -ms-filter: 'progid:DXImageTransform.Microsoft.Light()';
      filter: progid:DXImageTransform.Microsoft.Light();"
      src="images/vela.gif" alt="Aspecto con Filtro Light, Método addPoint" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto Light:

      <script type="text/javascript">
      var mydiv=document.getElementById("containerLight5")
      mydiv.filters.item("DXImageTransform.Microsoft.Light").addPoint(10,50,100,255,255,0,50);
      </script>

    11. Filtro "Light" / Método "changeColor":

      12. Original Transformación
      Aspecto original
      Aspecto con Filtro Light, Métodos changeColor y addAmbient

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Light-"changeColor":

      <div>
      <img id="containerLight6" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.Light()';
      filter: progid:DXImageTransform.Microsoft.Light();"
      src="images/vela.gif" alt="Aspecto con Filtro Light, Métodos changeColor y addAmbient" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto changeColor y además el addAmbient:

      <script type="text/javascript">
      var myimg=document.getElementById("containerLight6")
      myimg.filters.item("DXImageTransform.Microsoft.Light").addAmbient(110, 120, 80, 70)
      myimg.filters.item("DXImageTransform.Microsoft.Light").changeColor(0, 255, 255, 0, 0)
      </script>

    12. Filtro "Light" / Método "changeStrenght":

      13. Original Transformación
      Aspecto original
      Aspecto con Filtro Light, Métodos changeStrenght, addAmbient y changeColor

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Light-"changeStrenght":

      <div>
      <img id="containerLight7" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.Light()';
      filter: progid:DXImageTransform.Microsoft.Light();"
      src="images/vela.gif" alt="Aspecto con Filtro Light, Métodos changeStrenght y addAmbient" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto changeStrenght:

      <script type="text/javascript">
      var myimg=document.getElementById("containerLight7")
      myimg.filters.item("DXImageTransform.Microsoft.Light").addAmbient(110, 120, 80, 70)
      myimg.filters.item("DXImageTransform.Microsoft.Light").changeStrength(1, 90, 0)
      </script>

    13. Filtro "Light" / Método "moveLight":

      14. Original Transformación
      (mueve el ratón sobre la imágen)
      Aspecto original
      Aspecto con Filtro Light, Método moveLight

      Aplicamos directamente el estilo al objeto al que vamos a aplicar los filtros Light-"addCone" y Light-"moveLight":

      <div>
      <img id="containerLight8" style="
      width: 76px;
      height: 203px;
      position: relative;
      -ms-filter: 'progid:DXImageTransform.Microsoft.Light()';
      filter: progid:DXImageTransform.Microsoft.Light();"
      src="images/vela.gif" alt="Aspecto con Filtro Light, Método moveLight" />
      </div>

      Y a continuación incluímos el código Javascript que aplica dichos efectos "addCone" y "moveLight":

      <script type="text/javascript">
      var myimg=document.getElementById("containerLight7")
      myimg.filters.item("DXImageTransform.Microsoft.Light").addAmbient(110, 120, 80, 70)
      myimg.filters.item("DXImageTransform.Microsoft.Light").changeStrength(1, 90, 0)
      </script>


      Inicio de página


    14. 3.9 Filtro "MaskFilter":

      15. Original Transformación
      Aspecto original
      Aspecto con Filtro MaskFilter

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro MaskFilter:

      <div>
      <img id="containerMaskfilter3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.MaskFilter(attribute=value1, attribute2=value2)';
      filter: progid:DXImageTransform.Microsoft.MaskFilter(attribute=value1, attribute2=value2)"
      src="images/chaplin.gif" alt="Aspecto con Filtro MaskFilter" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto "MaskFilter" consistente en seleccionar un determinado color para hacerle transparente y dotar de un color concreto al área transparente del objeto:

      <script type="text/javascript">
      document.getElementById("containerMaskfilter3").filters.item("DXImageTransform.Microsoft.MaskFilter").Property1=value1;
      </script>


      Inicio de página


    15. 3.10 Filtro "MotionBlur":

      16. Original Transformación
      Aspecto original
      Aspecto con Filtro MaskFilter

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro MotionBlur:

      <div>
      <img id="containerMotionblur3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=30, attribute2=value2)';
      filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=30, attribute2=value2)"
      src="images/vela.gif" alt="Aspecto con Filtro MotionBlur" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto "MotionBlur":

      <script type="text/javascript">
      document.getElementById("containerMaskfilter3").filters.item("DXImageTransform.Microsoft.MotionBlur").Property1=value1;
      </script>


      Inicio de página


    16. 3.11 Filtro "Shadow":

      17. Original Transformación
      Aspecto original
      Aspecto con Filtro Shadow

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Shadow:

      <div>
      <img id="containerShadow3" style="
      -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(attribute=value1, attribute2=value2)';
      filter: progid:DXImageTransform.Microsoft.Shadow(attribute=value1, attribute2=value2)"
      src="images/vela.gif" alt="Aspecto con Filtro Shadow" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto "Shadow":

      <script type="text/javascript">
      document.getElementById("containerShadow3").filters.item("DXImageTransform.Microsoft.Shadow").Property1=value1;
      </script>


      Inicio de página


    17. 3.12 Filtro "Wave":

      18. Original Transformación
      Aspecto original
      Aspecto con Filtro Wave

      Aplicamos directamente el estilo al objeto al que vamos a aplicar el filtro Wave:

      <div>
      <img id="containerWave3" style="
      width: 76px;
      -ms-filter: 'progid:DXImageTransform.Microsoft.Wave(freq=5, lightStrength=5, phase=20, strength=5)';
      filter: progid:DXImageTransform.Microsoft.Wave(freq=5, lightStrength=5, phase=20, strength=5);"
      src="images/vela.gif" alt="Aspecto con Filtro Wave" />
      </div>

      Y a continuación incluímos el código Javascript que aplica el efecto "Shadow":

      <script type="text/javascript">
      document.getElementById("containerWave3").filters.item("DXImageTransform.Microsoft.Wave").Property1=value1;
      </script>

Temas relacionados: Filtros Multimedia mediante CSS | Transiciones en IE

  
 
WebUsable.com © Todos los derechos reservados.
Subir al inicio de página Página anterior Página Inicial de WebUsable Imprimir esta página Envía tus comentarios Recomienda esta página a un amigo Mapa de WebUsable