fading image

[ADoozer]

im asking this question on behalf of a friend so here goes

Q: is there any way to have a picture fade when the pointer of the mouse goes over it, in xhtml code only?
is this possible??

ive seen a couple of examples (

http://www.ssi-developer.net/css/menu-rollover-effect_transition.shtml

and a thread on this forum) but they both seem to use javascript.

thnx

If somethings hard to do, its not worth doing - Homer Simpson
------------------------------------------------------------------------
To get the best response to a question, please check out FAQ222-2244 first
A General Guide To Excel in VB FAQ222-3383

 

[jammer1221]

Um as far as I know you can't with XHTML is basically the same as html the only difference is that XHTML is the new standard for web browsers and it fixes tags that don't have closing tags. I think your going to have to use Javascript or DHTML, but if there is a way and you find out could you please post back here becasue i would like to know.
jammer1221

 

[ADoozer]

thanx. will pass on the info and update if/when more info becomes available!

If somethings hard to do, its not worth doing - Homer Simpson
------------------------------------------------------------------------
To get the best response to a question, please check out FAQ222-2244 first
A General Guide To Excel in VB FAQ222-3383

 

[deecee]

cannot be dont

xhtml is like html all it does is tell the browser what to display -- you will either need javascript or some server language -- tho much easier with javascript.

<Signature>
Sometimes the Answer You Are LOOKING for can be FOUND BY SEARCHING THE FAQ'S @&%$*#!!!
</Signature>

 

[philote]

Sure, you can do rollovers without javascript. You'll need to use css to do this, but that should be ok. What you do is create a link (anchor tag). Then, in your style sheet, you put the image as the background of the link and specify the size of the <a>. Then, also define a style for the hover pseudo-element for the link and give it the background of the faded image. IE will only do hovers for links, otherwise you could do this with just about any html element.

Here's an example, using a 100x100 image:
HTML:

...
<a id=&quot;rollover&quot;>Put text here if you want it</a>
...

CSS:

a{
  width: 100px;
  height: 100px;
  background: url("image1.jpg");
}
a:hover{
  background: url("image2.jpg");
}

 

[philote]

Sorry, pseudo-element should have been pseudo-class. Here's a reference:

http://www.w3.org/TR/CSS2/selector.html#x39

Also, check

http://www.w3schools.com/css/default.asp

for a css tutorial.

 

[BillyRayPreachersSon]

AFAIK, You can't fade using *only* XHTML.

While philote is correct with his CSS, you cannot fade an image dyncamically using CSS only (i.e. without JavaScript)... You can only swap to a faded image.

Dan

 

[philote]

Oh, the images are supposed to actually fade out. I looked at the example in Mozilla and didn't notice it was IE only, so I didn't get the full effect. I thought you were going for simple rollovers.

 

[EdwardMartinIII]

&quot;image2.jpg&quot; can be &quot;image2.gif&quot;, where such GIF is an animated GIF that fades out. If you've preloaded your images, the effect is just fine.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[jstreich]

Heh, I was just going to sugest using the CSS rollover with a gif... Guess you beat me to it, so all I can do is post this trollish post.

 

[EdwardMartinIII]

The neatest-looking rollovers I've seen in a long time are at:

http://www.stephenking.com/

I think these are done using Flash, but the technique can still be replicated using GIFs. Fascinating!

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door