Tema: Nuevo Desafío: Transición entre 2 imágenes
Ver Mensaje Individual
  #36 (permalink)  
Antiguo 23/07/2010, 16:42
Avatar de ClubIce
ClubIce
 
Fecha de Ingreso: diciembre-2008
Mensajes: 216
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Nuevo Desafío: Transición entre 2 imágenes
Código Javascript: 
Ver original
  1. /********************************************************/
  2. /*               Conexiones & Destinos                  */
  3. /* * Esta pagina usa el framework Magic DHTML           */
  4. /* * Version: 0.4                                       */
  5. /* * Sistema y diseño, hecho por ClubIce                */
  6. /********************************************************/
  7.  
  8. /********************************************************/
  9. /* > Inicamos con la conguracion para M.DHTML           */
  10. /********************************************************/
  11. dhtConfig={
  12.   imageRoot:"cyd/images/",
  13.   soundRoot:"cyd/sounds/",
  14.   CSSRoot:"styles/",
  15.   scriptRoot:"scripts/",
  16.   preloadImages:["logo.png","corners.png","backgrunds.png",
  17.                  "cyd_form_elements.png",9,"big_logo.png","loader.png",10],
  18.   preloadSound:["click.wav","bgsound.mp3","flash.wav","welcome.mp3",9],
  19.   preloadScript:["cyd_styles.js",10],
  20.   loadComponents:["box.dht",9],
  21.   disableRightClick:true,
  22.   enambleSound:true,
  23.   onReadyData:{10,makeLoaderProgressbar,9,startPage},
  24.   onLoaderProgressChange:UpdateLoader
  25.   showDefaultLoader:false,
  26.   usePopUpMode:true
  27. }
  28. /********************************************************/
  29. /* > Función que genera la barra de precarga            */
  30. /********************************************************/
  31. function makeLoaderProgressbar () {
  32.   LoaderImage=new lyrStaticImage("loader.png",200,30)
  33.   LoaderImage.depth=-1
  34.   LoaderProgressImage=new lyrDinamicImage("loader.png",200,0,0,0)
  35.   LoaderProgressImage.depth=1
  36.   Loader=new dhtComponent()
  37.   Loader.insert(dhtLayer,LoaderProgressImage)
  38.   Loader.insert(dhtLayer,LoaderImage)
  39.   Logon=new lyrStaticImage("big_logo.png",300,200)
  40.   FooterText=new lyrText ("© 2010 ClubIce And Conexiones & Destinos",cydFooterText)
  41.   dhtWorkSpace.clear()
  42.   dhtWorkSpace.insert(dhtLayer,Logon, dhtCenter, dhtMiddle)
  43.   dhtWorkSpace.insert(dhtComponent,Loader, dhtCenter, dhtMiddle)
  44.   dhtWorkSpace.insert(lyrText, FooterText, dhtRight, dhtBottom)
  45. }
  46. /*********************************************************/
  47. /* > Función que actualiza el estado de carga de la      */
  48. /*   barra de precarga.                                  */
  49. /*                                                       */
  50. /* * Progress: Indica el porcentaje de carga de la       */
  51. /*   pagina. Este parametro es enviado automaticamente   */
  52. /*   por onLoaderProgressChange.                         */
  53. /*********************************************************/
  54. function UpdateLoader (progress) {
  55.   Loader.LoaderProgressImage.move(progress*2,0)
  56. }
  57. /*********************************************************/
  58. /* > Función que inica el dibujado de los elemento de la */
  59. /*   pagina.                                             */
  60. /*********************************************************/
  61. function StartPage () {
  62.   AjustToScreen=new dhtFix (dhtSize,screen.width,screen.height)
  63.   
  64.   Container=new lyrDIV()
  65.   dhtWorkSpace.clear()
  66. }
  67. /*********************************************************/
  68. /* > Definimos elemento personalizados para C&D.         */
  69. /*                                                       */
  70. /* Comenzamos con las ventanas de interface              */
  71. /*********************************************************/
  72. cydBox=function (boxStyle,boxWidth,boxHeight, boxX, boxY) {
  73.   this.images=new dhtSprite ("corners.png", 10,10,0,0,0,0,4,8)
  74.   this.box=new dhtBox ()
  75.   that=this
  76.   if (boxStyle==cydGreen) {
  77.    this.box.images={
  78.     cor1:that.images.draw(0),
  79.     cor2:that.images.draw(1),
  80.     cor3:that.images.draw(4),
  81.     cor4:that.images.draw(5),
  82.     bor1:new dhtLoopedBG ("corners.png",9,0,11,10).draw(),
  83.     bor2:new dhtLoopedBG ("corners.png",0,9,10,11).draw(),
  84.     bor3:new dhtLoopedBG ("corners.png",10,9,20,11).draw(),
  85.     bor4:new dhtLoopedBG ("corners.png",9,10,11,20).draw(),
  86.     bgColor:new dhtColor (dhtRGB, 0,180,0)
  87.    }
  88.   } else if (boxStyle==cydOrange) {
  89.    this.box.images={
  90.     cor1:that.images.draw(2),
  91.     cor2:that.images.draw(3),
  92.     cor3:that.images.draw(6),
  93.     cor4:that.images.draw(7),
  94.     bor1:new dhtLoopedBG ("corners.png",29,0,31,10).draw(),
  95.     bor2:new dhtLoopedBG ("corners.png",20,29,30,31).draw(),
  96.     bor3:new dhtLoopedBG ("corners.png",30,9,40,11).draw(),
  97.     bor4:new dhtLoopedBG ("corners.png",29,10,31,20).draw(),
  98.     bgColor:new dhtColor (dhtRGB, 255,180,0)
  99.    }
  100.   }
  101. }.prototype={
  102.   draw:function (drwX,drwY) {
  103.    return this.box.draw(drwX,drwY)
  104.   },
  105.   insert:function (insType,insItem,insX,insY) {
  106.    this.box.insert(insType,insItem,insX,insY)
  107.   }
  108. }
  109.  
  110. window.onload=function() {dhtml.start()}