I do not have time to troubleshoot people's code. (Hopefully I will again in the future).
I do not have much time to answer questions (but if it is a quick answer, that only takes me a few minutes, I will try to answer).
I really recommend the following site, for myspace customizing questions: Official Myspace Customizing Forum
That is the most reliable source, and the people I know who enjoy helping, and are quite good at it, tend to hang out there.

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:

16 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  
Anonymous MARiA ♥ ;; said...

Ok thisz isz not so great...
I mean i thought it would be but i mean you dont tell usz weather or not to chang the image link, of what link should we use... So i think you should help me a little with that you should totally try to email me and help a little
my email is: babygirlscuteface@yahoo.com

Thanks

add me on myspace

www.myspace.com/i_love_my_lame




Thanks much love, ♥ ;

→*Maria ♥ ;;

3/12/08 14:35  
Anonymous kezey said...

FUCKING AMAZING!!!!!

3/4/09 16:12  
Blogger Pakawan und Dietmar's Blog said...

it works fine, but to be honest, as a html newbie i had some trouble at the beginning, then i found the solution, i neede that clear:left also ;-)

21/4/09 00:39  
Anonymous sharks said...

hi, i was wondering how to get the hover image effec in the top banner in myspace band page, kinda like here ?
www.myspace.com/myautumnmetal
how to combine it with the top banner code?

sharks

6/6/09 04:39  
Anonymous Anonymous said...

i need help with my myspace wat should i put on my page

email:fdenise13@yahoo.com or denisefinlayson@yahoo.com

myspace.com/audrea93

8/6/09 10:12  
Anonymous Anonymous said...

Great code! It works, but I was wondering what to do if you wanted to have multiple images with hover effects on the same page. I tried renaming the second div code from div0 to div1, but it didn't work. Any ideas?

___________________________________________
jonneol@yahoo.com
http://www.myspace.com/jonnoeldesign

Please contace me,
thank you

3/7/09 10:32  
Anonymous Anonymous said...

Disregard my previous message, I've figured out how to place multiple images with the hover effect. But my new problem is that I cannot place them separately, when I move only one, they move as a group even when the code for the others are different. I think they're all still in the same div somehow.

_________________________________
jonneol@yahoo.com
(Please contact me)

http://www.myspace.com/jonnoeldesign
(This is the page I'm editing)

3/7/09 10:59  

Post a Comment

Due to Excessive Spam, I have turned on comment moderation.

Links to this post:

Create a Link

<< Home