Image positioning problems... Part #2

[VISUALKEICHICK]

Again, I hope not to be ignored... if you can't help me, just tell me, so that I can move on...

This one I am so baffled by, I am told that it is possible to accomplish, but I can't make heads or tails of how to do it at all... I am again, hoping that someone here can help me, as the MySpace forums and the other HTML "help" forums, are ignoring me for the most part...

Ok I hope I can explain what I am trying to accomplish, in a way that someone can help me achieve the desired effects.

So here goes...

I am working with some hover effects and imagery...

I am starting off with two pictures.


and



Here is the code I am using:

<center><style>
a.letsRoll {width:150px; height: 300px; display:block;
background-image:url(http://i35.tinypic.com/23ww3k3.png);}
a.letsRoll img {border:0px;}
a.letsRoll:hover {cursor:default;}
a.letsRoll:hover img {visibility:hidden;}
</style>
<a class="letsRoll" href="#">
<img src="http://i38.tinypic.com/20hsgup.png" />
</a></center>

All this code does is switch my pictures from smirking to a toothy grin. Which is exactly what I was trying to do in the first place.

Now here is where I am stumbling and having an aneurysm due to frustration...

I want to do a side pop-up as well as the grin change upon hover, I was told that it can be done...

People have provided me with this link... but I do not understand how to change it from links to pictures to give me my desired effects...

Here's the link maybe someone can understand it and tell me how to change the code, because I don't...

http://views-under-construction.blogspot.c...er-myspace.html

What I want exactly is this...

Upon hovering, the smirk changes to the toothy grin, and then at the same time a pop up (that was invisible until the hover, but will then stay visible upon moving the mouse cursor over to the right after it shows up) of a smaller picture...

This is the picture that I would like to use.


Now underneath it, I would like a link to a website...

The link is...
http://www.hide-city.com/

But instead of actually showing the link, I want it hidden, with text that reads...
"hide's Official Website" instead.

I would also like the pop-up (the little "Pink Spider" picture plus the link to hide-city) to be enclosed inside a solid or outset colored (the color I want is #ff00cc) border.

See, when I said it was complex... I wasn't kidding... well it's complex to me anyway...

As I said in the other thread, I have asked around, and have been ignored... I am hoping in coming here, my experience will be different.

Thanks guys.

[binaryWeapon]

You need to use javascript, not CSS for this one.

<center><style type="text/css">
a.letsRoll {width:150px; height: 300px; display:block;
background-image:url(http://i35.tinypic.com/23ww3k3.png);}
a.letsRoll img {border:0px;}
a.letsRoll:hover {cursor:default;}
a.letsRoll:hover img {visibility:hidden;}
.hidden{display:none;}
div.popup{border: 1px solid #ff00cc;width:240px;}
</style>
<a class="letsRoll" href="#" onmouseover="var popup=document.getElementById('popup');popup.style.display='block';" onmouseout="var popup=document.getElementById('popup');popup.style.display='none';">
<img src="http://i38.tinypic.com/20hsgup.png"/></a>

<div id="popup" class="hidden popup" onmouseover="var popup=document.getElementById('popup');popup.style.display='block';" onmouseout="var popup=document.getElementById('popup');popup.style.display='none';">
<img src="http://i37.tinypic.com/24cvb7q.png" alt="PinkSpider">
<br><a href="http://www.hide-city.com/">Hide's Official Website</a>
</div>
</center>

The popup appears below the picture, and upon hovering the popup, the grin image reverts. I can change that if needed.

HTH!
~binaryWeapon

OFFTOPIC:
There are several identical posts of this by the same username in forums across the net :/