7 replies to this topic

[don1]

I'm trying to accomplish a few things. 1. W3C compatibility 2. rollover and onclick images (sorry, the W3C compatible version of rollover and onclick images) and 3. preloaded buttons.

The issue I have right now is that the onclick image does not appear fast enough to be seen on three buttons (see the page I posted in site review). I am going to assume that if the images are preloaded it will work better. So, how do I preload an image and then what is the appropriate coding for the rollover (onfocus and onblur did not seem to work) and active links?

[qwerty]

Here's what I use, although I think I won't in the future. I'm not planning on using image swaps anymore.

In the head, I put:

<script language="JavaScript1.2" type="text/javascript">
<!--
image1 = new Image();
image1.src = "images/button/home2.gif";
image2 = new Image();
image2.src = "images/button/fact2.gif";
image3 = new Image();
image3.src = "images/button/gallery2.gif";
//-->
</script>

And then in the code for each of those buttons I have

        <a onmouseover="image1.src='http://www.domain.com/images/button/home2.gif';" onmouseout="image1.src='http://www.domain.com/images/button/home1.gif';" href="http://www.domain.com/">
        <img name="image1" border="0" src="http://www.domain.co...tton/home1.gif" alt="Home Page blah blah" width="150" height="30"></a></td>

There are probably better scripts, but this works for me.

[powerofeyes]

Hello Don,
Please see this link it has very good information about Preload images and mouseover features, http://www.virtually...nt.com/buttons/
When you use current versions of Dreamweaver or frontpage they give build in features to implement mouseover features without writing any sort of code and that code generated doesnt look bad and it is clean according to me so try using dreamweaverMX will be easy for you,

VIJAY,

[niceguyeddie]

This might work for you, as it is a neat trick, and does not need preloading. Also cuts the bandwidth down considerably.

[http://www.pixy.cz/b...loadrollovers/]

Edited by Jill, 12 December 2003 - 07:54 PM.

[qwerty]

That's an interesting idea. It would have been nice if they'd shown a working example, though. Obviously, you'd need to specify the image width and height, and I would have thought that that would cause the browser to squeeze the entire image (all three parts of it) into that size. But I've been wrong once or twice before

Has anyone tried this?

[don1]

I'm no expert but I have been trying. No luck yet. Anyway, I went with the standard preloaded images and it seems to work BUT I still need to make the actions W3C compatible. Here is what I have read:

if you must use device-dependent attributes, provide redundant input mechanisms (i.e., specify two handlers for the same element):
* Use "onmousedown" with "onkeydown".
* Use "onmouseup" with "onkeyup"
* Use "onclick" with "onkeypress"

OK, I get the end results but how do I do it?

[qwerty]

Oh, I didn't realize you were shuffling between three images rather than two. That's going to further complicate your scripting, and following the W3C's recommendation to put the same action on onclick and onkeypress will take things even further.

I can't tell you how to do it, but if you don't mind too much, I feel like asking you why you feel like you need so much going on for a simple navigation button. We're talking about calling a bunch of code, and we haven't even started talking about the people who don't have javascript enabled. They won't see any of this.

[niceguyeddie]

That's an interesting idea. It would have been nice if they'd shown a working example, though. Obviously, you'd need to specify the image width and height, and I would have thought that that would cause the browser to squeeze the entire image (all three parts of it) into that size. But I've been wrong once or twice before 

Has anyone tried this?

[http://www.pixy.cz/b...s/example.html]

It's linked as example from the tutorial.

Edited by Jill, 12 December 2003 - 07:55 PM.