in un file html/javascript caricare i div presenti nel body in un file di testo e richiamarli

C

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Buongiorno ho una richiesta che per cortesia vado a porvi :

ho un file html dove c'è uno uno javascript e poi nel <body> i dati div che va a leggersi.
Vorrei porre questi div in un file esterno e farli richiamare chiaramente .

i dati div sono scritti in questo modo :

HTML: 
<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'> 
<img border='0' src='https://lh5.googleusercontent.com/-LsE783aQ5I0/TqfBKwIKwCI/AAAAAAAAUyc/NdnHrL829hE/s125/pipistrello1.gif'/></div> 
<div id='pipistrello2' style='position:absolute; z-index:61; left: -600px; width:120px; height:99px;'> 
<img border='0' src='https://lh3.googleusercontent.com/-D_51bMMtkrQ/TqfBUT9igaI/AAAAAAAAUyw/6IaF5-8LRvw/s120/pipistrello2.gif'/></div> 
<div id='pipistrello3' style='position:absolute; z-index:62; left: -700px; width:160px; height:120px;'> 
<img border='0' src='https://lh5.googleusercontent.com/-1tfPnny_b34/TqfBYeqooJI/AAAAAAAAUy4/VSS6xhiZcTQ/s160/pipistrello3.gif'/></div> 
<div id='pipistrello4' style='position:absolute; z-index:63; left: -800px; width:106px; height:85px;'> 
<img border='0' src='https://lh5.googleusercontent.com/-MEvV9HzPtOM/TqfBdsc78DI/AAAAAAAAUzA/RmL8IKmyjSU/s106/pipistrello4.gif'/></div>

è possibile farlo, mi aiutate per cortesia ? Grazie :)
 
Ciao,

Codice: 
with (document){
write("<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'>")
write("<img border='0' src='https://lh5.googleusercontent.com/-LsE783aQ5I0/TqfBKwIKwCI/AAAAAAAAUyc/NdnHrL829hE/s125/pipistrello1.gif'/></div>") 
write("<div id='pipistrello2' style='position:absolute; z-index:61; left: -600px; width:120px; height:99px;'>") 
write("<img border='0' src='https://lh3.googleusercontent.com/-D_51bMMtkrQ/TqfBUT9igaI/AAAAAAAAUyw/6IaF5-8LRvw/s120/pipistrello2.gif'/></div>") 
write("<div id='pipistrello3' style='position:absolute; z-index:62; left: -700px; width:160px; height:120px;'>") 
write("<img border='0' src='https://lh5.googleusercontent.com/-1tfPnny_b34/TqfBYeqooJI/AAAAAAAAUy4/VSS6xhiZcTQ/s160/pipistrello3.gif'/></div>") 
write("<div id='pipistrello4' style='position:absolute; z-index:63; left: -800px; width:106px; height:85px;'>") 
write("<img border='0' src='https://lh5.googleusercontent.com/-MEvV9HzPtOM/TqfBdsc78DI/AAAAAAAAUzA/RmL8IKmyjSU/s106/pipistrello4.gif'/></div>")
}

Copialo in un file di testo e rinominalo come vuoi con estenzione .js

<script type="text/javascript" src="nome_che_hai_dato.js"></script>

Valeria.
 
Ciao e grazie, chiaramente funziona alla perfezione, adesso io avevo escorgitato una cosa...
questo script chiamamolo pipistrelli fa uscire sulla pagina web appunto dei pipistrelli svolazzanti,

lo script è questo :

HTML: 
<html>
<head>

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Pipistrelli volanti nel blog
* Script originale di Virtual_Max
* Adattato da ciudadblogger.com e da www.ideepercomputeredinternet.com
***********************************************/
var vmin=2;
var vmax=5;
var vr=2;
var timer1;

           









function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else if (document.body){
pageX=iecompattest().scrollLeft;
pageW=iecompattest().offsetWidth-40;
pageY=iecompattest().scrollTop;
pageH=iecompattest().offsetHeight-20;
}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}
document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}

function pagestart(){
pipistrello1=new Chip("pipistrello1",147,168);
pipistrello2=new Chip("pipistrello2",47,68);
pipistrello3=new Chip("pipistrello3",47,68);
pipistrello4=new Chip("pipistrello4",47,68);
movechip("pipistrello1");
movechip("pipistrello2");
movechip("pipistrello3");
movechip("pipistrello4");
}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>

<style>
            #pipistrello1, #pipistrello2{
                filter:alpha(opacity=30);
                -moz-opacity: 0.3;
                opacity: 0.3;
                -khtml-opacity: 0.3;
            }
            html {
                overflow-x:hidden;
            }
        </style>


</head>

<body>
<!-- Pipistrelli volanti Inizio --> 
<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'> 
<img border='0' src='https://lh5.googleusercontent.com/-LsE783aQ5I0/TqfBKwIKwCI/AAAAAAAAUyc/NdnHrL829hE/s125/pipistrello1.gif'/></div> 
<div id='pipistrello2' style='position:absolute; z-index:61; left: -600px; width:120px; height:99px;'> 
<img border='0' src='https://lh3.googleusercontent.com/-D_51bMMtkrQ/TqfBUT9igaI/AAAAAAAAUyw/6IaF5-8LRvw/s120/pipistrello2.gif'/></div> 
<div id='pipistrello3' style='position:absolute; z-index:62; left: -700px; width:160px; height:120px;'> 
<img border='0' src='https://lh5.googleusercontent.com/-1tfPnny_b34/TqfBYeqooJI/AAAAAAAAUy4/VSS6xhiZcTQ/s160/pipistrello3.gif'/></div> 
<div id='pipistrello4' style='position:absolute; z-index:63; left: -800px; width:106px; height:85px;'> 
<img border='0' src='https://lh5.googleusercontent.com/-MEvV9HzPtOM/TqfBdsc78DI/AAAAAAAAUzA/RmL8IKmyjSU/s106/pipistrello4.gif'/></div> 
<!-- Pipistrelli volanti Fine - http://www.ideepercomputeredinternet.com  -->
</body>

</html>


adesso io l'ho diviso in due file js esterni e quindi compare in questo modo :

HTML: 
<html>
<head>


<style>
            #pipistrello1, #pipistrello2{
                filter:alpha(opacity=30);
                -moz-opacity: 0.3;
                opacity: 0.3;
                -khtml-opacity: 0.3;
            }
            html {
                overflow-x:hidden;
            }
        </style>

<script type="text/javascript" src="pipistrelli.js"></script>
</head>

<body>



<script type="text/javascript" src="pipisdiv.js"></script>
</body>

</html>

Ora ho pensato, poniamo che non voglia vari pipistrelli ma una sola di immagine che cambia ogni tot secondi ,
bene ed allora ho pensato di usare questo codice da inserire nel secondo file js :

HTML: 
<script language="JavaScript">
//<![CDATA[
            var img = new Array();
            var ran;            
            
img[0] = 'http://1.bp.blogspot.com/-BMwu3_3ATtI/UDbTGIERfsI/AAAAAAAAB14/CgFeo2S37qQ/s1600/ASBURGO.jpg';
img[1] = 'http://3.bp.blogspot.com/-kAsoDoYWSys/UDbTGAan4mI/AAAAAAAAB2A/BwrnICBjcMA/s1600/BONAPARTE.jpg';
img[2] = 'http://4.bp.blogspot.com/-xlBjvbjypMo/UDbTGEqYZvI/AAAAAAAAB18/-VWw9l562WY/s1600/BORBONE+SICILIA.jpg'; 

            
            var urlofimage = img[0];
            function random() { 
                ran = Math.floor(3 * Math.random());  
                immagine = img[ran];
            }                    
            setInterval("random()",10000);

e poi un solo div :

with (document){
write("<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'>")
write("<img border='0' src='immagine'/></div>")

e poi nel primo script e credo precisamente in questa parte del codice :

HTML: 
function pagestart(){
pipistrello1=new Chip("pipistrello1",147,168);
pipistrello2=new Chip("pipistrello2",47,68);
pipistrello3=new Chip("pipistrello3",47,68);
pipistrello4=new Chip("pipistrello4",47,68);
movechip("pipistrello1");
movechip("pipistrello2");
movechip("pipistrello3");
movechip("pipistrello4");
}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>

<style>
            #pipistrello1, #pipistrello2{
                filter:alpha(opacity=30);
                -moz-opacity: 0.3;
                opacity: 0.3;
                -khtml-opacity: 0.3;
            }
            html {
                overflow-x:hidden;
            }
        </style>


</head>
come dovrei modificare ?...
il tutto se non ti scoccia e ti toglie tempo chiaramente :)
Già ho da ringraziarti tanto... Domenico
 
Salve a tutti, io ci riprovo a fare domanda che una novità che ho escorgitato io ma che funziona in parte, allora per dirla breve ho messo nel <body> dello script il seguente codice :

HTML: 
<body>
<script type="text/javascript">
         
            var img = new Array();
            var ran;            
            
img[0] = 'http://1.bp.blogspot.com/-BMwu3_3ATtI/UDbTGIERfsI/AAAAAAAAB14/CgFeo2S37qQ/s1600/ASBURGO.jpg';
img[1] = 'http://3.bp.blogspot.com/-kAsoDoYWSys/UDbTGAan4mI/AAAAAAAAB2A/BwrnICBjcMA/s1600/BONAPARTE.jpg';
img[2] = 'http://4.bp.blogspot.com/-xlBjvbjypMo/UDbTGEqYZvI/AAAAAAAAB18/-VWw9l562WY/s1600/BORBONE+SICILIA.jpg'; 

            
           
            function random() { 
                ran = Math.floor(3 * Math.random());  
                urlofimage = img[ran];
  
                        }               
            setInterval("random()", 2000);

  with (document){ random()

write("<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'>") 
write("<img src=\""+urlofimage+"\" /></div>") 
}    

</script>

</body>

l'evento ottenuto è che si nella pagina si visualizza uno stemma ma non cambia ogni due secondi, come il setinterval non esistesse... l'unico modo con cui si cambia immagine è con l'aver richiamato la function nel with (document), ma solo aggiornando la pagina, si può ovviare a ciò ??
Grazie in anticipo per la risposta. Buon proseguimento. Domenico.
 
Ultima modifica:
Prova in questo modo:
Codice: 
var img = new Array();

img[0] = 'http://1.bp.blogspot.com/-BMwu3_3ATtI/UDbTGIERfsI/AAAAAAAAB14/CgFeo2S37qQ/s1600/ASBURGO.jpg';
img[1] = 'http://3.bp.blogspot.com/-kAsoDoYWSys/UDbTGAan4mI/AAAAAAAAB2A/BwrnICBjcMA/s1600/BONAPARTE.jpg';
img[2] = 'http://4.bp.blogspot.com/-xlBjvbjypMo/UDbTGEqYZvI/AAAAAAAAB18/-VWw9l562WY/s1600/BORBONE+SICILIA.jpg';

function random()
{
    ran = Math.floor(3 * Math.random());
    urlofimage = img[ran];
    elem = document.getElementById("pipistrello1").innerHTML = '<img src="' + urlofimage + '" />';

    setTimeout("random()", 2000);
}

random();
E inserisci il div nel documento fin dall'inizio ma vuoto, dato che non c'è motivo per cui lo debba creare Javascript.
 
Salve e grazie per avermi risposto, allora ho copiato ed incollato come mi hai postato tu e per chiarezza ecco :

HTML: 
<body>
<script type="text/javascript">
         
           var img = new Array();

img[0] = 'http://1.bp.blogspot.com/-BMwu3_3ATtI/UDbTGIERfsI/AAAAAAAAB14/CgFeo2S37qQ/s1600/ASBURGO.jpg';
img[1] = 'http://3.bp.blogspot.com/-kAsoDoYWSys/UDbTGAan4mI/AAAAAAAAB2A/BwrnICBjcMA/s1600/BONAPARTE.jpg';
img[2] = 'http://4.bp.blogspot.com/-xlBjvbjypMo/UDbTGEqYZvI/AAAAAAAAB18/-VWw9l562WY/s1600/BORBONE+SICILIA.jpg';

function random()
{
    ran = Math.floor(3 * Math.random());
    urlofimage = img[ran];
    elem = document.getElementById("pipistrello1").innerHTML = '<img src="' + urlofimage + '" />';

    setTimeout("random()", 2000);
}

random();

</script>

</body>

ma non funziona, forse è perchè non avendo compreso la parte del div vuoto ho mancato qualcosa... :(
porta un po di pazienza, non sono un esperto come vedi...
preciso solo che nell'head chiaramente c'è tutto il resto dello script, sto agendo nel body per un motivo di blog :)
 
Capitooooooooooooo e risolto.... chiedo scusa :(

bastava che facessi cosi :

HTML: 
<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'></div> 

<script type="text/javascript">
         
           var img = new Array();

img[0] = 'http://1.bp.blogspot.com/-BMwu3_3ATtI/UDbTGIERfsI/AAAAAAAAB14/CgFeo2S37qQ/s1600/ASBURGO.jpg';
img[1] = 'http://3.bp.blogspot.com/-kAsoDoYWSys/UDbTGAan4mI/AAAAAAAAB2A/BwrnICBjcMA/s1600/BONAPARTE.jpg';
img[2] = 'http://4.bp.blogspot.com/-xlBjvbjypMo/UDbTGEqYZvI/AAAAAAAAB18/-VWw9l562WY/s1600/BORBONE+SICILIA.jpg';

function random()
{
    ran = Math.floor(3 * Math.random());
    urlofimage = img[ran];
    elem = document.getElementById("pipistrello1").innerHTML = '<img src="' + urlofimage + '" />';

    setTimeout("random()", 2000);
}

random();

e adesso funziona.... spero di aver compreso bene... o no ???
 
Ma perchè poi non rispondete più :(

Cmq per correttezza posto tutto come ho completato... ho creato due file js, nel primo messo :

HTML: 
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Pipistrelli volanti nel blog
* Script originale di Virtual_Max
* Adattato da ciudadblogger.com e da www.ideepercomputeredinternet.com
***********************************************/
var vmin=2;
var vmax=5;
var vr=2;
var timer1;

           
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else if (document.body){
pageX=iecompattest().scrollLeft;
pageW=iecompattest().offsetWidth-40;
pageY=iecompattest().scrollTop;
pageH=iecompattest().offsetHeight-20;
}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}
document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}

function pagestart(){
pipistrello1=new Chip("pipistrello1",147,168);
movechip("pipistrello1");
}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>

</script>

Nel secondo file js ho incollato questo :

HTML: 
with (document){

write("<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'></div>")
} 


         
           var img = new Array();

img[0] = 'http://1.bp.blogspot.com/-BMwu3_3ATtI/UDbTGIERfsI/AAAAAAAAB14/CgFeo2S37qQ/s1600/ASBURGO.jpg';
img[1] = 'http://3.bp.blogspot.com/-kAsoDoYWSys/UDbTGAan4mI/AAAAAAAAB2A/BwrnICBjcMA/s1600/BONAPARTE.jpg';
img[2] = 'http://4.bp.blogspot.com/-xlBjvbjypMo/UDbTGEqYZvI/AAAAAAAAB18/-VWw9l562WY/s1600/BORBONE+SICILIA.jpg';

function random()
{
    ran = Math.floor(3 * Math.random());
    urlofimage = img[ran];
    elem = document.getElementById("pipistrello1").innerHTML = '<img src="' + urlofimage + '" />';

    setTimeout("random()", 2000);
}

random();

e poi ho modificato il file html in questo modo :

HTML: 
<html>
<head>


<style>
            #pipistrello1{
                filter:alpha(opacity=30);
                -moz-opacity: 0.3;
                opacity: 0.3;
                -khtml-opacity: 0.3;
            }
            html {
                overflow-x:hidden;
            }
        </style>

<script type="text/javascript" src="https://.............................stemmi.js"></script>


</head>

<body>


<script type="text/javascript" src="https://.......................divbody.js"></script>


</body>

</html>

E funziona tutto benissimo. Grazie sempre per la vostra disponibilità.

Vorrei solo sapere se c'è un corso di java molto completo e che non faccia il classico esempio di " hello .. " , un qualcosa che insegni con tanti esempi ma illustri di tutto.... Buon Sabato. :)
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

T
[Javascript] Richiamare un file.js (iframe) in html
Risposte
1
Visite
2K
Javascript
criric
criric
C
File html con procedure javascript per creare effetto libro da sfogliare
Risposte
9
Visite
7K
Javascript
cavaliere123
C
C
inserire ora e data in file html generato da javascript
Risposte
5
Visite
5K
Javascript
lukeonweb
lukeonweb
G
caricare file midi esterni tramite javascript inserito nella pagina html generata con
Risposte
0
Visite
2K
Flash
giulien
G
L
problema collegamento file css con html
Risposte
1
Visite
1K
HTML e CSS
WEBLEADERS
W
K
File audio in html, chi mi può aiutare?
Risposte
0
Visite
1K
HTML e CSS
K5$
K
K
  • Bloccata
Aiuto con file audio in html
Risposte
1
Visite
1K
HTML e CSS
Max 1
Max 1
Antonio67
Lanciare file shell bash da html
Risposte
2
Visite
2K
HTML e CSS
linoma
L
L
  • Bloccata
Ricezione dei dati su file php da modulo html
Risposte
6
Visite
2K
PHP
lisagiacob
L
W
  • Bloccata
visualizzare solo file html e sottocartelle di una cartella
Risposte
1
Visite
1K
PHP
Max 1
Max 1
N
Script elenco file HTML
Risposte
5
Visite
3K
HTML e CSS
Rikk73
Rikk73
V
Servizio design pagina web e download in self contained html file
Risposte
1
Visite
2K
Discussioni Varie
Giovaweb
Giovaweb
napuleone
[HTML] type="file" inserire path di partenza
Risposte
4
Visite
2K
HTML e CSS
napuleone
napuleone
F
[PHP] Importare file CSV in HTML
Risposte
12
Visite
3K
PHP
macus_adi
macus_adi
E
[HTML] non apre link a file locale ma se lo imposto su barra indirizzi lo apre
Risposte
3
Visite
3K
HTML e CSS
enzo14
E
G
Campo HTML input file con jQuery
Risposte
0
Visite
2K
jQuery
Gian72Luca
G
F
[PHP] Importare file CSV in HTML
Risposte
3
Visite
3K
PHP
macus_adi
macus_adi
C
  • Bloccata
[PHP] Pagina html che legge file txt
Risposte
41
Visite
9K
PHP
Max 1
Max 1
F
[PHP] [HTML] File legato ad action in un form
Risposte
1
Visite
1K
PHP
Tommy03
Tommy03
bubino8
[HTML] <input type="file"> Testo a scelta
Risposte
3
Visite
5K
HTML e CSS
Max 1
Max 1
Alto Basso