JavaScript puede modificar la hoja de estilos en cascada la información en una página Web , lo que permite una imagen que se mueve a diferentes posiciones en la página , a partir de la entrada del usuario . Un ejemplo de esto es una demostración de HTML , el estilo y JavaScript que permite una imagen que se mueve alrededor de la página de forma aleatoria como se coloca el cursor del ratón sobre él . Para lograr esto , los atributos de posición de la imagen se modifican , como se producen los eventos del ratón - más . Cosas que necesitará
texto editor de la búsqueda Web navegador
Mostrar más instrucciones
1
Abra un nuevo documento en el editor de texto. Guarde el archivo como " moveimage.html . "
2
Escribir código de documento encabezado
< DOCTYPE HTML PUBLIC " - . ! //W3C //DTD XHTML 1.0 Strict //EN "
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
< HTML xmlns = " http://www .w3.org/1999/xhtml ">
Move imagen < /title > <br> <p> < meta content =" text /html ; . charset = UTF - 8 "http -equiv = " Content- Type " /> <br> 3 <p> Escribir código de estilo documento <br> <p> < style type = "text /css" > <br> <p> º de imagen <br> <p> <br> <p> { position: absolute ; <br> <p> z -index: 0 ; <br> <p> visibility: visible ; <br> <p> top: 10em ; <br> <p> izquierda : 10em ; <br> ancho <p> : 5em ; <br> altura <p> : 5em <br> <p> } <br> <p> < /style> <br> 4 <p> Write documento de código JavaScript . <br> <p> <script type="text/javascript"> <br> <p> var x; <br> <p> var y; <br> <p> función de pausa (ms ) <br> <p> { <br> <p> var fecha = new Date (); <br> <p> var CURDATE = null; <br> <p> hacer { CURDATE = new Date (); } <br> <p> while ( CURDATE día < ms) ; <br> <p> } <br> <p> función moveImage () <br> <p> { <br> <p> x = Math.floor ( Math.random () * 40 ) ; <br> <p> y = Math.floor ( Math.random () * 30 ) ; <br> <p> pausa ( 300 ) . <br> <p> document.getElementById ( "imagen" ) style.top = y + " em" ; <br> <p> document.getElementById ( " imagen em " ") style.left = x + . " ; <br> <p> } <br> <p> < /script > <br> <p> < /head> <br> 5 <p> Escribir código del cuerpo del documento. <br> <p> <body> <br> <p> < img src id = "imagen" = " http://www.objcom.com/brianb.png " onmouseover = " moveImage ()" /> <br> <p> < /body> <br> <p> < /html> <br> 6 <p> Abrir archivo en el navegador web. Mueva el puntero del ratón sobre la imagen , y se moverá a una nueva posición en la página. <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programacion/javascript-programming/90986.html' >Cómo ocultar por clase en JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/90988.html' >Cómo Cuenta atrás utilizando JavaScript </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Artículos relacionados </td> </tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91134.html" title="Cómo importar VMWare disco en VirtualBox " target="_self">Cómo importar VMWare disco en VirtualBox </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91153.html" title="Cómo utilizar Javascript con flash " target="_self">Cómo utilizar Javascript con flash </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91005.html" title="Cómo extraer los parámetros de una URL con JavaScript " target="_self">Cómo extraer los parámetros de una URL con JavaScript…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91205.html" title="Instrucciones de Cómo activar JavaScript " target="_self">Instrucciones de Cómo activar JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90798.html" title="Cómo cambiar y redirigir un URL con Java " target="_self">Cómo cambiar y redirigir un URL con Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91270.html" title="¿Qué hace JavaScript " target="_self">¿Qué hace JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90944.html" title="Cómo utilizar JavaScript para mostrar Prime Factors " target="_self">Cómo utilizar JavaScript para mostrar Prime Factors </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90842.html" title="JavaScript: redirección a la página " target="_self">JavaScript: redirección a la página </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91117.html" title="Javascript Combobox Tutorial " target="_self">Javascript Combobox Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90983.html" title="Cómo ocultar los DIVs Open in JavaScript " target="_self">Cómo ocultar los DIVs Open in JavaScript </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Artículos destacados </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/93764.html" title="Cómo dar formato a los flotadores en Python " target="_self">Cómo dar formato a los flotadores en Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/89975.html" title="¿Qué es la clase String en Java " target="_self">¿Qué es la clase String en Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91560.html" title="Cómo reiniciar una transferencia Curl Error en PHP " target="_self">Cómo reiniciar una transferencia Curl Error en PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90470.html" title="Cómo leer un archivo CSV en Java " target="_self">Cómo leer un archivo CSV en Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/89130.html" title="Cómo tener Java Leer Pulsaciones como Entrada " target="_self">Cómo tener Java Leer Pulsaciones como Entrada </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86894.html" title="Cómo utilizar PUT y DELETE en Flex " target="_self">Cómo utilizar PUT y DELETE en Flex </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91866.html" title="Salario de Junior PHP Developer " target="_self">Salario de Junior PHP Developer </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96079.html" title="Las Fortalezas y Debilidades del lenguaje Visual Basic " target="_self">Las Fortalezas y Debilidades del lenguaje Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/89134.html" title="Cómo calcular el número de comparaciones en Java " target="_self">Cómo calcular el número de comparaciones en Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/93015.html" title="Cómo guardar un archivo PHP y adjuntarlo a su Página Web " target="_self">Cómo guardar un archivo PHP y adjuntarlo a su Página …</a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=middle>Copyright © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
