req accessible imageswaps - mouseover onfocus

Discussion in 'HTML' started by mark | r, May 6, 2005.

  1. mark | r

    mark | r Guest

    anyone got a good mouseover image swap technique that uses onmouseover and
    onfocus ?

    Mark
    mark | r, May 6, 2005
    #1
    1. Advertising

  2. On Fri, 6 May 2005 11:58:00 +0100, mark | r <> wrote:

    > anyone got a good mouseover image swap technique that uses onmouseover
    > and onfocus ?
    >


    IMO the use of onmouseover and onfocus _excludes_ 'accessible'.

    If it is a menu like thingy, it could be something like:

    markup:
    <div id="preload">
    <img src="link.png">
    <img src="visited.png">
    <img src="focus.png">
    <img src="hover.png">
    <img src="active.png">
    </div>

    <ul id="menu">
    <li><a href="foo.html">foo</a></li>
    <li><a href="bar.html">bar</a></li>
    </ul>

    styles:
    html,body {
    background:black; }

    #preload img {
    position:absolute;
    top:-1200px;
    left:-1200px;
    width:1px;
    height:1px;
    }

    ul#menu {
    position:$position;
    display:block;
    padding:0;
    border:0;
    margin:0;
    background:transparent; }

    #menu li {
    display:block;
    width:9em;
    height:1.7em;
    line-height:1.7em;
    list-style:none;
    padding:0;
    border:2px outset gray;
    margin:0 auto auto 0;
    text-align:center;}

    #menu a:link,
    #menu a:visited,
    #menu a:focus,
    #menu a:hover,
    #menu a:active {
    display:block;
    width:9em;
    height:1.7em; }

    #menu a:link {
    display:block;
    backgound:black url('link.png');
    color:yellow; }

    #menu a:visited {
    background:grey url('visited.png');
    color:white; }

    #menu a:focus {
    background:yellow url('focus.png');
    color:black; }

    #menu a:hover {
    background:eek:range url('hover.png');
    color:white; }

    #menu a:active {
    background:red url('active.png');
    color:yellow; }

    Not tested, but you get the idea. Use plain and simple (and proper) markup
    and use css to create the image swap effect.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, May 6, 2005
    #2
    1. Advertising

  3. mark | r

    Adrienne Guest

    Gazing into my crystal ball I observed "Barbara de Zoete"
    <> writing in news:eek:psqcqavcdx5vgts@zoete_b:

    > <div id="preload">
    > <img src="link.png">
    > <img src="visited.png">
    > <img src="focus.png">
    > <img src="hover.png">
    > <img src="active.png">
    > </div>
    >


    I like that preload idea a lot. Thanks.

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne, May 8, 2005
    #3
  4. On Sun, 08 May 2005 07:11:50 GMT, Adrienne <>
    wrote:

    > Gazing into my crystal ball I observed "Barbara de Zoete"
    > <> writing in news:eek:psqcqavcdx5vgts@zoete_b:
    >
    >> <div id="preload">
    >> <img src="link.png">
    >> <img src="visited.png">
    >> <img src="focus.png">
    >> <img src="hover.png">
    >> <img src="active.png">
    >> </div>
    >>

    >
    > I like that preload idea a lot. Thanks.
    >


    Thank you :) I must have stolen it somewhere, but can't remember where
    from.

    The downside of this is, that someone visiting without css capability will
    see your 'preloaded' images of course. I don't use it at this moment, but
    when I did I couldn't decide between putting the div all the way at the
    top (so the loading of the images would start immidiately, but they would
    be there in the top of my page for someone without css) or all the way
    down (so someone without css wouldn't get the images very prominently in
    view, but also the images would only start loading at the very end of the
    download of the page). Hmm, decisions decisions...

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, May 8, 2005
    #4
  5. mark | r

    Toby Inkster Guest

    Barbara de Zoete wrote:

    > The downside of this is, that someone visiting without css capability will
    > see your 'preloaded' images of course.


    height="1" width="1" alt=""

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, May 8, 2005
    #5
  6. On Sun, 08 May 2005 09:55:27 +0100, Toby Inkster
    <> wrote:

    > Barbara de Zoete wrote:
    >
    >> The downside of this is, that someone visiting without css capability
    >> will
    >> see your 'preloaded' images of course.

    >
    > height="1" width="1" alt=""
    >


    That solves that. Thank you Toby.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, May 8, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bruce barker

    Re: Checkbox and Radiobutton onfocus events

    bruce barker, Jul 23, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    1,166
    bruce barker
    Jul 23, 2003
  2. Do
    Replies:
    1
    Views:
    421
    Chris Jackson
    Nov 24, 2003
  3. =?Utf-8?B?SSBhbSBTYW0=?=

    onFocus Event Refresh

    =?Utf-8?B?SSBhbSBTYW0=?=, Apr 21, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    3,163
    Jeebu
    Apr 21, 2005
  4. Joshua
    Replies:
    8
    Views:
    6,024
    Joshua
    Sep 29, 2004
  5. Gorka
    Replies:
    1
    Views:
    1,709
    dwayne.gaddy
    Feb 25, 2009
Loading...

Share This Page