PDA

View Full Version : [html] Mappa html dinamica

soundsgood
16-03-2010, 22:28
Ciao ragazzi, vorrei fare una mappa di una casa che mi rispecchia lo stato on oppure off delle luci della casa oppure degli elettrodomestici.

Stavo pensando ad una mappa html ma sarebbe statica, nel senso che se per esempio clicco sopra un elettrodomestico che è off vorrei che l'immagine dell'elettrodomestico (all'interno della mappa) cambi, facendo apparire una nuova immagine dell'elettrodomestico che indichi che il suo stato è cambiato su on. Quindi la mappa deve tenere conto dello stato di ogni singolo elettrodomestico.

In pratica mi servirebbe una mappa tale che l'immagine di ogni elettrodomestico (scelta fra due, una che indichi off e una on) viene inserita dinamicamente nella immagine (mappa) generale.

Cosa mi consigliate, soprattutto di non complicato?
nerthase
16-03-2010, 23:22
Ciao, potresti pensare di fare una cosa di questo tipo. In questo esempio, cliccando sulla parola ACCESO, questa cambia in SPENTO, e viceversa. Tu dovrai farlo semplicemente con le immagini.

Un esempio concreto di come creare pagine web dinamiche con JavaScript (http://www.nerthase.com/blog/pagine-web-dinamiche-con-javascript) è disponibile qui (http://www.nerthase.com/blog/pagine-web-dinamiche-con-javascript).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PROVA</title>
<script type="text/javascript">
function off_comp_1 ()
{
document.getElementById("componente1_acceso").style.display = "none";
document.getElementById("componente1_spento").style.display = "block";
}
function on_comp_1 ()
{
document.getElementById("componente1_spento").style.display = "none";
document.getElementById("componente1_acceso").style.display = "block";
}
</script>
</head>

<body>

<div id="componente1_acceso" style="display:none;"><a href="#" onclick="off_comp_1();">COMP_1 ACCESO</a></div>
<div id="componente1_spento" style="display:block;"><a href="#" onclick="on_comp_1();">COMP_1 SPENTO</a></div>
</body>
</html>


Scusami se mi sono dilungato, ma ci tengo a mettere il codice per intero, per non creare confusione. Vorrei inoltre specificare che le funzioni Javascript che ho usato, possono essere parametrizzate, in base al componente da accendere o spegnere. Capirai bene che adattando questo semplice esempio al tuo caso, potrai realizzare semplicemente ciò che ti serve.

Se hai bisogno di un aiuto più approfondito, puoi trovarmi su www.nerthase.com (http://www.nerthase.com/)
A presto
soundsgood
17-03-2010, 14:30
ciao, interessante la tua cosa e ti ringrazio.

Pero la questione è un'altra. Vorrei sapere come inserire in una immagine di una pagina web (il modo di renderlo dinamico mi è venuto in mente) un'altra immagine (piu piccola) sopra (ad es: sopra la mappa della casa devo inserire in un certo punto prefissato l'immagine dell'elettrodomestico), e questa seconda immagine fara da link verso il richiamo di una pagina JSP.

Per mettere sopra si puo intendere anche solamente modificare una porzione della immagine della mappa in un'altra porzione (ovvere modificare ad esempio solo un quadratino, dove devo mettererci l'immagine dell'elettrodomestico a off o quella dell'elettrodomestico a on)

attendo vostri suggerimenti
nerthase
17-03-2010, 17:27
Potresti pensare di mettere la mappa della casa, come sfondo della pagina. Poi si tratterebbe solo di inserire immagini in una pagina, e credo tu sappia farlo.

Se non vuoi usare lo sfondo di tutta la pagina, credo che si potrebbe usare anche una tabella, o addirittura un div, al quale impostare lo sfondo. Poi sempre all'interno della tabella/div inserirai le altre immagini.

Se hai problemi nella realizzazione, sai dove trovarmi... :D
A presto
nerthase
17-03-2010, 17:31
... Per mettere sopra si puo intendere anche solamente modificare una porzione della immagine della mappa in un'altra porzione (ovvere modificare ad esempio solo un quadratino, dove devo mettererci l'immagine dell'elettrodomestico a off o quella dell'elettrodomestico a on)

attendo vostri suggerimenti

Questa cosa puoi realizzarla facilmente con il metodo che ti dicevo nel primo post... dividi l'immagine della mappa in pezzetti, in base agli elettrodomestici, ed ogni pezzo, lo disegni con l'elettrodomestico acceso e spento.
Con Javascript nascondi e mostri l'immagine tra le due, che ti interessa...

A presto
soundsgood
17-03-2010, 20:57
il selezionare un'immagine oppure un'altra lo posso fare piu facilmente tramite jsp penso .. anzi diventa necessario perche diciamo cosi, devo tenere traccia su database dell'azione effettuata e del suo effetto. quindi per cambiare immagine mi conviene utilizzare codice jsp. la scelta sta su come posizionare queste immagini piccole su una immagine piu grande.. alla tua idea ci avevo pensato anche io.. devo vedere come piazzare in html immagini in punti precisi all'interno di un div o altre idee
nerthase
17-03-2010, 21:10
Per quanto riguarda JSP, non so cosa consigliarti. Un servizio di Hosting che supporti Tomcat è sempre costato troppo per le mie tasche, quindi ho fatto solo prove in locale. Per questo ti consigliavo Javascript... :D

Per quanto riguarda il posizionamento all'interno della pagina, usa i CSS, puoi specificare un posizionamento assoluto o relativo tra i vari componenti della pagina.

Se hai altri problemi, possiamo cercare di risolverli... :D
A presto