SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Location
    Lowton near Leigh, Cheshire, UK
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Replace existing Javascript - preferably with CSS

    I have some javascript in some of my existing pages, which flips between two images when the mouse is placed over the image - this does the job ok, but I wonder if I can do something in CSS and XHTML to aviod using javascript. I don't know Javascript and this code was given me by a friend and I don't quite feel in control when I dont know how it works. I don't like the 'onmouseover' command as I do work with low vision users who use screenreaders and many of these read out the 'onmouseover' command which is really irritating. An alternative would be preferable. I guess I could learn Javascript but I really don't have the time right now I am busy trying to learn CSS. Can anyone Help?

  2. #2
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the image rollovers are not completely distinct, you can do it with CSS.

    Here are a few examples:

    http://www.dan-schulz.com/for-others.../template.html
    http://www.pmob.co.uk/temp/navimagereplace.htm
    http://moneytreesystems.com/css/picpopup.html
    http://green-beast.com/experiments/css_map_pop.php
    http://www.cssplay.co.uk/menu/animation.html

    And yes, I do recommend combining images whenever possible:
    http://www.alistapart.com/articles/sprites
    http://magnetiq.com/2006/08/27/using-less-images/
    http://www.sitepoint.com/forums/show...85#post3975485 (I wrote this)

    For the :hover effect on non-anchor elements in IE 5/6, try this out:
    http://www.xs4all.nl/~peterned/csshover.html

    And if you're going to be using PNGs with alpha-transprency, here's the best way I've found to get them to work in IE 6:
    http://www.twinhelix.com/css/iepngfix/ (go with the 2.0 Alpha 3)

    But if the PNG fix doesn't work, then this should help you out:
    http://www.sitepoint.com/forums/show...45#post3367445 (thank CaryD for writing it).

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to switch foreground images that is part of the content, you can do it like this with css:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    /* foreground image switch */
    img { 
    	border: 0 none; /* remove the link-wrapper borders on the image */
    }
    .imageswitch { /* the container, inline or floated, will be sized by the image */
    	position: relative;
    }
    .imageswitch span { /* the container will be sized by the image */
    	position: absolute; /* take the hover image out of flow */
    	top: 0;
    	left: -999em; /* hide it way left of the viewport */
    }
    .imageswitch:hover {
    	cursor: default; /* IE6 needs something to change before handling the span */
    }
    .imageswitch:hover span {
    	left: 0; /* show the hover image covering the default image */
    }
    </style></head><body>
     
    <a href="#nogo" class="imageswitch"><img src="images/image-1a.jpg" alt="An orange"><span><img src="images/image-1b.jpg" alt="A peeled orange"></span></a>
    <a href="#nogo" class="imageswitch"><img src="images/image-2a.jpg" alt="A green tomato"><span><img src="images/image-2b.jpg" alt="A red tomato"></span></a>
     
    </body></html>

    If it is decorative images you can combine them to sprite images like Dan Schulz linked to, in fact you can stack all images of the same size on top of each other and use different vertical background positions with different classes and their hover state.

    Here is a start example with two doubled images:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    /* background image switch */
    #imageflip-1ab { 
    	display: block; 
    	width: 200px; 
    	height: 120px; 
    	background-image: url('images/image-1ab.jpg'); /* a duoble height image made of 1a and 1b stacked vertically */
    }
    #imageflip-2ab { 
    	display: block; 
    	width: 180px; 
    	height: 100px; 
    	background-image: url('images/image-2ab.jpg'); /* a duoble height image made of 2a and 2b stacked vertically */
    }
    .imageflip:hover { 
    	background-position: left bottom; /* showing the lower part of the duoble image */
    	cursor: default;
    }
    </style></head><body>
     
    <a href="#nogo" class="imageflip" id="imageflip-1ab"></a>
    <a href="#nogo" class="imageflip" id="imageflip-2ab"></a>
     
    </body></html>
    In both examples the wrapper is an active link element to work on hover without javascript also in IE6.
    Happy ADD/ADHD with Asperger's

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And yet the link would not be visible to people without images enabled (either with CSS on or off). A huge problem for accessibility.

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code to your present page:

    I understand the use of inline styling (easy changing images). To center the link I moved the size-styling.

    To work on in IE6 the href is necessary (hovers on links only). The cursor default setting hides the link and the "nogo" disables it, nobody will see it is a link.

    In this case block display is necessary on the image and it's container-link.

    I suggest to do it like this:
    Code HTML4Strict:
    <h1>Gallery 1</h1>
        <p>Move cursor over picture to see restored image.</p>
        <p class="aligncenter">
            <a href="#nogo" class="imageswitch" style="width:450px; height:300px;">
                <img src="PS-Photographic-Services1.jpg" height="300" width="450" alt="Three soldiers with bicycles. Circa 1940.">
                <span><img src="PS-Photographic-Services1a.jpg" height="300" width="450" alt="Three soldiers with bicycles. The image was printed with the top edge of print is missing, this is restored in the repaierd image."></span>
            </a>
        </p>
    Code CSS:
    /* css pic flip start*/
      /* foreground image switch */
    img {     
        display: block;
        border: 0 none; /* remove the link-wrapper borders on the image */
    }
    .imageswitch { /* the container, inline or floated, will be sized by the image */   
        display: block;
        position: relative;
        margin:auto;
    }
    .imageswitch span { /* the container will be sized by the image */
        position: absolute; /* take the hover image out of flow */
        top: 0;
        left: -999em; /* hide it way left of the viewport */
    }
    .imageswitch:hover {   
        cursor: default; /* IE6 needs something to change before handling the span */
    }
    .imageswitch:hover span {   
        left: 0; /* show the hover image covering the default image */
    }
        /* css pic flip end*/
    Happy ADD/ADHD with Asperger's


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
  •