Replace existing Javascript - preferably with CSS

**kryff** · Oct 8, 2008, 06:54

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?

**dtm32236** · Oct 8, 2008, 10:10

There's a bunch of ways to do this.

I like this one:
http://www.redvodkajelly.com/blog/20...age-rollovers/

But there's also
http://anekostudios.com/2006/03/10/css-image-swap/
and
http://www.projectseven.com/tutorials/css/uberlinks/

**Dan Schulz** · Oct 8, 2008, 11:20

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

**Erik J** · Oct 8, 2008, 14:44

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.

**Dan Schulz** · Oct 8, 2008, 18:37

And yet the link would not be visible to people without images enabled (either with CSS on or off). A huge problem for accessibility.

**Erik J** · Oct 29, 2008, 11:25

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*/

The SitePoint Forums have moved.

User Tag List

Thread: Replace existing Javascript - preferably with CSS

Thread Tools

Display

Replace existing Javascript - preferably with CSS

Bookmarks

Bookmarks

Posting Permissions