Topic: CSS rollover w/o javascript (Page 1 of 1)

Ok, the other day I was cruising the Asylum forums and clicked on someones homepage. They had examples of CSS rollovers(not text or backgound color, I know those) that worked like DHTML menus, when you would hover on a Link an nearby elements visibility was changed, with no javascript. Slick !! But I forgot to bookmark the page. Anybody know how this is coded?

when I know everything, will my brain
stop hurting so much when I code?

Try http://www.meyerweb.com/eric/css/edge/popups/demo.html

well, off the top of my head:

ONMOUSEOVER="getElementById('thing').style.visibility=visible" ONMOUSEOUT="getElementById('thing').style.visibility=hidden"

something like that?

the downside of this is that when the browser wars issue raises it's ugly head, nothing short of Javascript will save you... if that...




Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

Do you mean this thread?
http://www.ozoneasylum.com/Forum8/HTML/000382.html

"the most incredible feats are often accomplished by
those who have had the most incredible challenges"

petskull:

ONMOUSEOVER="getElementById('thing').style.visibility=visible" ONMOUSEOUT="getElementById('thing').style.visibility=hidden" looks suspiciously like javascript to me, nooo..... (gasp) that's DHTML manipulating that element!
Thanks, that code snippet will aid me in my pursuit of javascript mastery, but I'm also quite intrigued by the possibilities of fancy pure CSS manuvers.


pugsly:

RightOn!!!! You have my undying and eternal gratitude. That is the page I've been searching for!! I'll remember to bookmark it this time. THANKS


when I know everything, will my brain
stop hurting so much when I code?

brucew:

Didn't mean to leave you off of my ThankYou list. You must have posted while I was composing my last reply.

Yes, that is the much searched for Page, Thanks!

when I know everything, will my brain
stop hurting so much when I code?

ya know, I always thought that was CSS, haha!

I've been pouring over this site for an hour and a half... I downloaded the css sheet.. http://www.scansped.co.uk/new/index.html

how the fuck DO those rollovers work? I see no events in the HTML... nothing resembling a call anywhere...



Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

I visited that site a few minutes before reading your post and WTF was my reaction too.
Looked at the external CSS sheet and it doesn't appear to change any display or visibility properties with a " :hover" for a child attribute. I'm baffled (but then I'm not really the sharpest Crayon in the box ya know).

when I know everything, will my brain
stop hurting so much when I code?

there's a big section in Phil's stylesheet:

/*--------------Code for each link-----------*/ boo!

check that out, very much like the Meyerweb link above with the span tag

Jason

Started a FAQ on this:
http://faq.ozoneasylum.com/799/

___________________
Emps

FAQs: Emperor

ok, two things:

1- there is no: /*--------------Code for each link-----------*/ in the stylesheet, there is only: /*----------------Links Spec------------------*/ --Is this what you mean?

2- the drop-down options are indeed in a SPAN with the 'nav' class, but I can't seem to find it in the stylesheet...

what is going on? this page gets wierder the more I look at it...


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

PS: Yes there is - here is the code in full:

/*--------------Code for each link-----------*/



.box

{

background: #92B3D6;

position: relative;

width: 72px;

height: 15px;

margin-left: 1px;

border: 2px solid #082361;

font-weight: bold;

color: #254068;

float: left;

}



.nav

{

background: #92B3D6;

margin: 0;

font-family: verdana, sans-serif;

font-size: 10px;

font-weight: normal;

color: #000;

}



.links a span

{

display: none;

}



.links a

{

background: #93B4DD;

text-decoration: none;

font-weight: bold;

color: #254068;

}



.links a:visited

{

background: #93B4DD;

text-decoration: none;

font-weight: bold;

color: #800080;

}



.links a:hover span

{

background: #93B4DD;

position: absolute;

top: 15px;

left: -1px;

display: block;

width: 71px;

height: auto;

cursor: hand;

border: 2px solid #082361;

color: #254068;

font-weight: bold;

text-decoration: none;

text-align: center;

z-index: 200;

}





.links a:hover

{

background: #C3E5FF;

text-decoration: none;

color: #000;

}

and then look in the source for the relevant code:

<div class="links">



<a href="html/#.html" class="box">About<span class="nav">This Site<br />Who & Why<br />Wolves</span></a>



ETC



</div>

Its a very nice bit of coding indeed - top marks to Phil for making it work

___________________
Emps

FAQs: Emperor

well.... that's interesting.... here's the code that I see...

/*----------------Owner Operator Pages------------------*/





/*----------------Start of Main body Spec------------------*/



body       {

            background-color: #0099CC;

	    font-family: verdana, sans-serif;

            font-size: 10px;

	    color: #000; 

           }



h1         {

            font-size: 16px;

            text-decoration: underline;

            font-weight: bold;

            text-align: center;

            color: #000; 

           }



h4         {

            font-size: 12px;

            text-decoration: underline;

            font-weight: bold;

            text-align: center;

            color: #fff; 

           }



hr         {

            color: #000;

            width: 200px;

            height: 1px;

            text-align: center; 

           }



img       {

            border: 0 none; 

            padding-right: 20px; 

           }



/*----------------Start of Class & ID Spec------------------*/



#static    {

            background-color: #0099CC;

            color: #000;

            margin: 20px 5%;

           }



#header     {

             height: 100px;

	     width: 100%; 

            }  



#central   {

            margin: 10px 50px 10px 50px;

            padding: 10px;

            border: 1px solid #000;

           }



#main     {

           margin: 10px 50px 10px 50px;

	   border: 1px solid #000;

           background-color: #0099CC;

           padding-left: 10px;

           padding-right: 10px; 

          }



.push     {

           padding-bottom: 150px;

          }



ol        {

           list-style: url(../images/owner/list.jpg); 

           font-weight: normal;

          }



ul        {

           list-style: url(../images/owner/ul.jpg); 

           font-weight: normal;

          }



.credit    {

            font-weight: bold;

            text-align: right;

            color: #000;

           }



.oops      {

            display: none; 

           }



.other     {

            background-color: #0099CC;

            font-size: 10px;

            font-weight: bold;

            color: #000; 

            padding-bottom: 10px;

           }



.content   {

            font-size: 10px;

            color: #000; 

            text-align: justify;

            line-height: 14px;

            padding: 5px 10px 5px 10px;

           } 



.sidecontent  {

            font-size: 10px;

            color: #000; 

            line-height: 14px; 

            padding-left: 5px;

            }



.sidestuff {

            font-size: 10px;

            color: #000; 

            text-align: right;

            line-height: 14px; 

            padding-right: 5px;

            }



.heading   {

            font-size: 11px;

            text-decoration: underline;

	    font-weight: bold;

            padding: 5px 0px 5px 10px;

            color: #150671; 

           }



.pichead   {

            font-size: 10px;

	    font-weight: bold;

            padding: 20px 5px 5px 5px;

            color: #000;

           }



.buttons   {

            background-color: #0099CC;

            font-size: 10px;

           }



.top        {

            padding-right: 5%; 

            }



.space      {

            padding-bottom: 10px;

            }



/*----------------Links Spec------------------*/



a:link     {

            background-color: #0099CC;

            text-decoration: none; 

            color: #0007F5;

            font-weight: bold;

           } 



a:visited {

           background-color: #0099CC;

           text-decoration: none; 

           color: #C5063D;

           font-weight: bold;

          } 



a:hover   {

           background-color: #0099CC;

           text-decoration: underline; 

           color: #fff; 

           font-weight: bold; 

           }

some kind of server-side parsing?


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

PS: Thats odd - when I said that was it in full I meant the bit that did the rollovers. however, that is nothing like the styles I'm seeing. I wonder if we are even talking about the same thing - I (and JKMabry) were referring to Phil's page - specifically:
http://www.scansped.co.uk/new/css/global.css

are you looking at Eric Meyer's work perhaps?

___________________
Emps

FAQs: Emperor

Hi there I also fell in love with scanspeds rollovers, they do look great!
I took the principle and made the menu here: http://www.qm-konsult.se/ for a client.
It's all CSS and some javascript (no NS4/Opera though)

The idea is quite simple (as all the really nifty things are) when it comes to the rollovers.

First you can give a link a class that specifies that the link should be 150px wide and 20px high with a 1px border and you set the std color/font all that.
Place this absolutley or relatively according to your needs.

Give all the links that class, then you go into the link-states

/*----------------Links Spec------------------*/

a:link  {            

           background-color: #0099CC; 

           text-decoration: none;

           color: #0007F5;

           font-weight: bold;

           }



a:visited {

           background-color: #0099CC;

           text-decoration: none;

            color: #C5063D;

           font-weight: bold;

          }



 a:hover{

           background-color: #0099CC; 

          text-decoration: underline;

            color: #fff;

            font-weight: bold;

            }

And this controls the rollovers... that's it.

To create the submenus, I simply enclosed the sublinks in a div that I'm showing and hiding through js.
The interesting part was to write all of this dynamically through php as pages are added through a cms in the background... but that's another story.
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

I think that this sort of thing is going to be more and more common. The only bad thing about Eric Meyers page is that it only works in Mozilla 1+

Love Scanspeeds page and DmS's is right fine in itself.

I have started to do little "templates" on menus that use these kind of things. Hopefully I will get around to finishing my website and have them
uploaded.

Anyway, great stuff and very inspirational.

Later,
C:\


Oh, and Petskull. I did the samething you did. I was totally confused on how Phil did his page. The more I looked at it, the more I got myself confused.


~Binary is best~

[This message has been edited by CPrompt (edited 09-24-2002).]

lol...Petskull.... ....sorry to confuse you on this. Ok, you and Emps have found 2 x global.css sheets, but in different parts of the site. The one you found Pets, was written almost a couple of years ago, and it sucks big time, and needs major surgery which is what I'm playing around with offline in my site re-design at the moment.

The style sheet your looking for was written after I found Erics demo some months back, and it's tucked away in a seperate folder. I know that Emps picked up on Erics page also and wondered where the concept could be taken, I just decided that it could look a bit cooler than it did - hence the dhtml lookalikes. The one unfortunate thing in writing those rollovers was that you can't get a submenu in pure css to appear although I've tried. The only way is as dms has done in javascript but maybe one day I guess as things develop further.
One thing that's greatly different using a css only package, is that these rollovers are so damned fast.......

All credit goes to Eric for the <span> idea, I just took his intial concept and played with it (a lot)....

The url to that style sheet is here btw... http://www.scansped.co.uk/new/css/global.css
....the page (in its raw state - the first of a series of tests) is here..... http://www.scansped.co.uk/new/index.html

Hope that helps....

Phil

www.scansped.co.uk



[This message has been edited by Phil (edited 09-27-2002).]

Hi there

I've browsed some around in all your threads regarding the rollover-effect. I've chosen to use Eric Meyers way of making the effect, since I like it as simple as the code, he provides. One of my friends stumbled into a problem. First of all - a small side-note - I'm the absolute newbie @ programming css, and programming in general for that matter.

But: nevertheless, he couldn't make the roll-over effect work otherwhere than on the text itself, thus if - like Eric Meyer - you have a link in a menu (in some box) you will only see the effect, when the mouse hovers exactly over the text. My friends' solution was some trick with putting <a>'s around the <td>'s he was using in his table-layout. I use css-absolute-positioning for my layout, so I tried to provide my menuitem-ID with a "WIDTH: ??px;" (where ?? is some width, that matches the need), and the problem was solved!

Note: I use several styles/id's for one object, in this case a menu-item. In the ID "#menuitem" I've defined a width for the width of the menu itself, and the width, I described above, I put into the ID "#menuitem a".


I don't know, if this is even a trick, but since I couldn't find a solution myself in here, I thought I might post it. Hope it is of some use - otherwise you may have my newbie-ness excused!

Frederik Schøning
frederik@spacy.dk
Denmark

[This message has been edited by Madbyggeren (edited 05-15-2003).]

[This message has been edited by Madbyggeren (edited 05-15-2003).]

Kinda hard to visualize and make suggestions without the code. Got an URL?

if you want a whole box to be the link and not just the text conatined within it you need to add 'display:block;' to your css for the rollover effects.

you realise you can also do rollover images with only css, it's the way forward and is supported in all recent browsers except maybe the really obscure ones that some people for some reason see fit to use.

visit my CryoKinesis Online Gallery