PLEASE do NOT strip my credits out of your code. They are harmless. Unlike most sites, My credits do NOT show up on your visible page, there is no reason to remove them. If you make a derivative of my work, you may add your own credits, but leave mine in tact.

I apologize for being less attentive to people's questions than in the past. I hope to return to doing this at some time. But for now I need to think about what I want to do. This doesn't mean I am completely ignoring all questions, if I suspect there might be a bug in my code, or myspace has made some change effecting it, I will still dig in and research.

Sunday, January 14, 2007

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>

Labels:

9 Comments:

Anonymous killer kitty said...

THIS IS SO GREAT!!! I tried it and it works!! omg, thank you so much!!

www.myspace.com/set_my_soul_alight


i used it on my friends list! thanks again!!!

9/12/07 14:35  
Anonymous Anonymous said...

You are amazing and my hero right now.
WOW.

11/1/08 23:46  
Anonymous Desil said...

How Would You Do More Than Two Images In The Same Code Like If You Click Where Els In The Picture It Does The Mouse effect But To A Different photo Also.

19/1/08 06:35  
Anonymous Peter said...

Thanks! Your code is amazing! ...If you wouldn't mind taking a quick peek, I'm working on a nifty project for myspace, displaying images within a table- all within a scroll box. The hover effect works smoothly, but how would I make the popup image appear outside the scroll box? Right now it's contained within. Even better, can I designate a place on the page where the popup image will appear, say, in the empty space to the left of my table/scrollbox display? Thanks a zillion!

www.myspace.com/petedude79

13/2/08 16:28  
Anonymous Anonymous said...

hi,


first of all thanks for this site. it is the best help i was able to find on the net on how to build my band page.

i am wondering if you could tell me how can i use the hoover effect on the image i placed under the 'Music Bar'....how can i incorporate the two codes?

thanks

30/3/08 15:50  
Blogger Eileen said...

you want to hover and change the background image?

The really only works if the area you want to change the image for, is itself, part of the link.

When applying a background image, to as style, to an element that is part of the core code, it is not possible to turn that element into a link, or wrap a link around it.

This means you need a different banner strategy, one that allows you more control over the content.

Can I have a link to your page, the best strategy depends on some details related to your page layout.

30/3/08 17:47  
Anonymous Denny said...

your code is amazing. one problem though, it doesn't work so hot on internet exporer. the second image doesn't show up...

11/5/08 12:47  
Blogger Eileen said...

Denny

Well, it seems to work in IE, outside of blogger.

But it isn't working in blogger, and I need to figure out why.

It also worked in myspace.

Where were you trying to use the code?

I can look at your code, if you want me to.

11/5/08 19:42  
Anonymous Anonymous said...

How Would You Do More Than Two Images In The Same Code Like If You Click Where Els In The Picture It Does The Mouse effect But To A Different photo Also.

4/7/08 04:17  

Post a Comment

Links to this post:

Create a Link

<< Home