Bisogno di fare tag in collegamenti esterni usando HTML5 e CSS3
Domanda
Sto cercando di consentire ai visitatori di fare clic su un collegamento all'interno di una tabella che utilizza le classi di animazione CSS3 ... Non riesco a ottenere l'immagine di div sfondo per diventare un link ... Vedi sotto HTML e CSS3 ...
Vorrei creare ogni <td>
in un link esterno cliccabile ...
Ho provato a circondare il <td>
con un tag <a>
... ha provato a mettere il tag <a>
all'interno del tag <td>
...
Grazie per il tuo aiuto ...
Si prega di vedere questo violino -
HTML:
<div id="partner_holder">
<table width="75%" height="100%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td class="showbox slideright"><div id="partner_holder_1"></div></td>
<td class="showbox slideright"><div id="partner_holder_2"></div></td>
</tr>
<tr>
<td class="showbox slideright"><div id="partner_holder_3"></div></td>
<td class="showbox slideright"><div id="partner_holder_4"></div></td>
</tr>
<tr>
<td class="showbox slideright"><div id="partner_holder_5"></div></td>
<td class="showbox slideright"><div id="partner_holder_6"></div></td>
</tr>
</table>
</div>
.
CSS:
#gallery_holder
{
width:90%;
margin-top:5%;
margin-left:15%;
color:white;
height:450px;
background:none;
}
#gallery_holder_1
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic1.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
.showbox {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.showbox.slideright:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
#gallery_holder_2
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic2.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
#gallery_holder_3
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic3.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
#gallery_holder_4
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic4.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
#gallery_holder_5
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic5.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
#gallery_holder_6
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic6.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
. Soluzione
Se hai solo un collegamento all'interno di ciascuno e impostare il seguente stile su di esso ottieni l'effetto desiderato.(Potresti impostare questo stile come parte di una classe CSS e quindi impostare ciascuno dei collegamenti per avere quella classe per creare le cose nerviere)
<td>
<a style="width:100%;height:100%;display:block" href="www.yourlink.com">
Link
</a>
</td>
.