SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to do rollovers...

    Hi everyone...

    I am working on my personal site at the moment which is sticking to XHTML Strict and CSS 2 for layout...

    Now I have come to a section that needs some mouse overs, on my old site I used javascript to achieve this, but am wondering if this is still the best way to achieve mouseovers now with usablity/accessability in mind...

    If a user does not have Javascript enabled it is fine if they see a static image...

    Is it possible to do this with CSS' hover feature, I am doubting it but worth checking...

    If I do indeed have to use javascript, are there any specific rules I should be looking out for when doing the rollover?

    Thanks

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yessirie, CSS can do almost anything! ;-)

    As for which is better, it's up to you I guess. Both onmouseover and onmouseout are still valid in XHTML 1.0 Strict. However, changes are likely to occur, as the W3C notes.

    So, in the end, it's all up to you (don't you just hate when you get an answer like that). :-)

    ~~Ian

  3. #3
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, whilst that "sort of" makes sense, I still cannot get my head around it...

    Unfortunately I need to sawp between 2 images entirely (actually a black and white version, and a colour version) so I am not sure how CSS can do that...

    I am thinking that maybe, I can use 2 images positioned in the same place, and have the "a.hover" attribute set one to "display:none" and then revert back on mouseout, is this possible or am I looking at this in the wrong way?

    Other than this I am not sure how to go about it, I would prefer to future-proof anything that is done now, and if mouseover and mouseout are going to be depreciated in future XHTML standards, I will try anything to avoid it now...

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Wizardx8
    Unfortunately I need to sawp between 2 images entirely (actually a black and white version, and a colour version) so I am not sure how CSS can do that...
    Just a wild thought (I'm prone to them on occasion ;-) -- you could use a a PNG like you would a mask in PS by taking advantage of the 256 level transparency feature (something like darkest [most opacity] to lightest [least opacity]). Then use CSS's :hover to apply a background image that's just the coloring (totally saturated). Hey, I know it's out there!

    For what you're thinking of, maybe something like:
    Code:
    <a id="ro1" herf="..Address.." title="This is a title">
     <img src="rollover-bw.gif" alt="This is an image"/>
    </a>
    
    <style type="css">
    a.ro1 {
     background: url(rollover-color.gif);
     height: #px;
     width: #px;
    }
    
    a.ro1:hover img {
     display: none;
    }
    </style>
    That might or might not work--I haven't tried it. ;-)

    Standards rock! :-D

    ~~Ian
    Last edited by Ian Glass; Aug 11, 2002 at 19:53.

  5. #5
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well transparent PNG function is extremely innovative, yet not really an option here, as to do that would mean the colour had to be a single shade... These are photos that go from black and white to full colour on mouse over...

    The other way didm not work either, no idea why, but a no go none the less, nothing happened on mouseover...

    Thanks a lot for the advice so far, some interesting techniques, but does anyone else have any other ideas? not really looking forward to going back to javascript... LOL

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the javascript that I use for every site which requires mouseovers.

    The script itself:
    <script language="javascript">
    <!--
    // a preloader script. Creates a new image oject for each image (the on and off states).
    if (document.images) {
    pictures_on = new Image();
    pictures_on.src = "images/pictures_on.gif";
    pictures_off = new Image();
    pictures_off.src = "images/pictures_off.gif";
    }

    // The function which performs the mouseover. Simple, elegant, sophisticated!
    function changeImages() {
    if (document.images) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
    }
    }
    }

    // -->
    </script>

    and this is how you call it:
    <a href="page.php3?page=pictures" onmouseover="changeImages('pictures', 'pictures_on')" onmouseout="changeImages('pictures', 'pictures_off')"><img src="images/pictures_off.gif" width="93" height="19" border="0" name="pictures" alt="all about ME!"></a>

    Simply duplicate those top four lines in the function for each "set" of images you want to swap. 2 lines for the "on" image and two lines for the "off" image.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Creole, is almost identical to the code I previously used... Was hoping to find a way not using javascript though, but oh well, shall have to do...

    Thanks everyone...

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might consider taking a look at http://www.zeldman.com/ . There's an issue on there that uses transparent GIFs and CSS to achieve a mouseover effect without Javascript.

    That might be what you need.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how about this:

    PHP Code:
    <a href="http://sitepointforums.com" title="blah" class="rol1">
        &
    nbsp;
    </
    a>

    <
    style type="text/css">
    a.rol1:link {
        
    background-imageurl('bwimage.jpg');
    }

    a.rol1:hover {
        
    background-imageurl('colorimage.jpg');
    }
    </
    style
    no clue if that will work...
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Location
    USA
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the most cross-browser compatible method I've come up with thus far. The only browser I've tried that this doesn't work in is Opera. I submitted a bug report to them about it, as it seems it does not properly display the background-image property on inline elements. This probably doesn't work in Netscape 4.x either, but I don't bother testing in that anymore.

    Anyway, here's what you need:

    spacer.gif: Standard one pixel transparent GIF.
    image1.gif: The initial image before rollover. For the purposes of this example we'll say the dimensions are 80x30 pixels.
    image2.gif: The image that appears on rollover. Same dimensions as above.

    And the code:

    <style type="text/css">

    a img.ro1 { background-image: url(image1.gif) }

    a:hover img.ro1 { background-image: url(image2.gif) }

    </style>

    <a href="somepage.html"><img src="spacer.gif" width="80" height="30" alt="Some Page" class="ro1" /></a>
    Hope this helps!
    Last edited by Joel; Aug 14, 2002 at 09:12.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •