Domanda Mappa con bootstrap

Stato
Discussione chiusa ad ulteriori risposte.
Ordina per data Ordina commenti per reazioni
Kolo93 ha detto:
Esatto, quel pezzo di codice va a cercare l'elemento nel DOM ma se glielo passo tramite parametro, in questo cosa il "this", non c'è bisogno di andare a cercarlo visto che glielo stai dando direttamente te
Clicca per espandere...

Così non funziona neppure

Codice: 
<button type="button" id="cambiopiano1d2" onfocus="sel1(pianta1d2)"  onblur="des2(pianta1d2)" class="btn">
                              Aula Magna
                        </button>
                        <button type="button" id="cambiopiano1d5" onfocus="sel3()"  onblur="des4()" class="btn">
                              Aula Magna2
                        </button>
                        <script type="text/javascript">
                             function sel1(pianta1d2) {
                             pianta1d2.style.backgroundColor = "#87779D";
                             }
                             function des2(pianta1d2) {
                             pianta1d2.style.backgroundColor = "#F00";
                             }
                           
                        </script>
 
Prova sostituendo questo
Codice: 
<button type="button" id="cambiopiano1d2" onfocus="sel1( this )"  onblur="des2( this )" class="btn">
a questo
Codice: 
<button type="button" id="cambiopiano1d2" onfocus="sel1(pianta1d2)"  onblur="des2(pianta1d2)" class="btn">
 
Sto provando con questo ma niente
Codice: 
<button type="button" id="cambiopiano1d2" class="btn">
                              Aula Magna
                        </button>
                        <button type="button" id="cambiopiano1d5" class="btn">
                              Aula Magna2
                        </button>
                        <script>
                            var x = document.getElementById("cambiopiano1d2");
                            x.addEventListener("focus", myFocusFunction, true);
                            x.addEventListener("blur", myBlurFunction, true);

                            function myFocusFunction() {
                                document.getElementById("piano1d2").style.backgroundColor = "#7a6992";
                            }

                            function myBlurFunction() {
                                document.getElementById("piano1d2").style.backgroundColor = "#fa8072";
                            }
                        </script>
 
Ok ci sono riuscito con questo =)

Codice: 
<a href="#" type="button" onfocus="focusFunction1()" onblur="blurFunction2()" id="cambiopiano1d2" class="btn">
                              Aula Magna
                        </a>
                        <a href="#" type="button" onfocus="focusFunction3()" onblur="blurFunction4()"id="cambiopiano1d5" class="btn">
                              Aula Magna2
                        </a>
                        <script>
                            function focusFunction1() {
                            document.getElementById("piano1d2").style.background = "#6c5887";
                            }

                            function blurFunction2() {
                            document.getElementById("piano1d2").style.background = "#800000";
                            }
                           
                            function focusFunction3() {
                            document.getElementById("piano1d5").style.background = "#6c5887";
                            }

                            function blurFunction4() {
                            document.getElementById("piano1d5").style.background = "#800000";
                            }
                        </script>
 
Kolo93 ha detto:
Meglio, stavo per chiederti i vari files per vedere dove stesse il problema xD
Clicca per espandere...

Il problema che ho ora è di aspetto grafico, io volevo un bottone non un link xD Poi questo ogni volta che clicco mi porta in cima alla pagina ed è una seccatura è.è
 
Se non vuoi che la visuale salga puoi fare in questo modo:
1) Assegnare a un elemento un attributo aggiuntivo: name
Codice: 
<div name="btn1"></div>
2) Assegnare all'attributo href il "#" unito al nome dell'attributo "name" utilizzato prima
Codice: 
<a  href="#btn1" ..... >Cliccami</a>
In questo modo, se clicchi su quel testo, verrai riportato nella posizione in cui si trova l'elemento che ha quel nome
 
  • Mi piace
Reazioni: Valley
Kolo93 ha detto:
Se non vuoi che la visuale salga puoi fare in questo modo:
1) Assegnare a un elemento un attributo aggiuntivo: name
Codice: 
<div name="btn1"></div>
2) Assegnare all'attributo href il "#" unito al nome dell'attributo "name" utilizzato prima
Codice: 
<a  href="#btn1" ..... >Cliccami</a>
In questo modo, se clicchi su quel testo, verrai riportato nella posizione in cui si trova l'elemento che ha quel nome
Clicca per espandere...

E' proprio come ho fatto :D
Ora provo ad inserire il collapse per i vari piani!
 
Ottimo hahaha
Però accertati di non riuscire a risolvere prima di scrivere, sembra un monologo :asd:
 
Dovresti dare a tutti gli elementi gli stessi eventi, quindi verificatosi l'evento "apri menu" tutti gli altri devono essere chiusi
 
L'evento è una cosa, quel che dici di fare quando si verifica è un'altra cosa.
Per esempio puoi mettere in un array (o vettore) gli oggetti, in questo caso i vari elementi che contengono il pulsantino per far aprire il menu, e ogni volta che uno qualsiasi di questi viene cliccato, quindi aperto, fai scorrere l'array per far chiudere quelli aperti (uso il plurale anche se è aperto solo uno di questi).
 
Kolo93 ha detto:
L'evento è una cosa, quel che dici di fare quando si verifica è un'altra cosa.
Per esempio puoi mettere in un array (o vettore) gli oggetti, in questo caso i vari elementi che contengono il pulsantino per far aprire il menu, e ogni volta che uno qualsiasi di questi viene cliccato, quindi aperto, fai scorrere l'array per far chiudere quelli aperti (uso il plurale anche se è aperto solo uno di questi).
Clicca per espandere...

Non sono un boss negli array, ci provo
 
L'uso di bootstrap è alla pari inutile, consiglio l'uso di dimensioni fisse perché cosi si va a fare l'aula uno sgabuzzino.
Perché fare mille funzioni quando ne basta semplicemente una con l'evento click e un bel attr che va ad indicare i colori?

Esempio( quello javascript mi secco scriverlo :\ )( consiglio l'uso di jQuery, molto più professionale )
HTML: 
<a href="#" data-color-focus="#000" data-color-blur="#fff"></a>

Poi se appena si clicca il colore deve rimanere "bloccato", si potrebbe benissimo usare una .class(css), però dipende se c'è un colore per ogni blocco(aula)
Servirebbe inoltre un sistema di filtraggio, sfruttando ajax sarebbe un capolavoro per piano e prof alla fine.

Addio :\
 
Valley ha detto:
Cioè?
Mi sono spiegato male scusami. Io parlo delle planimetrie (gli interni)
Clicca per espandere...
Se sono planimetrie, puoi usare svg (ora integrato in html5) o una delle n-mila librerie per la grafica 2d disponibili lato client. E' plausibile che se la planimetria e' un un formato standard ci siano dei viewer scritti in javascript gia' pronti. Per mal che vada, puoi convertire il cartaceo in un disegno vettoriale con un po' di pazienza
 
Non vuole usare le immagini perchè dice che verrebbe pesante, comunque abbiamo parlato su skype e gli ho inviato una release funzionante
 
Lui ha fatto tanti div colorati, come puoi vedere nelle foto dei commenti precedenti, che poi gestisce a parte con javascript
 
Ultima modifica:
Eccomi di ritorno dalla cresima :D

Guardo la release di kolo e vi dico, grazie a tutti!

Grazie mille @Kolo93 funziona e ho capito come hai fatto (non ne sarei stato in grado ahimè)!

Adesso procedo a fare le altre mappe e a farei colori. Vi tengo aggiornati ;D

Grazie a tutti!
 
Stato
Discussione chiusa ad ulteriori risposte.
Top Bottom
Indietro