SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Oct 8, 2008, 06:54 #1
- Join Date
- Sep 2008
- Location
- Lowton near Leigh, Cheshire, UK
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Oct 8, 2008, 10:10 #2
- Join Date
- Feb 2008
- Location
- New Jersey, USA
- Posts
- 374
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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/
-
Oct 8, 2008, 11:20 #3
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- 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).Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 8, 2008, 14:44 #4
- 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>
Happy ADD/ADHD with Asperger's
-
Oct 8, 2008, 18:37 #5
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- 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.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 29, 2008, 11:25 #6
- 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