December 11, 201015 yr Hello, I have a div, about 300px by 400px and it's full of content. I want the whole div to be a clickable link to another page. The second thing I want to do is give the whole div a rollover state. I can do this easily using images, but I want the div content to be images, text, different fonts, the whole html works. I have the jQuery library plugged in, if that might help? And the whole thing must strictly pass through the validator. Any ideas would be greatly appreciated! Let me know! wibblywobbly
December 11, 201015 yr create a class, give it the width and height needed, then instead of using a div just make it a link, however you won't be able to use heading tags or paragraphs but you can use spans, so create the classes that you need for the different sized fonts and lay it out something like this in the html <a href="link" class="link" > <img src="image.gif" alt="something" /> <span class="heading"> heading </span> <span>some other text</span> </a> Then all you need to do is style the class you are using in you link to have a hover state like so: a.link:hover { style here} And the whole thing will change...if you want the two differently styled bits of text to hover different as well you could set them up like this: a.link span { normal state} a.link:hover span{ hover state} a.link span.heading { normal state} a.link:hover span.heading { hover state} Making sure that you have the span without a class before the one with a class so that the span won't overwrite what it is doing with the class. Hope this has helped a little
December 11, 201015 yr That's an interesting question. I already had a solution before I saw Dizi's solution. Mine works perfectly in Firefox but not in IE7. Mine means that you can code your div with text, images, anything, perfectly normally and it has a link layered over the top with position: absolute. Dizi's method (I added a few things) works in IE7 and Firefox but you are severely limited in your coding of the contents. See both here (Dizi's at the top, mine below) and test in Firefox (both work) then IE (find a solution to mine for IE because it uses normal coding for the content):- http://www.wickham43.com/forumposts/link-tests-div-clickable.html
December 11, 201015 yr My method works in all popular browsers including ie6 , you can also see mine working on my blog, it could have a background colour change too, I just chose to have the text change. While you are slightly limited to what you can do in regards to what tags can be used with mine, I think there is a bit more flixibility with how the text is displayed during the hoverstate. Whickham's solution isn't as flexible with that, however it is when it comes to tags that can be used. So really both have their pluses and their negatives, it just depends on what you need to do with the text as to which one you use
December 11, 201015 yr Agreed. I was struggling to get my solution to work in IE and I've given up. Dizi's solution will be OK for fairly simple content like text and images but I don't think forms, tables, lists, etc. would be coded properly within an "a" link tag and might not work.
December 12, 201015 yr Author Thank you so much to you both, For coming up with a solution and trying it out. I think lots of people are going to be interested in this thread. I've tried the Dizi solution on all the major browsers, down to IE6 and it works perfectly. It's also passed the validator on strict. Here are some things I found helpful: - Remember to give the <a> tag the css "display:block;" or it won't be any bigger than its content. - If you want entire new content to appear when the link is rolled over, then set them to "visibility:hidden;" Then in the hover state, set it to "visibility:visible;" Virtually anything can be achieved through CSS styling, so the world is your oyster. Thanks again! Here is my final test code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Large Clickable Link - For Boys! </title> <style type="text/css"> a.link{ height:270px; width:400px; background-color:#FC0; display:block; cursor:pointer; text-decoration:none; } a.link:hover{ background-color:#6CF; } a.link span.heading{ visibility:hidden; font-size:24px; } a.link:hover span.heading{ visibility:visible; display:block; } a.link span.blurb{ visibility:hidden; font-family:Verdana, Geneva, sans-serif; } a.link:hover span.blurb{ visibility:visible; display:block; } </style> </head> <body> <div id="test"> <a href="link" class="link"> <span class="heading">Here's my Title</span> <span class="blurb">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span> </a> </div> </body> </html>
Create an account or sign in to comment