Javascript in grado di modificare le informazioni del foglio di stile CSS in una pagina Web , che consente un'immagine per essere spostato in diverse posizioni sulla pagina , in base all'input dell'utente . Un esempio di questo è un HTML , stile e JavaScript dimostrazione che permette un'immagine per essere spostata la pagina in un modo casuale come il cursore del mouse viene posizionato su di esso. Per ottenere ciò, gli attributi posizionali dell'immagine vengono modificate , come si verificano eventi mouseover. Cose che ti serviranno
Text Editor
Browser Web
Show More Istruzioni
1
Aprire un nuovo documento nell'editor di testo . Salvare il file come " moveimage.html . "
2
Scrivi documento codice intestazione
< DOCTYPE HTML PUBLIC " - . ! //W3C //DTD XHTML 1.0 Strict //IT "
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< html xmlns = " http://www .w3.org/1999/xhtml ">
Sposta immagine < /title> <br> <p> < contenuto meta = " text /html ; . charset = utf-8 "http - equiv =" Content-Type " /> <br> 3 <p> scrittura di codice di stile documento <br> <p> < style type = "text /css " > <br> <p> # immagine <br> <p> { <br> posizione <p> : absolute ; <p> <br> z -index : 0 ; <br> <p> visibility: visible ; <br> <p> top : 10em ; <br> <p> sinistra : 10em ; <br> larghezza <p> : 5em ; <br> altezza <p> : 5em <br> <p> } <br> <p> < /style > <br> 4 <p> Scrivi documento di codice JavaScript . <br> <p> <script type="text/javascript"> <br> <p> var x ; <br> <p> var y ; <br> <p> funzione di pausa ( ms ) per <p> { <br> <p> var data = new Date ( ) ; <br> <p> var CURDATE = null; <br> <p> do { CURDATE = new date (); } <br> <p> mentre ( CURDATE - data < ms) ; <br> <p> } <br> <p> funzione moveImage ( ) per <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 ( "immagine" ) style.top = y + "em" ; <p> <br> document.getElementById ( " immagine em " " ) style.left = x + . " ; <br> <p> } <br> <p> < /script> <br> <p> < /head> <br> 5 <p> Scrivi codice corpo del documento . <br> <p> <body> <br> <p> < img src id = "image" = " http://www.objcom.com/brianb.png " onmouseover = " moveImage ( ) " /> <br> <p> < /body> <br> <p> < /html > <br> 6 <p> Apri questo file nel browser . Spostare il puntatore del mouse sull'immagine , ed esso si sposterà in una nuova posizione sulla pagina . <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='/Programmazione/javascript-programming/90986.html' >Come nascondere da Class in JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/javascript-programming/90988.html' >Come Count Down Utilizzando 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"> Articoli Correlati </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="/Programmazione/javascript-programming/91052.html" title="Come aggiornare le variabili di sessione da JavaScript " target="_self">Come aggiornare le variabili di sessione da JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91039.html" title="Come dividere stringhe in JavaScript " target="_self">Come dividere stringhe in JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91230.html" title="Come creare una calcolatrice con Javascript " target="_self">Come creare una calcolatrice con Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91225.html" title="Come diagnosticare problemi con Javascript " target="_self">Come diagnosticare problemi con Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91221.html" title="Come creare un modulo Email gratis " target="_self">Come creare un modulo Email gratis </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91170.html" title="Come fare Gemstone sapone " target="_self">Come fare Gemstone sapone </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90751.html" title="Le variabili in Adobe Vita Cicli " target="_self">Le variabili in Adobe Vita Cicli </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90981.html" title="Come limitare una lunghezza variabile in javascript " target="_self">Come limitare una lunghezza variabile in javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91174.html" title="Tutorial su Javascript effetti di sfondo " target="_self">Tutorial su Javascript effetti di sfondo </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91117.html" title="Javascript Combobox Tutorial " target="_self">Javascript Combobox Tutorial </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">Articoli in evidenza </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="/Programmazione/php-mysql-programming/92661.html" title="Come aggiungere a include_path " target="_self">Come aggiungere a include_path </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/96558.html" title="Come aggiungere una casella di immagine in Visual Basic " target="_self">Come aggiungere una casella di immagine in Visual Basic…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87316.html" title="Come scrivere una stringa di connessione a un file di classe " target="_self">Come scrivere una stringa di connessione a un file di c…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86939.html" title="Come impostare un DataTable DataGrid per popolare TreeView " target="_self">Come impostare un DataTable DataGrid per popolare TreeV…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/86171.html" title="Come aggiungere l'illuminazione colorata In GtkRadiant " target="_self">Come aggiungere l'illuminazione colorata In GtkRadiant </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86732.html" title="Come popolare una matrice in MATLAB " target="_self">Come popolare una matrice in MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/ruby-programming/94221.html" title="Come usare le forme nascoste con Rails " target="_self">Come usare le forme nascoste con Rails </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/ruby-programming/94230.html" title="Come utilizzare il Ruby on Rails Console di query " target="_self">Come utilizzare il Ruby on Rails Console di query </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86823.html" title="Come creare più record SPF " target="_self">Come creare più record SPF </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86789.html" title="Come creare un programma COBOL " target="_self">Come creare un programma COBOL </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 © Conoscenza Informatica http://it.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> 