aprire un div in un'altra pagina html

**lukephx** · 17-09-2013, 11:12

salve,
ho creato una pagina index.html molto semplice, che raffigura quattro quadrati, ognuno di colore diverso.
Vorrei sapere se c'è un modo (utilizzando html, php, javascript o altro) per fare sì che, cliccando su una di queste figure, questa venga aperta in un'altra pagina html (per esempio singleSquare.html). Quindi se, per esempio, clicco sul quadrato rosso, si deve aprire la pagina singleSquare.html raffigurante il quadrato rosso (ovviamente tale e quale a quello originale per dimensioni e altre cose, che potrei modificare con css)
Il codice della pagina index.html è questo:

codice:

<html>
    <head>
        <title>prova</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
    </head>
    <body>
        <div class="quad" style="width: 200px; height: 200px; background-color: red;"></div>
        <div class="quad" style="width: 200px; height: 200px; background-color: blue;"></div>
        <div class="quad" style="width: 200px; height: 200px; background-color: yellow;"></div>
        <div class="quad" style="width: 200px; height: 200px; background-color: black;"></div>
    </body>
</html>

**Nobody33** · 17-09-2013, 17:40

Pessima pratica usare un div come link.

Usa un normale link
<a class="quad" id="link1" href ="#"> clicca qui</a>
e con il css li dai lo stile che vuoi, tipo:

codice:

.quad{
width: 200px;
height:200px;
display: block;
}
/*qui sotto lo stile per i colori diversi dei link*/
#link1{background: green;}
#link2{background: red;}

infine racchiudi tutti i link in un elemento [list=1] oppure <ul>;

Nella nuova pagina crei un clone di quel link e pace amen.

Poi, dipende cosa ci vuoi fare realmente con questa cosa.
Non credo che ti serva solo per dei quadrati rossi e gialli

**lukephx** · 17-09-2013, 17:58

ok, modifico il codice aggiungendo il link

codice:

<html>
    <head>
        <title>prova</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
    </head>
    <body>
        <a href="SingleSquare.html">
<div class="quad" style="width: 200px; height: 200px; background-color: red;"></div>
        <div class="quad" style="width: 200px; height: 200px; background-color: blue;"></div>
        <div class="quad" style="width: 200px; height: 200px; background-color: yellow;"></div>
        <div class="quad" style="width: 200px; height: 200px; background-color: black;"></div>
    </body>
</html>

**lukephx** · 17-09-2013, 18:17

ok, modifico il codice aggiungendo il link

codice:

<html>
    <head>
        <title>prova</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
<a href="SingleSquare.html">
      <div class="quad" style="width: 200px; height: 200px; background-color: red;"></div>
</a>
<a href="SingleSquare.html">
      <div class="quad" style="width: 200px; height: 200px; background-color: blue;"></div>
</a>
<a href="SingleSquare.html">
  <div class="quad" style="width: 200px; height: 200px; background-color: yellow;"></div>
</a>
<a href="SingleSquare.html">
    <div class="quad" style="width: 200px; height: 200px; background-color: black;"></div>
</a>
    </body>
</html>

Ora, l'idea di dare un id ad ogni quadrato è buona; ma se avessi 100 quadrati? o volessi creare altre figure successivamente? dovrei avere 100 #id ognuno con proprietà diverse... il mio scopo è quello di prendere un div e "copiarlo" in un altra pagina html semplicemente cliccandoci sopra, oppure prendere le proprietà di quel div e "copiarle" in un altro div creato appositamente nell'altra pagina. Per esempio la mia pagina SingleSquare.html potrebbe essere

codice:

<html>
    <head>
        <title>SingleSquare</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="quadSelezionato"></div>
    </body>
</html>

effettivamente, piu che sui quadrati, dovrei lavorare su delle specie di cartoline: l'utente seleziona una cartolina, questa si apre in un'altra pagina e l'utente puo modificarla o spedirla a qualcuno via email... ho messo i quadrati per semplicità e leggibilità

**Nobody33** · 18-09-2013, 01:36

Allora il discorso cambia completamente.
Dovresti farti un CMS, per aggiungere le cartoline in automatico, senza doverli inserire ogni volta manualmente nel codice, perché ti incasini tutto cosi.
Allora considera il codice di prima nullo, che per giunta, è un disastro:
Hai inserito dentro il link un contenitore, il ché è abbastanza pessimo.
Io dicevo di usare SOLO i link che sono racchiusi in una lista <ul> oppure [list=1].

Discussione: aprire un div in un'altra pagina html

Strumenti discussione

Ricerca discussione

Visualizza

aprire un div in un'altra pagina html

Permessi di invio