html - Need to make <td> tags into external links using HTML5 and CSS3 -
I am trying to allow visitors to click on a link within a table using CSS3 animation classes ... I can not make the image of the DV background seem to be a link ... see below HTML and CSS3 ...
I can call each & Lt; Td>
would like to create a link ...
I received the & lt; Td>
to
Tags & lt; Td> Code inside the
tag> & lt; A & gt;
Thank you for your help ...
Please see this Bela -
HTML:
& lt; Div id = "partner_holder" & gt; & Lt; Table width = "75%" height = "100%" range = "1" cellpaction = "2" cellpadding = "2" & gt; & Lt; TR & gt; & Lt; Td class = "showbox slideright" & gt; & Lt; Div id = "partner_holder_1" & gt; & Lt; / Div & gt; & Lt; / Td> & Lt; Td class = "showbox slideright" & gt; & Lt; Div id = "partner_holder_2" & gt; & Lt; / Div & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td class = "showbox slideright" & gt; & Lt; Div id = "partner_holder_3" & gt; & Lt; / Div & gt; & Lt; / Td> & Lt; Td class = "showbox slideright" & gt; & Lt; Div id = "partner_holder_4" & gt; & Lt; / Div & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td class = "showbox slideright" & gt; & Lt; Div id = "partner_holder_5" & gt; & Lt; / Div & gt; & Lt; / Td> & Lt; Td class = "showbox slideright" & gt; & Lt; Div id = "partner_holder_6" & gt; & Lt; / Div & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt;
CSS:
# gallery_holder {width: 90%; Margin Top: 5%; Margin-left: 15%; White color; Height: 450px; Background: None; } # Gallery_holder_1 {width: 100%; Height: 100%; Margin top: 0%; Background: URL (../images/pic1.png); Overflow: None; Repeat Background: No Repetition; Background-shaped: 100% 100%; } .showbox {-webkit-transition: All 2s Easy; -Move infection: all 2s easily; -O-Infection: All 2s ease; Transition: All 2s ease; } .showbox.slideright: hover {-webkit-transform: scale (2); -MOZ-transform: scale (2); -o-results: scale (2); -MMS-conversion: scale (2); Consequently: scale (2); } # Gallery_holder_ {width: 100%; Height: 100%; Margin top: 0%; Background: URL (../ Images / pic2.png); Overflow: None; Repeat Background: No Repetition; Background-shaped: 100% 100%; } # Gallery_holder_3 {width: 100%; Height: 100%; Margin top: 0%; Background: URL (../images/pixel3); Overflow: None; Repeat Background: No Repetition; Background-shaped: 100% 100%; } # Gallery_holder_4 {width: 100%; Height: 100%; Margin top: 0%; Background: URL (../images/pic4.png); Overflow: None; Repeat Background: No Repetition; Background-shaped: 100% 100%; } # Gallery_holder_5 {width: 100%; Height: 100%; Margin top: 0%; Background: URL (../imagens/pixel5); Overflow: None; Repeat Background: No Repetition; Background-shaped: 100% 100%; } # Gallery_houlder_6 {width: 100%; Height: 100%; Margin top: 0%; Background: URL (../images/pic6.png); Overflow: None; Repeat Background: No Repetition; Background-shaped: 100% 100%; }
If you have a link inside each and set the following style on it Get the desired effects (you can set this style as part of the CSS class, and then set each link to that class to organize things)
Lt; Td> & Lt; One style = "width: 100%; height: 100%; display: block" href = "www.yourlink.com" & gt; Link & lt; / A & gt; & Lt; / TD & gt;
Comments
Post a Comment