Film Strip Rollover Effect

[Accurax]

Ok heres what im thinking of doing.

1) in my #divleft i will nest 3 new #divbutton's (eg)

2) each of these #divbuttons will be set to a specific size.

3) an immage that is the same width but 2 x as tall will be inserted into each #div, the top half of the immage will have the "normal" state of the button & the bottom half will have the "hover" state.


I know this can be done... cos i think i remember geoff or moojoo mentioning it to me in one of my threads ages ago.

Basically how do i go about making sure the right portion of the immage is displayed at the relevant time?


**** the only other way i can think orf doing this is to swap the background of the div on rollover ....... but i cant think how that would work.

thanks for any input guys

[ukgeoff]

Whatever the size of a graphic a div will only show you as much as can fit within its specified width and height.

With that in mind, you produce the effect you are looking for by controlling the vertical offset of the image in your css code.

So for example:

Code: Select all

.normal {
   position: relative;
   top: 0;
}

The above would be the default anyway but I include it here for clarity.

.rollover {
   position: relative;
   top: 25px;
}

This assumes 50px high graphic and a button height of 25px;

[Accurax]

do i control this using #divbutton a:link & #divbutton a:hover ???

Or does it require other css identifyers?

[ukgeoff]

That should do the business.

[frinkky]

Dunno if this will help you - and i'm sure it can be simplified greatly - but heres how i've done it on my current project, it just works in the y-axis rahter than the x:

xhtml:

<div id="sidebar">
<ul id="navlist">
<li id="active1"><a href="http://www.granarydining.co.uk" id="current1"></a></li>
</ul>
<ul id="navlist1">
<li id="active2"><a href="http://www.granarydining.co.uk/about.htm" id="current2"></a></li>
</ul>
<ul id="navlist2">
<li id="active3"><a href="http://www.granarydining.co.uk/contact.htm" id="current3"></a></li>
</ul>
<ul id="navlist3">
<li id="active4"><a href="http://www.granarydining.co.uk/specials.htm" id="current4"></a></li>
</ul>
<ul id="navlist4">
<li id="active5"><a href="http://www.granarydining.co.uk/menu.htm" id="current5"></a></li>
</ul>
<ul id="navlist5">
<li id="active6"><a href="http://www.granarydining.co.uk/events.htm" id="current6"></a></li>
</ul>
<ul id="navlist6">
<li id="active7"><a href="http://www.granarydining.co.uk/meetingrooms.htm" id="current7"></a></li>
</ul>
<ul id="navlist7">
<li id="active8"><a href="http://www.granarymeetingrooms.co.uk/wherearewe.htm" id="current8"></a></li>
</ul>
</div>

And the CSS:

#navlist, #navlist1, #navlist2, #navlist3, #navlist4, #navlist5, #navlist6, #navlist7 {
margin: 0px;
Padding:0px;
list-style-type: none;
}
#navlist a, #navlist a:visited {
display: block;
width: 148px;
height: 24px;
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
}
#navlist a:hover {
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
background-position: 100% 0%;
}
#navlist1 a, #navlist1 a:visited {
display: block;
width: 148px;
height: 24px;
background-image: url(../images/about.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
}
#navlist1 a:hover {
background-image: url(../images/about.jpg);
background-repeat: no-repeat;
background-position: 100% 0%;
}
#navlist2 a, #navlist2 a:visited {
display: block;
width: 148px;
height: 24px;
background-image: url(../images/contact.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
}
#navlist2 a:hover {
background-image: url(../images/contact.jpg);
background-repeat: no-repeat;
background-position: 100% 0%;
}
#navlist3 a, #navlist3 a:visited {
display: block;
width: 148px;
height: 24px;
background-image: url(../images/specials.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
}
#navlist3 a:hover {
background-image: url(../images/specials.jpg);
background-repeat: no-repeat;
background-position: 100% 0%;
}
#navlist4 a, #navlist4 a:visited {
display: block;
width: 148px;
height: 24px;
background-image: url(../images/menu.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
}
#navlist4 a:hover {
background-image: url(../images/menu.jpg);
background-repeat: no-repeat;
background-position: 100% 0%;
}
#navlist5 a, #navlist5 a:visited {
display: block;
width: 148px;
height: 24px;
background-image: url(../images/events.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
}
#navlist5 a:hover {
background-image: url(../images/events.jpg);
background-repeat: no-repeat;
background-position: 100% 0%;
}
#navlist6 a, #navlist6 a:visited {
display: block;
width: 148px;
height: 24px;
background-image: url(../images/meetings.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
}
#navlist6 a:hover {
background-image: url(../images/meetings.jpg);
background-repeat: no-repeat;
background-position: 100% 0%;
}
#navlist7 a, #navlist7 a:visited {
display: block;
width: 148px;
height: 24px;
background-image: url(../images/where.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
}
#navlist7 a:hover {
background-image: url(../images/where.jpg);
background-repeat: no-repeat;
background-position: 100% 0%;
}

[Accurax]

That does help actually thanks..... given me a few ideas

[Accurax]

Just need to ask this quickly.

How do i make it so that the background immage is a clickable link??

Also, is it best to use <ul>..</ul> or, can i do this just with nested div tags??

[frinkky]

I believe the 'hotspot' is defined by the highlighted code which provides the size of the visible button (i've changed my nav bar to text and one background image, rather than the separate images for each button as before):

#navlist a, #navlist1 a, #navlist2 a, #navlist3 a, #navlist4 a, #navlist5 a, #navlist6 a, #navlist7 a, #navlist8 a, #navlist9 a, #navlist10 a, #navlist a:visited, #navlist1 a:visited, #navlist2 a:visited, #navlist3 a:visited, #navlist4 a:visited, #navlist5 a:visited, #navlist6 a:visited, #navlist7 a:visited, #navlist8 a:visited, #navlist9 a:visited, #navlist10 a:visited {
color:#F8D3D3;
display: block;
width: 148px;
height: 30px;
background-image: url(../images/btnbck.jpg);
background-repeat: no-repeat;
text-decoration: none;
}


As for using nested div's I think the ul, li method is preferred as it automatically defines the links as a vertical list, so if you're doing a horizontal nav bar it could be equally simple to use nested div's - but to be truthfull i don't really know for sure. Perhaps someone in the know could let us both know
#navlist a:hover, #navlist1 a:hover, #navlist2 a:hover, #navlist3 a:hover, #navlist4 a:hover, #navlist5 a:hover, #navlist6 a:hover, #navlist7 a:hover, #navlist8 a:hover, #navlist9 a:hover, #navlist10 a:hover {
color:#FFFFFF;
background-image: url(../images/btnbck.jpg);
background-repeat: no-repeat;
}

[moojoo]

doing the entire menu with list elements would be the better approach.

then you can style ul's li's, ul li ul's and ul li ul li etc etc....

[Accurax]

Originally Posted by moojoo

doing the entire menu with list elements would be the better approach.

then you can style ul's li's, ul li ul's and ul li ul li etc etc....

my main navigation system is exactly that moojoo.

This is just 3 buttons on each page linking to some php forms .... i just didnt want javascript or loads of gifs on my site... but also wanted these buttons to stand out a bit and not just be plain text.

it works perfectly now .... thanks guys