mySpace image effects hover change mouseover

Image Effects

For more css hover effect examples see the following:
css hover effects and pop up simulation

Change Image on MouseOver without Using JavaScript

To cause a picture to change when the mouse hovers over it, without using javascript (which myspace filters):

Pseudo code:
- Create a container div. This will be positioned relative (or absolute) and will act as the outer positioned container for your image.
It must have positioning, even if you want it in the exact location you create it. This allows the images to be placed absolute within it.

- Use an image as a link, and create a link.

- Create a 2nd link, using your second image (the image which will show when the mouse hovers over the 1st image)

- Use style to do the following:
- Position container div, you can use relative 0, if you don't want to move it. Position is necessary for it to act as a proper outer container.
- Position the 2nd link image in the top left corner of the outer div
- Position the 1st link image in the top left corner of the outer div.
- Style the 1st image to turn invisible when hovering over.
- Style the 2nd image to turn invisible
- Style the 2nd image to visibility:visible when hovering over.

(It is probably possible to just have the top image go from visible to hidden, but I like to set them both rather than worry about layering order. The below code worked in the 5 browsers I tested it in).

The below code is a sample. It uses two small 50x50 images. The links go to my web page.
Change the image links to the URL of your images.

<i class="off">!-Change image when hover over-!
!code author:Eileen <a href="xiii.us/v">mySpace code Tutorials</a>
</i>

<div class="Div0">
<a class="img1" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy92"><img src="http://i17.tinypic.com/6b05ehc.jpg"</a>
<a class="img2" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy92"><img  src="http://i24.tinypic.com/2u3w3s3.gif"></a>
</div>

<style>
a:hover img {filter:none;}
div.Div0 {position:relative; top:0px; width:50px; height:50px; border:1px pink solid;}
a.img2 {position:absolute; top:0px; left:0px;}
a.img1 {position:absolute; top:0px; left:0px;}

a:hover img {filter:none;}
div.Div0 {position:relative; top:0px; width:50px; height:50px; border:1px pink solid;}
a.img1 {position:absolute; top:0px; left:0px;}
a.img2 {position:absolute; top:0px; left:0px;}

a.img1:hover img{visibility:hidden;}
a.img2 img {visibility:hidden;}
a.img2:hover img {visibility:visible;}
</style>