things that make you :wtc:

Discussion in 'OT Technology' started by Leb_CRX, Oct 26, 2003.

  1. Leb_CRX

    Leb_CRX OT's resident terrorist

    Joined:
    Apr 22, 2001
    Messages:
    39,994
    Likes Received:
    0
    Location:
    Ottawa, Canada
    two days, two f'in days, I been working on a SIMPLE javascript rollover image for my new page, URL (http://www.adaccache.com/newPage/news.shtml)-what y'all think about layout? (also w3 complient;)))....and I asked on some javascript boards, no one seemed to have a good answer, some pointed to things that didnt really fix anything...I have used this script before on my other webpage, copied it word for word, just changed variable names and still NOTHING

    after going nearly bald from pulling out most of my hair, I was using a variable called links, two days, I got the crazy idea to rename it something else...tried linkss and it worked... :rant2: :rant2: :rant2: :rant2: :rant2: :rant2: :rant2:

    shit like this piss me off, but make me remember how picky computers can be
     
  2. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,925
    Likes Received:
    11
    Location:
    Los Angeles
  3. Astro

    Astro Code Monkey

    Joined:
    Mar 18, 2000
    Messages:
    2,047
    Likes Received:
    0
    Location:
    Cleveland Ohio
    I'd be curious if you could swap out the image roll overs with CSS roll overs. I think it could be done using the border settings and specifying the rest of the image as a background.
     
  4. Leb_CRX

    Leb_CRX OT's resident terrorist

    Joined:
    Apr 22, 2001
    Messages:
    39,994
    Likes Received:
    0
    Location:
    Ottawa, Canada
    good point, didnt notice that to edit it out :hs:

    it's gone now :big grin:
     
  5. Leb_CRX

    Leb_CRX OT's resident terrorist

    Joined:
    Apr 22, 2001
    Messages:
    39,994
    Likes Received:
    0
    Location:
    Ottawa, Canada
    I like :bigthumb: ....pimpin fo' sure!
     
  6. Leb_CRX

    Leb_CRX OT's resident terrorist

    Joined:
    Apr 22, 2001
    Messages:
    39,994
    Likes Received:
    0
    Location:
    Ottawa, Canada
    hardcore...but how would it be done??

    something like
    onMouseover=class="main_on"?? I can't see that working, you sure it wouldn't be like reinventing the wheel? :o
     
  7. Astro

    Astro Code Monkey

    Joined:
    Mar 18, 2000
    Messages:
    2,047
    Likes Received:
    0
    Location:
    Cleveland Ohio
    The HTML might look like this:

    Code:
    <table>
    	<tr class="nav" onMouseOver="javascript: navMenu(this, 'over')" onMouseOut="javascript: navMenu(this, 'out')">
    		<td class="navdata">
    		<a href="navmenu1.html" >Menu 1</a>
    		</td>
    	</tr>
    </table>
    
    I've done this trick at work. The HTML is pretty easy to understand. The CSS isn't too rough either.

    navdata would have a border matching your border specs (width and color):

    border:1px solid blue;
    background-image: url(/imagepath/image.gif);

    Then you create a navdata roll over state. You might name it navdataover or whatever:

    border-top:1px solid blue;
    border-right:3px solid blue;
    border-left:3px solid blue;
    border-bottom:1px solid blue;
    background-image: url(/imagepath/image.gif); /* optional to update this to a roll over image */

    You'd need to fiddle with the left/right width - I'm think you might have only used 2px wide instead. Either way, no biggie to change/update.

    At the same time, navdata would contain the text style you want to use for your link. It might be something like:

    #navdata a
    { color: white; font-family: 'Courier'; }

    And for the roll over
    #navdataover a
    { color: white; font-family: 'Courier'; font-weight: bold; }

    Gut instinct might be to just do:

    #navdata a:hover
    { color: white; font-family: 'Courier'; font-weight: bold; }

    But when the mouse is over the link, navdata will not be the style in effect (although you might put it in anyways because javascript disabled browsers should pick up on it anyways).

    With the HTML and CSS setup, here's what happens:

    User moves mouse into the nav area. The onMouseOver event gets triggered. You have JavaScript code swap out the style for all TD tags with in the row. (I have the code to do this at work - I think its about 8 or so lines to handle IE and all other browsers). The CSS gets swapped out and when that happens, the style changes. The act of the style changing will appear to be the first step of the roll over. When the user exits the nav area, the onMouseOut event is triggered. All it does is return the table row to its original state. Thus completing the mouse roll over effect with CSS.

    In theory, this should work, although I haven't played with it so there may be some initial issues to work through.

    Advantages:

    - Style is defined in your CSS file. Not in the images. Updating later on should be much easier unless you completely rebuild the site. But basically, if you want to roll out a red themed site, you update the CSS and you're done. Otherwise, you'd have to update the images in your current version (which isn't really that big of a deal). But if you want blue and red and let the user decide, you start collecting a number of images, versus keeping 2 CSS files.

    - Speed. CSS gets cached (the images get cached too, but on initial load you have X images times 2 to preload). Here, only 1 background image would be needed (for the textured background you have going). Browsers are pretty quick to swap out styles, versus juggling image loading and swapping (this is more apparent with large or a lot of roll overs)
     
  8. Astro

    Astro Code Monkey

    Joined:
    Mar 18, 2000
    Messages:
    2,047
    Likes Received:
    0
    Location:
    Cleveland Ohio
    That depends. In Leb's case, I think CSS + JavaScript can solve this problem instead of just images. The font he's using isn't anything too special from initially looking at it (a flavor of Courier on the PC or Helvitica (sp?) on a Mac). In situations where the image is more complex, it would probably make more sense to just stick with JavaScript and image roll overs (you could still use CSS, but there would be more effort involved to make it go).

    Saying you just can't do this with CSS is not being very creative. Push the limits of web technologies and cool things can happen...
     

Share This Page