Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128

    Alert in contemporanea a nuova immagine backgound

    Ciao, ho creato un messaggio di alert, ora vorrei che quando si visualizza il messaggio di alert, venga visualizzata un immagine di sfondo.

    Riesco a farlo con un colore e poi quando clicco OK si visualizza l'immagine.

    E possibile fare in modo che nello stesso tempo che si visualizza alert venga visualizzata un immagine di background, e al click su ok rimanga la stessa immagine.

    Vi mostro il codice che ho scritto.
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head><title>esercitazione funzioni e argomenti</title>
    <style type="text/css">
    body {background-image: url(immagine.jpg); background-repeat: no-repeat; background-position:
    center;}
    </style>
    <script type = "text/javascript">
    function studio(funzioni){
    alert("Stai studiando le " + funzioni); 
    }
    </script>
    
    </head>
    <body bgcolor=”#0000ff”>
    
    <script type="text/javascript">
    studio("funzioni!");
    </script>
    
    </body>
    </html>
    Grazie.

  2. #2
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,783
    sposto in js

  3. #3
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    function studio(funzioni){
    document.getElementsByTagName("body").style.backgr oundImage="url(tuaimmagine.xxxx)";
    alert("Stai studiando le " + funzioni);
    }
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128
    Ciao, grazie, non mi funziona, mi si visualizza l'immagine ma non l'avviso di alert.

    Ho tolto <body bgcolor=”#0000ff”> lasciando <body> e ho sostituito il codice che mi ai fornito al posto di - function studio(funzioni){
    alert("Stai studiando le " + funzioni);
    }

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao.
    E possibile fare in modo che nello stesso tempo che si visualizza alert venga visualizzata un immagine di background, e al click su ok rimanga la stessa immagine.
    La risposta non è così semplice come potrebbe sembrare, ci sono diverse cose da chiarire.

    Premetto che non ho idea di quale sia il tuo livello di conoscenza né quali siano i tuoi obiettivi ma mi pare di capire che sei interessato nello studio di JavaScript per cui cercherò di essere più chiaro possibile partendo da questo fatto. Perdona l'eventuale lungaggine.

    1. Quando segui dei tutorial online, in cui viene riportato del codice da copia-incollare, fai particolarmente attenzione ad apici e doppi apici, perché spesso (quando il codice viene postato su degli articoli in forum o blog) i vari apici potrebbero essere stati convertiti automaticamente con le virgolette inglesi, generalmente riconoscibili perché rimangono inclinate o curve rispetto a quelle normali. Questo è il tuo caso per quanto riguarda questa riga di codice:
      codice:
      <body bgcolor=”#0000ff”>
      Nota le virgolette, sono quelle inglesi, per cui otterresti quasi sicuramente dei problemi in fase di esecuzione.
      Andrebbe corretto in questo modo:
      codice:
      <body bgcolor="#0000ff">

    2. Quando cerchi delle guide o dei tutorial su cui studiare (in generale per qualsiasi linguaggio di programmazione) controlla che il materiale su cui stai studiando sia aggiornato e si riferisca a tecnologie odierne, soprattutto se stai apprendendo una cosa nuova e ti interessa stare al passo coi tempi. Nel caso specifico, a meno che tu non abbia scelto di proposito l'uso di XHTML, sarebbe magari più adatto utilizzare HTML5. Certo non è una regola (anzi sarebbe buono conoscerli entrambe) ma è probabilmente più utile, per te, partire da una tecnologia più attuale anche per approntarti all'uso di altre tecnologie affini, come i CSS. Nel caso specifico gli attributi presentazionali (come bgcolor) presenti ancora in XHTML (e HTML4), non sono più supportati in HTML5 ma in generale sono definiti deprecati perché il compito di gestire la presentazione di tutti gli elementi della pagina è lasciato essenzialmente ai CSS, secondo la moderna concezione del web design.

    3. Quando vai a provare dei codici (che siano copiati da tutorial o da risposte fornite dagli utenti dei forum) controlla sempre che non ci siano errori di sintassi. In genere è sempre bene verificare che non saltino fuori messaggi di errore attraverso la console web del proprio browser. La console web è uno strumento utile sia per eseguire dei debug in propri lavori, sia per studiare e capire il funzionamento di codici e programmi di terzi. Puoi aprirla sul tuo browser attraverso il menu "Strumenti" alla voce "sviluppo web" o "console web", o qualcosa del genere in base al browser che stai utilizzando, oppure premendo F12 da tastiera. Sulla scheda "console/script" (o qualcosa del genere) sarà quindi possibile vedere eventuali errori degli script in fase di esecuzione.

    4. Il codice proposto da cavicchiandrea ha due errori. Uno di trascrizione sul forum e un altro di sintassi/stesura del codice stesso .
      Non avendo utilizzato i tag di formattazione quando lo ha postato sul forum (immagino perché abbia risposto velocemente) il codice è stato spezzato automaticamente (per motivi di sicurezza, credo) quando è stato pubblicato sul forum. E' chiaro che lo spazio in "backgr oundImage" non deve esserci.
      L'altro errore (presumo per dimenticanza) riguarda l'uso della funzione getElementsByTagName() senza però specificare l'elemento 0. Tale funzione infatti restituisce un oggetto Node List, in pratica un array di elementi, per cui va indicato di prendere solo il primo (anche se quell'oggetto, di fatto, ha solo un elemento).
      Lo script dovrebbe essere scritto così:
      codice:
      document.getElementsByTagName("body")[0].style.backgroundImage="url(immagine.jpg)";
      Considera che lo script sbagliato genera un errore che blocca l'esecuzione dello script, per questo motivo non vene mostrato l'alert (puoi verificare l'errore attraverso la console web). Tanto meno dovrebbe comparire l'immagine di sfondo. Presumo che ti compaia perché hai lasciato la riga di css col background-image.

    5. Arriviamo al dunque. Ciò che vuoi fare può portare a risultati differenti per i diversi browser. Ora utilizzando il codice corretto, ad esempio su FireFox, dovrebbe funzionare come aspettato. Dovrebbe comparire l'immagine come sfondo del body (ovviamente con impostazioni di default per repeat e position) e quindi aprirti l'alert.
      Questo però è possibile che non accada su Chrome o su IE. In questi browser è probabile che l'immagine di sfondo non sia caricata, ma che l'alert appaia prima e quindi, una volta cliccato "OK" sia poi visualizzata l'immagine.
      Perché succede questo? Boh.. sarebbe da chiedere agli omini che hanno costruito tali browser. Io suppongo che si tratti semplicemente per il fatto che l'alert interrompa momentaneamente l'esecuzione dello script. Dal momento che le immagini (come tutte le altre risorse esterne) hanno un tempo di caricamento prima di essere disponibili sulla pagina, alcuni browser (vedi FF), quando si apre l'alert, lasciano andare avanti l'eventuale caricamento già avviato (prima di lanciare l'alert) e al termine visualizzano l'immagine. Altri browser (vedi CH o IE) appena si lancia l'alert interrompono il proseguimento di azioni in background per cui, anche se magari il caricamento è andato avanti, non sarà eseguito l'evento di fine caricamento e la visualizzazione dell'immagine prima che non sia chiuso l'alert.

      Ora, potrebbe anche esserci qualche soluzione per rendere il tutto crossbrowser, personalmente non ne conosco di semplici, per cui ritengo che in questo caso non ne valga la pena starci dietro. Tutt'al più potresti usare un'alert creato in JavaScript con cui hai maggiore controllo in ogni senso.

  6. #6
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128
    Ciao, si e come pensi, il mio livello e base e sono interessato allo studio del web design, javascript, html5, php, ovviamente un passo alla volta.
    Per il momento ho iniziato a studiare html di base, partire subito dal html5, penso che mi sarei perso qualcosa.

    Per ora sto facendo tutto un fai da te, sto seguendo un piccolo corso su una piattaforma senza tutorial,sai un problema di entrate e uscite, dissociazione ecc, aspettando poi il momento per formarmi con più precisione attraverso qualche scuola o con qualcuno che mi faccia fare della pratica, anche a livello solo di studio.

    Per gli elementi deprecati teoricamente ci sono, praticamente ancora non del tutto, per il fatto di capire se sono aggiornati o no, se mi può dare dare un consiglio dove verificalo, a meno che non lo faccia attraverso la console web, che di fatto non sapevo l'esistenza, proverò a imparare a conoscerla.

    No non ti devo perdonare, anzi grazie, le virgolette non le tenevo in considerazione.

    Controlla che il materiale su cui stai studiando sia aggiornato e si riferisca a tecnologie odierne, questo credo che lo possa fare sul sito http://www.w3schools.com/ o ci si puo valere di qualche strumento?

    Come browser sto utilizzando Crome e IE, sarà opportuno che provi il codice anche su altri browser.

    Questo codice e il la penultima esercitazione che devo fare, mi indicano di farlo con xhtml, fino adesso non ci sono riuscito, online trovo qualcosa ma riferito specificamente non ho trovato niente, a meno che io non faccia la ricerca sbagliata.

    Grazie per il tuo intervento, soprattutto per la spiegazione che mi ai fornito, adesso provo il codice.

    Vi aggiorno ciao ciao.

  7. #7
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128
    Ci sono riuscito, solo con Firefox, con gli altri browser si visualizza come prima.
    Funziona senza mettere repeat e position, e quello che intendevi quando parlavi di lasciarli in default, ho c'e un modo per scriverli in default?

    Due cose da chiedere:

    1) nel provare il tutto, lasciando dentro repeat e position mi dava errore che ho visualizzato sulla console di Firefox (F12), midiceva che non erano satato dichiarato la codifica dei caratteri (Ok non centrava niente con l'errore), io credo che sia questa, visto che non più il messaggio? <meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">

    2) Repeat e position servivano per centrare posizionare l'immagine, prima visualizzavo la parte centrale, adesso in questo caso devo aggiungerli alla funzione esistente ho devo crearne un'altra?

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ho l'impressione che ci siano troppe cose in ballo. Come tu stesso dici, converrebbe fare un passo alla volta.

    In questo caso siamo già abbondantemente fuori tema rispetto l'oggetto di questa discussione.

    Ad ogni modo cerco di darti qualche suggerimento per quanto hai indicato:
    Per il momento ho iniziato a studiare html di base, partire subito dal html5, penso che mi sarei perso qualcosa.
    Le differenze sostanziali stanno tra markup HTML e quello XHTML, per cui il secondo ha delle regole più rigide (essendo un derivato del markup XML).
    Il mio consiglio è comunque quello di partire già con HTML5 possibilmente affiancandolo anche col CSS. Non vedo sostanziali motivi per cui partire da una versione precedente. E' comunque buono conoscere le differenze rispetto ad XHTML.

    Per ora sto facendo tutto un fai da te, sto seguendo un piccolo corso su una piattaforma senza tutorial,sai un problema di entrate e uscite, dissociazione ecc, aspettando poi il momento per formarmi con più precisione attraverso qualche scuola o con qualcuno che mi faccia fare della pratica, anche a livello solo di studio.
    Posso consigliarti di dare intanto uno sguardo ai vari "Link utili" delle varie sezioni del forum, chiaramente in base agli argomenti di studio che man mano andrai ad affrontare. I "Link utili" li trovi come discussioni in risalto sulle diverse sezioni. Puoi cominciare con quelli della sezione CSS (clicca qui). Li ho aggiornati personalmente. Ci sono diverse guide di base per HTML-CSS, nonché HTML5 e CSS3. Prova a dare uno sguardo, troverai anche molti strumenti per poter lavorare al meglio durante lo studio e lo sviluppo dei tuoi progetti.

    Per gli elementi deprecati teoricamente ci sono, praticamente ancora non del tutto, per il fatto di capire se sono aggiornati o no, se mi può dare dare un consiglio dove verificalo, a meno che non lo faccia attraverso la console web, che di fatto non sapevo l'esistenza, proverò a imparare a conoscerla.
    La console web ti segnala degli errori sul codice ed eventuali avvertenze da tenere in considerare, oltre a metterti a disposizione vari strumenti per lo sviluppo e il debug. Ad ogni modo per attributi e proprietà HTML5 e CSS3, esistono delle specifiche, delle tabelle di compatibilità e altre risorse (che in genere trovi comunque online) per verificare al meglio il markup e tutto il codice dei tuoi progetti. Uno strumento indispensabile è il validatore (vedi tra i link utili CSS sul relativo capitolo). E' da tener presente che in HTML, dalla versione 4 in poi, tutti gli attributi presentazionali (cioè quelli che servivano esclusivamente all'impostazione grafica degli elementi) sono ormai considerati deprecati perché, come già detto, questo è lavoro riservato ai CSS. Scusa se sarò ripetitivo ma consiglio ancora di vedere i link utili in cui potrai trovare tutti gli strumenti per poter apprendere e sviluppare al meglio e approfondire vari argomenti.

    Controlla che il materiale su cui stai studiando sia aggiornato e si riferisca a tecnologie odierne, questo credo che lo possa fare sul sito http://www.w3schools.com/ o ci si puo valere di qualche strumento?
    Quello è senz'altro uno dei principali siti di riferimento dove poter reperire materiale di studio e altre importanti risorse. In genere si appoggia sugli standard dettati dal consorzio W3C (che è l'ente ufficiale che definisce gli standard dei vari linguaggi web), ma non esiste solo quel sito. Vedi ancora i link utili, troverai sicuramente molti altri siti di riferimento e svariate altre risorse.

    Come browser sto utilizzando Crome e IE, sarà opportuno che provi il codice anche su altri browser.
    Sicuramente. Inutile dilungarsi sulla questione ma, che tu sia un programmatore "artigianale" o uno sviluppatore per professione, è indispensabile testare i propri lavori sui più diffusi browser per garantire che siano fruibili al più ampio target possibile di utenza (chiaramente in base ai propri obiettivi). Anche in questo caso esistono vari strumenti (vedi i link utili).

    Questo codice e il la penultima esercitazione che devo fare, mi indicano di farlo con xhtml, fino adesso non ci sono riuscito, online trovo qualcosa ma riferito specificamente non ho trovato niente, a meno che io non faccia la ricerca sbagliata.
    Il mio consiglio: finisci con XHTML e poi passa ad HTML5. Confermo il fatto della ricerca. In linea di massima non è mai semplice cercare qualcosa di cui si conosce ben poco, anche se questo è il principale metodo per poter conoscere meglio quel qualcosa. E' normale che all'inizio si incontrino difficoltà che possono sembrare anche sciocche a chi ha già esperienza. Ad ogni modo, un punto di partenza lo trovi nelle raccolte di link utili .. quante volte l'ho scritto?!

    Ci sono riuscito, solo con Firefox, con gli altri browser si visualizza come prima.
    Chiaro, come ti ho indicato.

    Funziona senza mettere repeat e position, e quello che intendevi quando parlavi di lasciarli in default, ho c'e un modo per scriverli in default?
    No, non ho detto di lasciarli di default, ho detto che l'immagine sarebbe apparsa con quei valori di default per tali proprietà. Se non diversamente specificate, tutte le regole css restano col valore di default. Dal momento che il codice (quello proposto da cavicchiandrea) va ad impostare solo l'immagine, gli altri valori per repeat e position restano di default, cioè l'immagine risulterà ripetuta e posizionata a partire dall'angolo alto-sinistro della pagina. Tutto qui.

    1) nel provare il tutto, lasciando dentro repeat e position mi dava errore che ho visualizzato sulla console di Firefox (F12), midiceva che non erano satato dichiarato la codifica dei caratteri (Ok non centrava niente con l'errore), io credo che sia questa, visto che non più il messaggio? <meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">
    Quell'avvertenza chiaramente non c'entra nulla con le regole css ma, in qualunque caso, è comunque corretto specificare il charset della pagina.

    2) Repeat e position servivano per centrare posizionare l'immagine, prima visualizzavo la parte centrale, adesso in questo caso devo aggiungerli alla funzione esistente ho devo crearne un'altra?
    Beh, tieni conto di questo principio fondamentale: per ogni problema esistono sempre diverse soluzioni e ognuna di queste non può essere considerata, a priori, meglio o peggio delle altre. Questo lo sentirai dire spesso, soprattutto nell'ambito della programmazione, ma è giusto per dirti che ci sono svariate possibilità di intervenire per risolvere quel determinato problema.

    Ti posto 3, anzi 4, possibili interventi per il caso specifico:

    [list][*]Potresti applicare quelle regole così come hai applicato la prima (per l'immagine):
    codice:
    function studio(funzioni){
      document.getElementsByTagName("body")[0].style.backgroundImage="url(immagine.jpg)";
      document.getElementsByTagName("body")[0].style.backgroundPosition="center";
      document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat";
      alert("Stai studiando le " + funzioni); 
    }
    [*]Potresti usare una variabile per ottimizzare lo script evitando le ridondanze:
    codice:
    function studio(funzioni){
      var elemento = document.getElementsByTagName("body")[0];
      elemento.style.backgroundImage="url(immagine.jpg)";
      elemento.style.backgroundPosition="center";
      elemento.style.backgroundRepeat="no-repeat";
      alert("Stai studiando le " + funzioni); 
    }
    [*]Ancora, potresti ottimizzare il codice usando la sintassi abbreviata con la proprietà background (vedi anche tra i link utili il capitolo "6. Ottimizzazione CSS"):
    codice:
    function studio(funzioni){
      document.getElementsByTagName("body")[0].style.background="#00f url(immagine.jpg) center no-repeat";
      alert("Stai studiando le " + funzioni); 
    }
    [*]Oppure, ciò che farei personalmente io in questo caso, evitare di attribuire il css via script ma applicarlo tramite una classe.
    Ad esempio, sul tag head della pagina si avrà:
    codice:
    <style type="text/css">
      .img-fondo{
        background: #00F url(immagine.jpg) no-repeat center;
      }
    </style>
    mentre la funzione sarà:
    codice:
    function studio(funzioni){
      document.getElementsByTagName("body")[0].className="img-fondo"
      alert("Stai studiando le " + funzioni); 
    }
    Le motivazioni di una tale applicazione, rispetto alle altre, possono essere svariate, ma principalemente si tratta di tenere maggiormente separato il contenuto e l'azione da quella che è solo la presentazione, così da avere una migliore suddivisione del lavoro anche durante la fase di sviluppo. Poi chiaramente ogni cosa andrebbe valutata di caso in caso.

    Per concludere, essendoci allargati già parecchio rispetto all'argomento principale della tua richiesta, direi che hai abbastanza materiale su cui proseguire nel tuo studio. Se ritieni necessario chiedere ulteriori chiarimenti, riguardo l'oggetto della discussione (nello specifico), puoi chiaramente farlo. Se però hai altre questioni di carattere generico, per evitare che si divaghi più di quanto abbiamo fatto e ci si perda in questa discussione, sarebbe meglio aprirne eventualmente una nuova... ma non prima di aver dato uno sguardo ai link utili

    Buon proseguimento

  9. #9
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128
    Grazie, sei una persona stupenda, none e da tutti dare spiegazioni, consigli e esempi pratici, con il tuo aiuto sono riuscito a finire l'esercizio, ma più importante mi ai fatto capire delle piccole cose che mi aiuteranno tanto.

    Ti chiedo un ultimo consiglio, dopo il tuo aiuto, avevo il problema dell'immagine, lo ridimensionata e i browser la visualizzavano a tante immagini, lo risolto con i css, ho trovato la soluzione on line e prove e riprova sono riuscito.

    Si quando visualizzo l'immagine con alert si vede tutta l'immagine e un pezzo di una seconda immagine, quando faccio click su ok si vede un immagine sola per tutto lo schermo, questo con Firefox, adesso sembra andare meglio con Microsoft Edge, l'immagine si vede per tutto lo schermo sia quando c'è l'alert, sia quando vado a dare ok, che però due le buone e una no, con Firefox come ti dicevo ma non ha fatto mai cilecca.

    Non e un problema visto che è un esercitazione e secondo l'immagine che si metta avrà una visualizzazione diversa, o se si aggiunge del testo o altro, perciò per adesso va bene cosi.

    La console di Firefox non mi da errori, perciò potrebbe essere apposto, poi provo le soluzioni che mi ai dato e vedrò con mia mano la differenza, mi dici solo se c'è qualcosa che non potrebbe andare, a parte il DTD, che ho capito il tuo messaggio.

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html>
    <head>
    <title>esercitazione funzioni e argomenti</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1"> 
    
    
    <style type="text/css">
    body { height: 100%; width:100%;}
    #sfondo {position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1;}
    </style>
    
    
    
    
    <script type = "text/javascript">
    function studio(funzioni){
    document.getElementsByTagName("body")[0].style.backgroundImage="url(immagine.jpg)"; 
    alert("Stai studiando le " + funzioni);}
    </script>
    
    
    </head>
    <body>
    
    
    <script type="text/javascript">
    studio("funzioni!");
    </script>
    
    
    <img src="immagine.jpg" id="sfondo" />
    </body>
    </html>
    Ultima modifica di Creat; 11-12-2015 a 20:06 Motivo: Correzione codice

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Figurati

    Il codice css e lo script che hai postato non presentano errori di sintassi. Tuttavia il markup XHTML ha degli errori di validazione (proprio per il fatto che il DTD si riferisce ad un documento XHTML). Preferisco però lasciare a te il compito di scovarli, dal momento che hai tutti i riferimenti per utilizzare gli opportuni strumenti di verifica.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.