Immagine di sfondo che scorre sull' asse x e y

**MarcoFuso** · 24-02-2015, 11:23

Buongiorno,
sono nuovo vorrei un aiuto per quanto riguarda un progetto a cui sto lavorando, vorrei fare un minisito del genere:
come se una persona ha un tablet in mano con all' interno del tablet un menù e la fotocamera del tablet riprendesse un tavolo con sopra degli oggetti, quando io clicco su una voce del menù il tablet si sposta verso un altra parte del tavolo. La realizzazione che avevo pensato era un enorme immagine sfondo all' interno di un div da 1024x768 pix con attributo di visibilità hidden e poi però non so come far in modo che al click di un menù( in un altro div) l ' immagine nel div con attributo hidden possa spostarsi come voglio io.
Spero si possa fare grazie dell' attenzione

**Mich_** · 24-02-2015, 19:15

Per realizzare quello che chiedi, occorre un minimo di JS.

L'immagine di sfondo deve essere poi posizionata (background-position)

Con il JS modifichi tale posizione (per i dettagli di come usare JS per modificare i valori degli attributi CSS, possiamo sentirci nei prox giorni, quando hai relizzato la prima parte con solo CSS; oppure puoi chiedere nel forum JS)

PS: posta un po' del tuo codice: e` piu` semplice aiutarti

**Mich_** · 25-02-2015, 16:35

Grazie per l' aiuto, io di javascript so veramente 0, per ora ho solo inserito l' immagine all' interno di un div, la imposto come background image o la metto semplicemente all' interno con un <img>?

Anzitutto usa il forum correttamente. I messaggi privati sono per segnalazioni su malfunzionamenti del forum o per cose private, non per chiedere aiuto.
I post del forum sono pubblici, anche perche` la/le risposta/e al tuo problema puo` aiutare altre persone con problemi analoghi.

Le linee guida per HTML/CSS dicono che se l'immagine fa parte del contenuto va inserita con <img>, se e` un elemento decorativo va messa come sfondo.
Quindi la decisione su come inserire l'immagine la devi prendere tu in relazione al tuo problema.

Se la inserisci con <img>, devi usare due oggetti di tipo block in questo modo:

codice:

HTML:

<div id="finestra">
  <img src="..." alt="..." />
</div>

codice:

CSS:
#finestra {
  width: 1024px;
  height: 768px;
  overflow: hidden;
  position: relative;
}
#finestra img {
  display: block;
  width: ...px;        /* width e height non sono necessari: se mancano prende quelli originali dell'immagine */
  height: ...px;
  position: absolute;
  left: -200px;       /* questi due sono da definire in base alle esigenze */
  top: -150px;
}

Se invece l'immagine e` uno sfondo, devi usare il background-position, e per quello non servono spiegazioni oltre al tuo reference-manual preferito.

Intanto prova a vedere cosa succede a modificare left e top dell'immagine (oppure background position).

Poi devi pensare dove mettere i bottoni che servono per spostare l'immagine. Non so se saranno 4 (per le 4 direzioni) o come intendi fare.

Poi per inserire una riga di JS, una volta che ci sono gli elementi HTML, la cosa e` semplice.
Ma prima devi postare il codice degli elementi interessati, altrimenti diventa molto piu` complesso spiegare come fare.

**MarcoFuso** · 26-02-2015, 11:29

Ecco qui il codice che ho scritto fino ad ora:

codice:

							
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#finestra {
    width: 1024px;
    height: 758px;
    overflow: hidden;
    position: relative;
    display: inline;
    z-index: 0;
}
#finestra img {
    display: block;
    position: absolute;
    left: -1600px;       /* questi due sono da definire in base alle esigenze */
    top: -2500px;
#menu {
}
#menu{
    background: #fff;
    height: 45px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
    font-family: "kg_second_chances_sketchRg";
}

#menu ul{    
width:960px;
margin:0 auto;
height:25px;
padding-top:15px;    
}

#menu ul li{    
float:left;
height:30px;
width:200px;
padding-left:0;
list-style-type:none;
text-align:center;
}

#menu ul li a{    
color:#333;
font-weight:bold;
text-decoration:none;
}
</style>
</head>

<body>
<nav id="menu">
   <ul>
           <li><a class="home" href="#">Home</a></li>
           <li><a class="chisono" href="#">Chi sono</a></li>
           <li><a class="servizi" href="#">Strumenti</a></li>
           <li><a class="contatti" href="#">Scrivimi</a></li>
   </ul>
</nav>
<div id="finestra">
<img src="sfondo-presentazione.jpg" width="4724" height="4134" /> </div>
    
    
   


</body>
</html>

Mi trovo davanti a 2 problemi : 1 - il menù sopra non si vede, e questo riguarda il css 2- vorrei che quando clicco su una voce del menù li attributi top e left cambino a mio piacimento e questo penso riguardi js

**Mich_** · 26-02-2015, 11:58

Non hai postato il CSS dell'oggetto <nav> (che poi e` un tag che esiste solo da HTML 5, per cui non funziona in tutti i browser).
Questo impedisce di capire perche` non vedi il menu (oltre al display:inline)

finestra non puo` avere display:inline. Deve essere di tipo blocco

Mai mescolare formattazione HTML e formattazione CSS: l'interpretazione che ne fanno i browser non la controlli piu` tu.
Nel tuo caso togli width e height dall'HTML e mettili nel CSS.

Per spostare il posizionamento dell'immagine, aggiungi ad ogni voce del menu:

codice:

<li><a class="home" href="#" onclick="sposta(-1600,-2500)">Home</a></li>

dove chiaramente i valori saranno diversi in ogni voce
Poi devi dare un nome all'oggetto da spostare, quindi il tag <img> diventa:[code]<img id="mondo" src="..." alt="...">

Poi nella head del file HTML aggiungi:

codice:

<script type="javascript">
  function sposta(x,y) {
    var ogg = document.getElementById("mondo");
    ogg.style.left = x+"px";
    ogg.style.top = y+"px";
    return false;              /* questo andra` poi tolto se il menu serve anche per andare da qualche parte */  
  }
</script>

Ultima considerazione: non usare l'attributo alt nel tag <img> e` un grave errore di accessibilta` e un piccolo errore di semantica

PS: il codice JS andrebbe posizionato in un file esterno (come anche il CSS), ma per le prove e` piu` comodo usarlo interno al file HTML

**MarcoFuso** · 26-02-2015, 14:22

Ho risolto con il fatto del menù, bastava inserire al posto di display :inline; display:block come dicevi tu, nel css di finestra. Ora rimane il problema che riguarda lo spostamento, non capisco cosa ho dimenticato.
Posto il codice:

codice:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>

<script type="javascript">
  function sposta(x,y) {
    var ogg = document.getElementById("mondo");
    ogg.style.left = x+"px";
    ogg.style.top = y+"px";
    return false;              /* questo andra` poi tolto se il menu serve anche per andare da qualche parte */  
  }
</script>

<style type="text/css">
#finestra {
    width: auto;
    height: 750px;
    overflow: hidden;
    position: relative;
    display: block;
    z-index: 0;
}
#finestra img {
    display: block;
    position: absolute;
    left: -1600px;       /* questi due sono da definire in base alle esigenze */
    top: -2500px;
    width: 4724 px;
    height: 4134px;
}
#menu{
    background: #fff;
    height: 45px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
    font-family: "kg_second_chances_sketchRg";
}

#menu ul{    
width:960px;
margin:0 auto;
height:25px;
padding-top:15px;    
}

#menu ul li{    
float:left;
height:30px;
width:200px;
padding-left:0;
list-style-type:none;
text-align:center;
}

#menu ul li a{    
color:#333;
font-weight:bold;
text-decoration:none;
}
</style>
</head>

<body>
<nav id="menu">
   <ul>
           <li><a class="home" href="#" onclick="sposta(-1600,-2500)">Home</a></li>
</ul>
</nav>
<div id="finestra">
<img id="mondo" src="sfondo-presentazione.jpg" alt="descrizione che metterò in futuro">
</div>
    
   


</body>
</html>

la descrizione dell'immagine la metterò in futuro

**Mich_** · 26-02-2015, 15:37

Hai dimenticato gli altri termini del <li>.
Chiaramente se l'immagine e` in posizione (-1600, -2500) e la sposti nella stessa posizione, non la vedrai muoversi.
Come minimo metti delle posizioni diverse tra la posizione iniziale e quella finale

**MarcoFuso** · 26-02-2015, 18:16

Non si sposta lo stesso, li avevo cambiati, inoltre avevo tolto tutti gli elemtni <li> per provare con uno e capito il funzionamento ne avrei aggiunti:

codice:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>

<script type="javascript">
  function sposta(x,y) {
    var ogg = document.getElementById("mondo");
    ogg.style.left = x+"px";
    ogg.style.top = y+"px";
    return false;              /* questo andra` poi tolto se il menu serve anche per andare da qualche parte */  
  }
</script>

<style type="text/css">
#finestra {
    width: auto;
    height: 750px;
    overflow: hidden;
    position: relative;
    display: block;
    z-index: 0;
}
#finestra img {
    display: block;
    position: absolute;
    left: -1600px;       /* questi due sono da definire in base alle esigenze */
    top: -2500px;
    width: 4724 px;
    height: 4134px;
}
#menu{
    background: #fff;
    height: 45px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
    font-family: "kg_second_chances_sketchRg";
}

#menu ul{    
width:960px;
margin:0 auto;
height:25px;
padding-top:15px;    
}

#menu ul li{    
float:left;
height:30px;
width:200px;
padding-left:0;
list-style-type:none;
text-align:center;
}

#menu ul li a{    
color:#333;
font-weight:bold;
text-decoration:none;
}
</style>
</head>

<body>
<nav id="menu">
   <ul>
      <li><a class="home" href="#" onclick="sposta(-800,-800)">Home</a></li>
      <li><a class="chisiamo" href="#" onclick="sposta(-300,-500)">Chisiamo</a></li>
      <li><a class="dovesiamo" href="#" onclick="sposta(-200,-100)">Dovesiamo</a></li>
      <li><a class="contatti" href="#" onclick="sposta(-800,-800)">Contatti</a></li>
</ul>
</nav>
<div id="finestra">
<img id="mondo" src="sfondo-presentazione.jpg" alt="descrizione che metterò in futuro">
</div>
    
   


</body>
</html>

**Mich_** · 26-02-2015, 18:31

Allora un passo indietro.
Lascia stare il JS (che puo` contenere errori), e prova a vedere se cambiando le posizioni l'immagine viene visualizzata correttamente.

E poi controlla:
1. di avere il DOCTYPE corretto, altrimenti i browser interpretano come vogliono
2. che non ci siano errori di sintassi (usa i validatori - trovi i riferimenti tra i "link utili")

PS: la pagina e` publicata? Posta il link: e` piu` facile capire se si vede la pagina
la pagina non e` pubblicata? trova un sito gratuito (v. ad esempio nel regolamento del forum) e pubblicala

**MarcoFuso** · 27-02-2015, 10:54

Ecco il link:

http://fly-communication.it/areatest/fly_minisito/#

Allora il doctype è il seguente:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

se cambio i valori di top e left nel css l' immagine si sposta e la visualizza correttamente.

Discussione: Immagine di sfondo che scorre sull' asse x e y

Strumenti discussione

Ricerca discussione

Visualizza

Immagine di sfondo che scorre sull' asse x e y

Tag per questa discussione

Permessi di invio