Volver al Programación / Codificación foro

texto / imagen rollovers

  • astrid+
  • Novice
  • Novice
  • No Avatar
  • Registrado: Jul 13, 2009
  • Mensajes: 17
  • Status: Offline

Nota Julio 31st, 2009, 3:56 pm

Hola a todos,

Estoy diseñando una página de un cómic que Im que va a publicar en mi sitio. Yo quiero que sea para que cuatro imágenes a la vez se presenta, y que se puede acceder a otras partes de la historieta sólo rodando su ratón sobre un enlace, sin tener que cargar una nueva página. Im suponiendo esto puede lograrse a través de JavaScript?

Gracias por la ayuda.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Julio 31st, 2009, 3:56 pm

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de Usuario
  • Registrado: Jul 25, 2005
  • Mensajes: 2735
  • Loc: Nashville, TN
  • Status: Offline

Nota Julio 31st, 2009, 5:09 pm

Puede especificar esta manera:
Código: [ Select ]
 
<html>
    <head>
        <script language="JavaScript">
 
            function doSwap(newSrc, targ)
            {                          
                document.getElementById(targ).src = newSrc;        
            }
        </script>
    </head>
    <body>
        <img id="target" src="" />
        <br />
        <a href="#" onMouseOver="doSwap('http://davidnaylor.org/temp/firefox-logo-200x200.png', 'target');">Hover here!</a><br/>
        <a href="#" onMouseOver="doSwap('http://davidnaylor.org/temp/thunderbird-logo-200x200.png', 'target');">Hover here!</a><br/>
        <a href="#" onMouseOver="doSwap('http://markcarson.com/images/Sunbird-4-200x200.png', 'target');">Hover here!</a><br/>
    </body>
</html>
 
  1.  
  2. <html>
  3.     <head>
  4.         <script language="JavaScript">
  5.  
  6.             function doSwap(newSrc, targ)
  7.             {                          
  8.                 document.getElementById(targ).src = newSrc;        
  9.             }
  10.         </script>
  11.     </head>
  12.     <body>
  13.         <img id="target" src="" />
  14.         <br />
  15.         <a href="#" onMouseOver="doSwap('http://davidnaylor.org/temp/firefox-logo-200x200.png', 'target');">Hover here!</a><br/>
  16.         <a href="#" onMouseOver="doSwap('http://davidnaylor.org/temp/thunderbird-logo-200x200.png', 'target');">Hover here!</a><br/>
  17.         <a href="#" onMouseOver="doSwap('http://markcarson.com/images/Sunbird-4-200x200.png', 'target');">Hover here!</a><br/>
  18.     </body>
  19. </html>
  20.  


...pero thats un poco fácil. Ahora las imágenes al azar, que era un poco más divertido de escribir, pero simple:

Código: [ Select ]
 
<html>
    <head>
        <script language="JavaScript">
 
            function doRandSwap(curr, targ)
            {          
                var pics, next;
               
                pics = new Array("http://davidnaylor.org/temp/firefox-logo-200x200.png",
                             "http://davidnaylor.org/temp/thunderbird-logo-200x200.png",
                             "http://markcarson.com/images/Sunbird-4-200x200.png"
                            );
                do {
                    next = Math.floor(Math.random()*pics.length);
                } while (next == curr);
                document.getElementById(targ).src = pics[next];        
                document.getElementById('curr').value = next;
            }
        </script>
    </head>
    <body>
        <img id="target" src="" />
        <br /><br />
        <input id="curr" type="hidden" />
        <br />
        <a href="#" onMouseOver="doRandSwap(document.getElementById('curr').value, 'target');">Hover here!</a>
    </body>
</html>
 
  1.  
  2. <html>
  3.     <head>
  4.         <script language="JavaScript">
  5.  
  6.             function doRandSwap(curr, targ)
  7.             {          
  8.                 var pics, next;
  9.                
  10.                 pics = new Array("http://davidnaylor.org/temp/firefox-logo-200x200.png",
  11.                              "http://davidnaylor.org/temp/thunderbird-logo-200x200.png",
  12.                              "http://markcarson.com/images/Sunbird-4-200x200.png"
  13.                             );
  14.                 do {
  15.                     next = Math.floor(Math.random()*pics.length);
  16.                 } while (next == curr);
  17.                 document.getElementById(targ).src = pics[next];        
  18.                 document.getElementById('curr').value = next;
  19.             }
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <img id="target" src="" />
  24.         <br /><br />
  25.         <input id="curr" type="hidden" />
  26.         <br />
  27.         <a href="#" onMouseOver="doRandSwap(document.getElementById('curr').value, 'target');">Hover here!</a>
  28.     </body>
  29. </html>
  30.  
I'd love to change the world, but they won't give me the source code.
  • astrid+
  • Novice
  • Novice
  • No Avatar
  • Registrado: Jul 13, 2009
  • Mensajes: 17
  • Status: Offline

Nota Agosto 1st, 2009, 3:15 pm

Muchas gracias! Esa fue una gran ayuda.
Tengo otra pregunta, sin embargo. ¿Qué debo hacer si quiero que la primera imagen que ya existe en la página por defecto, la persona sin tener que rodar sobre el texto con el fin de verlo?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de Usuario
  • Registrado: Jul 25, 2005
  • Mensajes: 2735
  • Loc: Nashville, TN
  • Status: Offline

Nota Agosto 1st, 2009, 3:55 pm

Sólo tienes que configurar la imagen src a lo que usted desea que aparezca allí. En este código, si desea que la imagen carga por primera vez, entonces sólo cambio de esta línea:

Código: [ Select ]
<img id="target" src="" />


a esto:

Código: [ Select ]
<img id="target" src="http://davidnaylor.org/temp/firefox-logo-200x200.png" />
I'd love to change the world, but they won't give me the source code.
  • astrid+
  • Novice
  • Novice
  • No Avatar
  • Registrado: Jul 13, 2009
  • Mensajes: 17
  • Status: Offline

Nota Agosto 3rd, 2009, 9:31 pm

Gracias! :)

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 5 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 190 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC