Tabella con cornici sui riquadri

**Yuzan** · 01-07-2013, 13:15

Ciao a tutti, ho iniziato l'altro giorno a "programmare", per dire, in HTML.
Ho riscontrato subito un problema, ho provato a creare una tabella formata da 4 colonne(cioè, in teoria dovrei ancora farla), in ogni colonna ci sono delle immagini, e quando si passa con il cursore del mouse su un immagine compare una cornice che dovrebbe avere, in teoria, questo colore: #6791cb
Ovviamente quando si toglie il cursore dall'immagine dovrebbe scomparire la cornice.
Quando clicchi su un'immagine si viene reindirizzati a un'altra pagina, io per comodità ho messo come link il mio localhost.
Questo è il codice:

codice:

<SCRIPT LANGUAGE="JAVASCRIPT"> 

function prima(){
document.foto.src = "nero.jpg"; 
} 

function seconda(){ 
document.foto2.src = "nero2.jpg"; 
} 

function terza(){ 
document.foto3.src = "nero3.jpg"; 
} 

function quarta(){ 
document.foto4.src = "nero4.jpg"; 
} 

</SCRIPT> 

.imageborder { border:8px solid #6791cb; } 

<body onLoad="inizio();">
[img]nero.jpg[/img]
 

<body onLoad="inizio();"> 
[img]nero2.jpg[/img]
 

<body onLoad="inizio();"> 
[img]nero3.jpg[/img]


<body onLoad="inizio();"> 
[img]nero4.jpg[/img]

Questo è su per giù il risultato in cui speravo xD :

Vi prego aiutatemi.... sono una causa persa...

**Yuzan** · 01-07-2013, 15:27

Ok, ho quasi aggiusto da solo il codice, aggiungendo anche la tabella, però nella visualizzazione riscontro sempre degli errori, per esempio, l'immagine si sposta quando il cursore del mouse passa sopra di essa.

codice:

<title></title>
<style type="text/css">

ul#tabella {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#tabella li {
    border: 5px solid #;
    display: block;
    width: 200px;
    height: 200px;
    margin: 5px;
}
 
ul#tabella li a {
    color: #fff;
    display: block;;
    line-height: 2000px;
    width: 200px;
    height: 200px;
}
 
.active, ul#tabella li:hover {
 border: 8px solid #6791CB;
}
    </style>
    </head>
<body>
<table border="4">

<table width="350px" height="350px" border="0">
    <tr>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
   </tr>
 
   <tr>
      <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
   </tr>
   <tr>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
   </tr>
   <tr>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
       <td>
       <ul id="tabella"> [*][img]nero.jpg[/img][/list]
       </td>
   </tr>

</table>
</body></html>

Discussione: Tabella con cornici sui riquadri

Strumenti discussione

Ricerca discussione

Visualizza

Tabella con cornici sui riquadri

Permessi di invio