Jump to content

Make Div Link


kitster79

Recommended Posts

A couple of questions...

 

1. Can someone tell me how to make an empty div tag into a link itself? I have a background image in it and I would like it to change to a different background image when hovered over. I just dont know if there is a way the entire empty div act as a button.

 

On another topic...

 

2. I have a simple text navigation as li elements. I would like the mouse to detect the link when any part of the li box (which is 100 x 30) is hovered over and not just the text itself. How is this done?

 

Thanks in advance.

 

Kit

Link to comment
Share on other sites

Oh really?

 

Falken, do you know of a way?

What's wrong with what LSW said? Use the image in the html in your division, and you can make it a link - and Listamatic has all kinds of cool navigation lists that you could look at and learn from.
Link to comment
Share on other sites

#1 and #2 look pretty closely tied together... basically, you can't make a link with just a div. However, you can set a width and height on a element, and give it "display:block" in the css, so it expands properly.

 

In the first question, you could set the background image of that element, and then have it change on hover. You could also use text indent to hide the text inside the link (this is a bit better from an accessibility standpoint, because remember that screenreaders can't understand background images):

 

 

.button a { width:100px; height:100px; display:block; text-indent:-9999px; background: url(imagehere) 0 0 no-repeat; }

.button a:hover { background: url(imagehere2) 0 0 no-repeat; }

 

(I haven't tested this code, but it should work)

 

For the second question, do the same thing as above, but set the width and height and width to whatever you want, and you may need to remove the background image... depends on how you have things set up.

 

  • link here
  •  

    Does that make sense?

    Link to comment
    Share on other sites

    Ben, for the navigation buttons, what if I want to apply the class to the entire ul so that I don't have to add individual classes to each button in the navigation. I tried this but it didnt work...

     

    #navWrapper ul a {

    width: 62px;

    background-image: url(../images/test.jpg);

    background-repeat: no-repeat;

    background-position: 0 0;

    }

    Link to comment
    Share on other sites

    Actually, scratch that. I do need different bg images for each button.

     

    However, I'm trying to apply the same thing that worked for the thumbnail button to the main navigation, but I think I'm a bit confused as i'm not having the same success as with the thumbnail buttons.

     

    I have uploaded my efforts so for...what am I doing wrong? (I only started working on the HOME button)

     

    http://vojodesign.com/proofs/PCM/web

    Link to comment
    Share on other sites

    you can't make a link with just a div

     

    You can, see the lower empty div with the border in item 3b here:-

    http://www.wickham43.net/specialeffects.php#highlightedlinks

    I used a background-color for an empty div that changes on hover and I expect background-images could be used instead. The empty div example works in IE6 provided it has a width (and a height if necessary).

     

    Edit: on second reading of Ben's solution, I think it's almost exactly the same as mine, including a way to help screen readers by having link text placed off-screen so that it doesn't show over the background-images.

    Edited by Wickham
    Link to comment
    Share on other sites

    #1 and #2 look pretty closely tied together... basically, you can't make a link with just a div. However, you can set a width and height on a element, and give it "display:block" in the css, so it expands properly.

     

    In the first question, you could set the background image of that element, and then have it change on hover. You could also use text indent to hide the text inside the link (this is a bit better from an accessibility standpoint, because remember that screenreaders can't understand background images):

     

     

    .button a { width:100px; height:100px; display:block; text-indent:-9999px; background: url(imagehere) 0 0 no-repeat; }

    .button a:hover { background: url(imagehere2) 0 0 no-repeat; }

     

    (I haven't tested this code, but it should work)

     

    For the second question, do the same thing as above, but set the width and height and width to whatever you want, and you may need to remove the background image... depends on how you have things set up.

     

  • link here
  •  

    Does that make sense?

     

    I was like - hey - that's all the code you need!? You guys may remember we did this a while back with Billy. I have my demo of it here. So I tested the code Ben (and Wickham), and while it works, it flickers bad in IE6, 7, and 8. The original posters site flickers bad in IE as well. Mine does not. I imagine it's because (in mine) the first image is on the div and not the anchor.

     

    Here - test this - use your own images of course - see if you can find a fix for it - I couldn't.

     

    
    { visibility: inherit; } Testing
    <br /><!--<br />#one a {<br />display:block;<br />height:250px;<br />width:350px;<br />background:url(../code/images/a.jpg) 0 0 no-repeat;<br />}<br />#one a:focus, #one a:hover, #one a:active{<br />background:url(../code/images/b.jpg) 0 0 no-repeat;<br />}<br />--><br />
    
    
    
    
    
    
    
    
    

    Edited by Eric
    Link to comment
    Share on other sites

    Usually, to get rid of any flicker (which is caused by forcing an extra image to load on hover), I make both the normal state and the hover state one image, and then just adjust the positioning of the background image.

     

    For example, I create one image, with the normal state in the top half, and the hover state in the bottom half. Then, I can do something like this:

     

    a { background: url(urlhere) top left no-repeat; }

    a:hover { background: url(urlhere) bottom left no-repeat; }

     

    In the case of this thread though, based on how Kit is using it, any potential flicker shouldn't matter, since there is a background image to hide it.

    Link to comment
    Share on other sites

    It's the three boxes in the middle of the page with the play button right? They flicker in IE.

     

    Good point. I thought Kit was just using it for the navigation (which doesn't appear to be fixed yet) but he is also using it for those three boxes. It flickers in Firefox too -- it's just that the rollover file takes a couple seconds to load.

    Link to comment
    Share on other sites

    Ben/Eric,

     

    FYI - I updated the HOME and ABOUT buttons with Ben's recommended fixes and they look good now.

     

    Yes, you're right Eric, the three boxes in the middle have hover states - but for me only the far left box flickers - strange.

     

    So, Ben are you now saying that your second to last post suggestions SHOULD work on fixing the flicker problem now?

    Edited by kitster79
    Link to comment
    Share on other sites

    The images will only flicker as they are downloaded for the first time. Once the images are cached by the browser, there shouldn't be any flicker.

     

    For the three boxes on the home page, if you combine the normal state and hover state into one image, with the normal state being in the top half of the image, and the hover state being in the bottom half, you could do something like this:

     

    a { background: url(urlhere) top left no-repeat; }

    a:hover { background: url(urlhere) bottom left no-repeat; }

     

    Alternatively, you could follow Eric's example, which uses two separate images. Basically, the element would have a background image which would then be removed using CSS when you hovered over it, showing the background image in the div below. It isn't complicated: http://www.visibilityinherit.com/code/linked-image-swap-example.php/PCM/web/

     

    Either way will work.

    Link to comment
    Share on other sites

    That flicker is because your on such an OLD browser... maybe it was just the Hamster powering everything, he stumbled. :D

     

    I use IE7 on Vista... course my Malamute has to power that!!!!! Things a frigging resource slug. :P

    Yes and no. The browser is old, but there are two ways to do it so that it does not flick at all. My demo for instance...

    Link to comment
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...
    ×
    ×
    • Create New...