I have tried an alternative using a class file. It will change the background image of the table cell. It works just fine, exept for the onClick part, which I really need!
Thanks for your reply Khalid Ali! I don't quite understand your question though...
I want to avoid using JavaScript because some 13% of all browsers can't read it or have it disabled.
fredmv
11-20-2003, 07:16 PM
It's perfectly fine to use JavaScript for things like this since it's an extra "eye candy" type of thing. You really don't want to be using JavaScript when it is required to do something important such as access content or navigate through the site. Again, in this case it is perfectly fine since for users without JavaScript, they simply won't see the rollover, they will, however, still be able to navigate the site just fine and access it's content. If you're still interested in non-JavaScript rollovers, check out Pixy's very clever CSS2-based no preload rollovers (http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/).
jochem
11-20-2003, 07:31 PM
I know it isn't a matter of live or die, but it would make everything just more perfect. Interesting link you sent me there. I'm too tired to check it out right now, so I'll have a closer look at it later.
</head>
<body>
<span id="rollover_preload"><a href="http://www.infinitypages.com" id="rollover"></a></span>
http://www.infinitypages.com/research/cssrollover.htm - not much to look at, as it was just a test, but the code is there, so you can see it working.
jochem
11-20-2003, 09:23 PM
I came up with a very similar solution that works as well. While the background of the cells change, a transparant image functions as the actual link.
Do you agree to this method or should I make alterations?
Cheers, Jochem :cool:
pyro
11-20-2003, 09:25 PM
With that method, you'll notice a "flicker", as the images are not preloaded...
jochem
11-20-2003, 09:54 PM
Hmm... interesting to learn that you can actually preload using CSS!
Your method works indeed, however, when using span in stead of a table cell, I cannot control the size of it. As a result, the image appears 1½ times. Setting width and height in the a#rollover part does not do the trick for me.
How do I solve this?
pyro
11-20-2003, 09:57 PM
Set the spans display to block, the same as was done for the image:
However, that still doesn't prevent the images from appearing 1½ times. Plus, they are shown BELOW eachother in stead of NEXT TO eachother. What am I doing wrong?
By the way, would it be an option to put the whole thing inside a table, as it originally was? In that case the code would be:
1) I think it will always flicker. The files are preloaded in that they are downloaded to the users cache, but that still won't remove the flicker.
2) it'll go back to ie5.0, but i', not sure before that. I think it'll work in 4 too.
3) Not without using javascript.
http://www.webdevfaqs.com/css.php#menu on this page css menu 4 uses the same technique. It also uses some hacks to get the same width in moz and ie.
jochem
11-27-2003, 02:27 PM
Thanks for your reply Dave, but I think you should download the zip first to see what I have produced. I have tried combining all the above with some new features, all by using CSS. It would be great if you'd be willing to look into that.
Cheers, Jochem :cool:
CherryAA
11-29-2003, 12:29 PM
That's brilliant! Never thought of using CSS to swap an image!
Hang on a sec, just off to completely rewrite my site .....
jochem
12-02-2003, 01:04 PM
Hi you all,
I am still hoping for someone to tell me if I did the right thing in zip-file I attached before. Looking forward to your reactions...
Cheers, Jochem :cool:
jochem
12-03-2003, 02:28 PM
I am now finalizing the script in concert with Pyro. Check back here soon for the final result!
Alltogether I can conclude that there are at least three ways to do the job.
First, there is the way posted before by Pyro. This one includes a preload.
Second, there is my way which I uploaded before as a zip-file. This one will work just fine, except for the preload, which can be left out. This version will be okay if you use small images which will load fast.
Third, there is the method of using one single background image larger that the area shown. This image will contain all images needed for the rollover effect. By positioning you determine which part is shown on a, a:hover and a:active. This is the script I am still working on.
Cheers, Jochem :cool:
jochem
12-04-2003, 09:55 AM
For the third method, check out http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ (thanks to Pyro)
Cheers, Jochem :cool:
pyro
12-04-2003, 09:58 AM
To give credit where credit is due:
fredmv was the original poster of the link: http://forums.webdeveloper.com/showthread.php?s=&postid=118148#post113602
jochem
12-04-2003, 10:41 AM
Takin' it back to the forum...
I have tried combining the first two methods. Still working on the third. The "void.gif" is a 14x13px transparent image which is the actual link.
What the script does:
- a CSS image swap;
- a CSS preload;
- a CSS boxdescription.
I realize now I should have posted this thread in the CSS section :)
I am very curious if this code is correct. Is anything missing or did I make any mistakes?
Thanks to your help I have gotten it all to work perfectly in IE6.
But for the W3C validation and perfection in Mozilla, I have taken the case to the CSS forum.
Check it out on http://forums.webdeveloper.com/showthread.php?s=&threadid=23651.
Cheers, Jochem :cool:
jochem
12-19-2003, 05:50 PM
Check out that thread. It's got the solution!
Thanks everyone who participated in both this thread and the other.
Cheers, Jochem :cool:
Daria
12-19-2003, 10:41 PM
Would it be terribly wrong to keep the javascript, yet incorporate a <noscript> element?
I do it, works just fine for me.
jochem
12-20-2003, 12:52 AM
I don't see why, because this script is cross-browser. A combination with JavaScript for extra features might be an option though.
But that was not the reason for opening this thread. This thread is about doing it without JavaScript.
Cheers, Jochem :cool:
Daria
12-20-2003, 07:39 AM
Allighty then... :)
Thomas2
12-20-2003, 10:08 AM
Originally posted by jochem
I want to avoid using JavaScript because some 13% of all browsers can't read it or have it disabled.
This is not what my statistics indicate:
I am running a Javascript/PHP page logging script for my 5 websites (a NOSCRIPT option calls the PHP script here if Javascript is disabled).
This shows that 93-97% of users have Javascript enabled.
Paul Jr
12-20-2003, 12:38 PM
Originally posted by Thomas2
This is not what my statistics indicate:
I am running a Javascript/PHP page logging script for my 5 websites (a NOSCRIPT option calls the PHP script here if Javascript is disabled).
This shows that 93-97% of users have Javascript enabled.
I believe the 13% is a web-wide statistic, individual sites may differ.
Thomas2
12-21-2003, 10:36 AM
Originally posted by Paul Jr
I believe the 13% is a web-wide statistic, individual sites may differ.
What do you mean web-wide ?
My sites are getting worldwide hits and from different audiences as well. If I count the page views of all my various sites for the last month together, I get a ratio of 7143/7410 = 96.3% Javascript enabled browsers (the statistical error for this is only +-1.2%). I have been previously tracking some of my sites by other means and the percentage has always been about the same for at least the last 2 years.
Having said this, I found indeed a reference on the web quoting a figure of 13% disabled, but either they mixed this up with Java disabled browsers, or the actual source (thecounter.com) has deliberately released wrong figures (obviously they want to keep things interesting in order to have people signing up for their service).
Anyway, I think it might be a wrong conclusion to assume that there are more CSS enabled than Javascript enabled browsers, as versions 4 of both IE and Netscape still had incomplete and very buggy implementations of CSS.
You might therefore actually be shooting yourself in the foot by using a CSS solution for something that can be done with Javascript.
Paul Jr
12-21-2003, 11:41 AM
Originally posted by Thomas2
You might therefore actually be shooting yourself in the foot by using a CSS solution for something that can be done with Javascript.
I really don't know 'bout the whole 13% or not, and frankly I don't care at the moment, since I don't know much JS anyway. But I really can't see how you could be shooting yourself in the foot using CSS for something that can be done with JS. I really, really can't see that...
Thomas2
12-21-2003, 01:27 PM
By the way, about 10% of people are surfing the net with images disabled (again according to my own statistics). This makes the Javascript vs. CSS image swap issue rather academic anyway.
jochem
12-24-2003, 06:58 AM
10%?? Whoops, that's quite a few...! Personally however, I think these people should NOT be reckonned with. They most probably have a good reason to disable images and I'm sure they will accept the consequences of it. Then there's also a very small percentage of people using a text-only browser. Just make sure your images have an alt or even a title attribute.
Users (as far as I know) disable JavaScript because of their fear of JS virusses. Now that is something to DO reckon with.
To find web-wide statistics about those 13%, go to http://www.w3schools.com/browsers/browsers_stats.asp. These are statisctics by The Counter. Thomas, are you saying these are not reliable?
Cheers and merry X-mas, Jochem :cool:
Thomas2
12-24-2003, 10:42 AM
First of all, I could only find one reference for this on thecounter.com. This is only for 1.5 days starting on the first of May (hardly what you would call a global statistics) and this gives a figure of 8 % (http://www.thecounter.com/stats/2003/May/javas.html). As mentioned, even this is higher than anything I got from my sites in the last few years (which always was below 5%) (this included actually counters from thecounter.com).
One possibilty I can see is that some people put only the NOSCRIPT option of the counter on their pages, either in order to have a shorter code, or to avoid Javascript errors if the thecounter.com site is down. Maybe some people also have moral problems with 'spying' on people's browser settings.
I personally can not imagine that 13% of people should turn off Javascript as there is no good reason to do so (I have never come across a JS virus and hardly any people would know about this possibility). The percentage of browsers incapable of Javascript is now certainly less than 5%.
On the other hand, it makes sense to turn off the images if you are on a slow dial-up connection (which still many people are) which explains my 10% value for this mentioned in my post above.
If you want to be sure however, the only solution would be to track your pages yourself in this respect. If you have access to your log files, just create some code that pulls an image from your site through Javascript and a different image through a NOSCRIPT option and you know where you stand by comparing the figures in your log file. There may also still be some free counters around that give you this information (thecounter.com is not free anymore unfortunately).
Merry Christmas,
Thomas
Paul Jr
12-24-2003, 11:56 AM
Originally posted by Thomas2
By the way, about 10% of people are surfing the net with images disabled
I'm not worried about that just yet, because the site I'm working on now only uses one image, which would not be missed if, for some reason, it was not displayed. :D
jochem
12-27-2003, 12:10 AM
What about users that have CSS disabled? Is that something one can (or would want to) do? Are there any global statistics on CSS enabled browsers? I know some older browsers don't support CSS and that IE messes it up big time sometimes unless you do it really well.
Cheers, Jochem :cool:
russell_g_1
12-30-2003, 05:16 PM
If you're just trying to make the site "accessible", then forget people that can't see stuff like image rollovers. They probably aren't essential to understanding your site, which means you don't have to make it work for everyone (as long as no-one gets thousands of errors).
If you want to test your site, take a look www.webxact.com. It's quite useful at picking up things you might otherwise miss.
jochem
12-30-2003, 05:29 PM
I DO want to make it work for everyone. That's why I want to prevent using JavaScript.
Nice link Russel. A cute addition to the W3C validator.
</head>
<body>
<span id="rollover_preload"><a href="http://www.infinitypages.com" id="rollover"></a></span>
http://www.infinitypages.com/research/cssrollover.htm - not much to look at, as it was just a test, but the code is there, so you can see it working.
After a week of fruitless searching (and extreme frustration) to find a CSS rollover that actually works, I ran across this (rather old) post. So firstly, I would like to thank you for providing a script that actually works.
My question is: What about older clients that aren't fully CSS compliant (NS 4.8 for example)? In this particular browser it throws out the rollovers completely and displays nothing in their place. Is there a way to display a stationary image in place of the CSS rollover for older clients WITHOUT using a JS Browser Detection script?
pyro
09-10-2004, 01:30 PM
Something like this will probably work, as long as you are using the @import rule (http://centricle.com/ref/css/filters/tests/import2/) to include your stylesheet:
I know I'm replying to an old thread but this regards something posted earlier on. I've used Pyro's method to do an image rollover and it works fine but basically, in different td's I have the same images rolling over which go to different web locations. The first rollover set aligns correctly but the one underneath it is shunted downwards. Both rollovers point to the same css code and I'm not sure how to fix this problem.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.