req accessible imageswaps - mouseover onfocus

[mark | r]

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

Mark

 

[Barbara de Zoete]

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 {
backgroundrange 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 |
`-------------------------------------------------- --<--@ ------------'

 

[Adrienne]

Gazing into my crystal ball I observed "Barbara de Zoete"

<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.

 

[Barbara de Zoete]

Gazing into my crystal ball I observed "Barbara de Zoete"


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 |
`-------------------------------------------------- --<--@ ------------'

 

[Toby Inkster]

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

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

 

[Barbara de Zoete]

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 |
`-------------------------------------------------- --<--@ ------------'