taBrautMeirawt
New Member
I'm trying to get a link to a page working correctly when an image is clicked. On this jsFiddle you'll see three circular images. When the mouse is hovered over any of them, a background shadow image is rendered. When you click on the 'law firms' image, a short HTML page with some text should be displayed. What happens is that the link to the law firm text is rendered not as the image itself, but as a '>' character - see screenshot below. Can anyone guide me how to make the image act as the link, please? Also ensuring that the background image continues to be centred over the law firms image when the mouse is hovered over it.CSS:\[code\].center {text-align: center;}#sfimages {padding:15px;}#sfimages:hover {background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);background-repeat: no-repeat;background-position:center; }\[/code\]HTML:\[code\]<body><table style="width: 100%"> <tr> <td class="center"> <div id="sfimages"> <a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"> > <object type="image/svg+xml" data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr"> <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" /> </object> </a> </div> </td> <td class="center"> <div id="sfimages"> <object type="image/svg+xml" data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux"> <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" /> </object> </div> </td> <td class="center"> <div id="sfimages"> <object type="image/svg+xml" data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx"> <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" /> </object> </div> </td> </tr></table>\[/code\]
