Rollover on header image

  • sdollen

    (@sdollen)


    19 years ago

    Over a year ago I read an article or a tutorial about creating a header and making a rollover.

    Here is the header I ended up creating in order to accomplish the rollover effect. I think the technique was slightly different than the sliding door technique found on listapart. But, I can’t find the article, site, tutorial where I found this originally. Anyone else ran ever ran across this? You’ll know its slightly different because it had you make your header twice the size as usual and the bottom half was the actual rollover image.

    https://www.vondollens.us/banner.jpg

    If anyone has seen this particular technique, I’d love to know where. Otherwise I guess I’ll use the sliding door from listapart.

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter sdollen

    (@sdollen)

    Guess no one else can remember or has ever ran across the site where I first saw this being used. I thought I’d bookmarked it…. oh well. I’m sure the sliding door method at AListApart will work just as well.

    Thanks anyway.

    dss

    (@dss)

    I remember the article you’re talking about… I swore it was a previous version of the article “the sliding doors of css” from ala

    But i am wrong so much I didn’t post that earlier…

    Joshua Sigar

    (@alphaoide)

    Well, you need to make the header clickable. Below is a sample markup.

    <div id="header">
    <h1><a href="https://mysite.com">My site</a></h1>
    </div>

    and the css…


    h1 {
    text-indent: -3000px; /* hide the text */
    }
    h1 a {
    display: block;
    height: 150px; /* the height of upper half img */
    background: url(my-header.gif) no-repeat 0 0; border: none;
    }
    h1 a:hover {
    background-position: 0 -150px /* shift the img upward to get lower half shown */
    }

    You just need to adjust that “+/- 150px” value

    dss

    (@dss)

    I wrote this technique up to simplify and remind myself when needed here

    Hope that helps

    Thread Starter sdollen

    (@sdollen)

    Thanks to both of you – dss, alphaoide. I appreciate your feedback and help on it. It still bugs me that I can’t remember where exactly I saw that tutorial originally though. ;p

    Thanks again you two!

    Thread Starter sdollen

    (@sdollen)

    You know what? It just hit me that the technique was a little different than just a rollover.

    Rather than the whole bottom half of the header showing when you placed your mouse over it, each individual box changed as you rolled over it.

    I may have to try and see if I can find my old header.php and old css file. That might give me some clues.

    Thanks again!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Rollover on header image’ is closed to new replies.

Tags