Image swap without using JavaScript

@jochemNov 20.2003

I am trying to create an image swap without using JavaScript. Can anyone help to get this code to work? Thanx a million!

[code] <a href=”MyFile.htm” target=”Main” onmouseover=”01.src=’IMG/imageA.gif'”; onmouseout =”01.src=’IMG/imageB.gif'”; onclick =”01.src=’IMG/imageA.gif'”> <img name=”01″ src=”IMG/imageA.gif'” border=”0″></a> [/code]

Cheers, Jochem ?

to post a comment

HTML

40 Comments(s) _↴

@jochemauthorNov 20.2003 — #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!

<i>
 </i>&lt;style type="text/css"&gt;
 .01_on  {background-image:url("IMG/imageA.gif");}
 .01_off {background-image:url("IMG/imageB.gif");}
 &lt;/style&gt;
 
 &lt;td class="01_off"
 onmouseover="this.className='02_on'"
 onmouseout ="this.className='02_off'"
 onclick    ="this.className='02_on'"&gt;
 &lt;a href="MyFile.htm" target="Main"&gt;
 &lt;img src="IMG/Void.gif" border="0"&gt;&lt;/a&gt;&lt;/td&gt;

Cheers, Jochem ?

@Khalid_AliNov 20.2003 — #[i]Originally posted by jochem [/i]

[B]image swap without using JavaScript. [/B][/QUOTE]

Will you care to elaborate the event calls you are making like

onmouseover,out and click whats that if not JavaScript??????

@jochemauthorNov 21.2003 — #Here's another unsuccessfull try:

<i>
 </i>&lt;td&gt;&lt;a href="MyFile.htm" target="Main"
 onmouseover="document.images['01'].src='IMG/imageA.gif'";
 onmouseout ="document.images['01'].src='IMG/imageB.gif'";
 onclick    ="document.images['01'].src='IMG/imageA.gif'"&gt;
 &lt;img name="01" src="IMG/imageB.gif" border="0"&gt;&lt;/a&gt;&lt;/td&gt;

Cheers, Jochem ?

@jochemauthorNov 21.2003 — #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.

@fredmvNov 21.2003 — #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 [url=http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/]CSS2-based no preload rollovers[/url].

@jochemauthorNov 21.2003 — #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.

Cheers, Jochem ?

@pyroNov 21.2003 — #

&lt;style type="text/css"&gt;
 a#rollover {
 display: block;
 height: 67px;
 width: 200px;
 background-image: url(images/rolldemo_off_small.gif);
 }
 a#rollover:hover {
 background-image: url(images/rolldemo_on_small.gif);
 }
 span#rollover_preload {
 background-image: url(images/rolldemo_on_small.gif);
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;span id="rollover_preload"&gt;&lt;a href="http://www.infinitypages.com" id="rollover"&gt;&lt;/a&gt;&lt;/span&gt;

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.

@jochemauthorNov 21.2003 — #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.

<i>
 </i>&lt;style type="text/css"&gt;
 #menu01 a       {width:14px; height:13px; background-image:url("IMG/imageA.gif")}
 #menu01 a:hover {width:14px; height:13px; background-image:url("IMG/imageB.gif")}
 #menu01 a:active{width:14px; height:13px; background-image:url("IMG/imageB.gif")}
 &lt;/style&gt;
 
 &lt;td id="menu01"&gt;&lt;a href="MyFile.htm"  target="Main"&gt;&lt;img src="IMG/Void.gif" border="0"&gt;&lt;/a&gt;&lt;/td&gt;

Do you agree to this method or should I make alterations?

Cheers, Jochem ?

@pyroNov 21.2003 — #With that method, you'll notice a "flicker", as the images are not preloaded...

@jochemauthorNov 21.2003 — #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?

@pyroNov 21.2003 — #Set the spans display to block, the same as was done for the image:

span#rollover_preload {
 display: block;
 height: 67px;
 width: 200px;
 background-image: url(images/rolldemo_on_small.gif);
 }

@jochemauthorNov 21.2003 — #That would result in something like this:

<i>
 </i>&lt;HTML&gt;
 &lt;HEAD&gt;
 &lt;style type="text/css"&gt;
 a#01            {width:14px; height:13px; background-image:url("IMG/image01A.gif"); display:block}
 a#01:hover      {width:14px; height:13px; background-image:url("IMG/image01B.gif"); display:block}
 a#01:active     {width:14px; height:13px; background-image:url("IMG/image01B.gif"); display:block}
 span#01_preload {width:14px; height:13px; background-image:url("IMG/image01B.gif"); display:block}
 a#02            {width:14px; height:13px; background-image:url("IMG/image02A.gif"); display:block}
 a#02:hover      {width:14px; height:13px; background-image:url("IMG/image02B.gif"); display:block}
 a#02:active     {width:14px; height:13px; background-image:url("IMG/image02B.gif"); display:block}
 span#02_preload {width:14px; height:13px; background-image:url("IMG/image02B.gif"); display:block}
 &lt;/style&gt;
 &lt;/HEAD&gt;
 
 &lt;BODY bgcolor="#ffffff"&gt; 
 &lt;div style="position:absolute; top:5px; left:10px; padding:0px"&gt;
 &lt;span id="01_preload"&gt;&lt;a href="PageOne.htm" target="Main" id="01"&gt;&lt;/a&gt;&lt;/span&gt;
 &lt;span id="02_preload"&gt;&lt;a href="PageTwo.htm" target="Main" id="02"&gt;&lt;/a&gt;&lt;/span&gt;
 &lt;/div&gt;
 &lt;/BODY&gt;
 &lt;/HTML&gt;

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:

<i>
 </i>td#01_preload {width:14px; height:13px; background-image:url("IMG/image01B.gif"); display:block}
 td#02_preload {width:14px; height:13px; background-image:url("IMG/image01B.gif"); display:block}
 
 &lt;td id="01_preload"&gt;&lt;a href="PageOne.htm" target="Main" id="01"&gt;&lt;/a&gt;&lt;/td&gt;
 &lt;td id="02_preload"&gt;&lt;a href="PageTwo.htm" target="Main" id="02"&gt;&lt;/a&gt;&lt;/td&gt;

Cheers, Jochem ?

@jochemauthorNov 27.2003 — #OK, I have tried putting it all to work, including a CSS boxdescription. You will find it attached to this post. My questions:

1. Are the images indeed being preloaded?

2. Is this script cross-browser compatible?

3. Is there a better way to reach the same effect?

Thanks for your advise!

Cheers, Jochem ?

[upl-file uuid=9d09f23b-ed78-4a05-98b5-9ec7ae09a76d size=47kB]css_swap.zip[/upl-file]

@DaveSWNov 27.2003 — #You might be interested in the css property:

background-repeat: no-repeat;

or

span#rollover_preload {

display: block;

height: 67px;

width: 200px;

background: url(images/rolldemo_on_small.gif) center no-repeat;

}

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.

@jochemauthorNov 27.2003 — #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 ?

@CherryAANov 29.2003 — #That's brilliant! Never thought of using CSS to swap an image!

Hang on a sec, just off to completely rewrite my site .....

@jochemauthorDec 02.2003 — #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 ?

@jochemauthorDec 03.2003 — #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.

[b]First,[/b] there is the way posted before by Pyro. This one includes a preload.

[b]Second,[/b] 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.

[b]Third,[/b] 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 ?

@jochemauthorDec 04.2003 — #For the third method, check out http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ (thanks to Pyro)

Cheers, Jochem ?

@pyroDec 04.2003 — #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

@jochemauthorDec 04.2003 — #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 ?

[b]I am very curious if this code is correct. Is anything missing or did I make any mistakes?[/b]

Cheers, Jochem ?

&lt;head&gt;
 &lt;style type="text/css"&gt;
 #links        {position:absolute; visibility:visible; top:17px;  left:12px; z-index:2; padding:0px;}
 #descriptions {position:absolute; visibility:visible; top:2px;   left:10px; z-index:1; padding:0px; width:205px; height:26; border:1px solid #64646e;}
 a:hover span  {position:absolute; visibility:visible; top:-14px; left:3px;  z-index:1; padding:0px; width:200px; height:26; display:block;}
 a:hover       {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
 a span        {display:none;}
 .preload      {display:none;}
 #01 a         {width:14px; height:13px; background-image:url("01a.gif");}
 #01 a:hover   {width:14px; height:13px; background-image:url("01b.gif");}
 #01 a:active  {width:14px; height:13px; background-image:url("01b.gif");}
 #02 a         {width:14px; height:13px; background-image:url("02a.gif");}
 #02 a:hover   {width:14px; height:13px; background-image:url("02b.gif");}
 #02 a:active  {width:14px; height:13px; background-image:url("02b.gif");}
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;img src="01b.gif" class="preload"/&gt;
 &lt;img src="02b.gif" class="preload"/&gt;
 
 <i>	</i>&lt;div id="descriptions"&gt;&amp;nbsp;&lt;/div&gt;
 <i>	</i>&lt;div id="links"&gt;
 <i>	</i>  &lt;table border="0" cellspacing="4" cellpadding="0"&gt;
 <i>	</i>  &lt;tr&gt;&lt;td id="01"&gt;&lt;a href="MyFile1.htm" target="Main"&gt;&lt;img src="Void.gif" border="0"/&gt;&lt;span&gt;menu item 1&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
 <i>	</i>      &lt;td id="02"&gt;&lt;a href="MyFile2.htm" target="Main"&gt;&lt;img src="Void.gif" border="0"/&gt;&lt;span&gt;menu item 2&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
 <i>	</i>  &lt;/tr&gt;&lt;/table&gt;
 <i>	</i>&lt;/div&gt;
 &lt;/body&gt;

@jochemauthorDec 16.2003 — #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 ?

@jochemauthorDec 19.2003 — #Check out that thread. It's got the solution!

Thanks everyone who participated in both this thread and the other.

Cheers, Jochem ?

@DariaDec 20.2003 — #Would it be terribly wrong to keep the javascript, yet incorporate a <noscript> element?

I do it, works just fine for me.

@jochemauthorDec 20.2003 — #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 [i]without[/i] JavaScript.

Cheers, Jochem ?

@DariaDec 20.2003 — #Allighty then... ?

@Thomas2Dec 20.2003 — #[i]Originally posted by jochem [/i]

I want to avoid using JavaScript because some 13% of all browsers can't read it or have it disabled.[/QUOTE]
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_JrDec 20.2003 — #[i]Originally posted by Thomas2 [/i]

[B]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. [/B][/QUOTE]

I believe the 13% is a web-wide statistic, individual sites may differ.

@Thomas2Dec 21.2003 — #[i]Originally posted by Paul Jr [/i]

[B]I believe the 13% is a web-wide statistic, individual sites may differ. [/B][/QUOTE]
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 [b]Java[/b] 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_JrDec 21.2003 — #[i]Originally posted by Thomas2 [/i]

[B]You might therefore actually be shooting yourself in the foot by using a CSS solution for something that can be done with Javascript. [/B][/QUOTE]
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...

@Thomas2Dec 21.2003 — #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.

@jochemauthorDec 24.2003 — #10%?? Whoops, that's quite a few...! Personally however, I think these people should [i]NOT[/i] 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 [i]DO[/i] 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 ?

@Thomas2Dec 24.2003 — #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_JrDec 24.2003 — #[i]Originally posted by Thomas2 [/i]

[B]By the way, about 10% of people are surfing the net with images disabled[/B][/QUOTE]
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. ?

@jochemauthorDec 27.2003 — #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 ?

@russell_g_1Dec 30.2003 — #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.

@jochemauthorDec 30.2003 — #I [i][u]DO[/u][/i] 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.

Cheers, Jochem ?

@iudexSep 10.2004 — #[i]Originally posted by pyro [/i]

[B]

&lt;style type="text/css"&gt;
 a#rollover {
 display: block;
 height: 67px;
 width: 200px;
 background-image: url(images/rolldemo_off_small.gif);
 }
 a#rollover:hover {
 background-image: url(images/rolldemo_on_small.gif);
 }
 span#rollover_preload {
 background-image: url(images/rolldemo_on_small.gif);
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;span id="rollover_preload"&gt;&lt;a href="http://www.infinitypages.com" id="rollover"&gt;&lt;/a&gt;&lt;/span&gt;

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. [/B][/QUOTE]

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?

@pyroSep 10.2004 — #Something like this will probably work, as long as you are using the [URL=http://centricle.com/ref/css/filters/tests/import2/]@import rule[/URL] to include your stylesheet:

&lt;style type="text/css"&gt;
 span#rollover_preload {
 background-image: url(images/rolldemo_on_small.gif);
 }
 a#rollover {
 display: block;
 height: 67px;
 width: 200px;
 background-image: url(images/rolldemo_off_small.gif);
 }
 a#rollover:hover {
 background-image: url(images/rolldemo_on_small.gif);
 }
 a#rollover img {
 display: none;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;span id="rollover_preload"&gt;&lt;a href="http://www.infinitypages.com" id="rollover"&gt;&lt;img src="images/rolldemo_off_small.gif" alt="" /&gt;&lt;/a&gt;&lt;/span&gt;

@bluey83Jul 24.2006 — #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.

Also in #HTML _↴

view the latest image from a folder Problem With Hidden Element Voice in a webpage

Success!

Help @jochem spread the word by sharing this article on Twitter...

Tweet This

Image swap without using JavaScript

40 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Image swap without using JavaScript

40 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

40 Comments(s) _↴

Also in #HTML _↴