Grow your CSS skills. Land your dream job.

How do I onclick goto URL through css

  • # November 5, 2010 at 10:58 pm

    I am hoping i could add to my css style sheet, when a specific class div is clicked on, it will launch a url… I under stand there are things like bracket div onclick=”” etc etc. but thats in the div tag, im hoping to accomplish this through css so i can change the url and it will go across all pages.
    thanks!

    # November 5, 2010 at 11:04 pm

    You can do something like this:

    .divname a {
    display: block;
    width: ##px; height: ##px;
    }

    If you give display: block; to an anchor link, you can give it width and height for a larger clickable area.

    # November 5, 2010 at 11:08 pm

    hmm, im not sure i understand,
    what im trying to do is like this,, i know this is not right but maybe youll see what i mean

    .divname onclick {
    load-url: (http://google.com/
    }
    logiclly what i just wrote would make the div called “divname” would make the div a link. but i understand that this is not real css code as i wrote.

    # November 6, 2010 at 1:23 am

    Can’t do anything with CSS to do that. Is this something that you are thinking about putting in your header or your footer? If so you’ll want to look at using PHP includes.

    # November 6, 2010 at 3:45 am

    If you’re looking to have it in an external file so it can be applied easily across all of your pages then why not just have an external js file and put the code in there, and have it linked to from all of the pages just like your CSS file. You can’t do what you need using just CSS I’m afraid, but you can using a couple lines of js.

    # November 6, 2010 at 9:46 am

    You can’t do that with CSS, but you could use jQuery:


    That will turn any .block into a link to google.com

    # November 7, 2010 at 2:01 pm

    thanks jamy!

    # September 1, 2012 at 3:15 am

    Thanks!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".