Create Hover Effect And Text/Image Rollover On Your Profile Name:

Descriptions:

With the following code you can replace your "Profile Name" with a "Link Text" on your profile page,
and when the mouse hovers over it, a hidden "Text and Graphic" will show up.
In addition, your Profile Name will be clickable, and you can link it to your home page or another web site.

Mit dem folgenden Code kannst du deinen "Profil-Namen" durch einen "Link Text" ersetzen, so daß wenn mit
der Maus darüber gerollt wird, ein verborgener "Text und Graphik" erscheint.
Außerdem kannst du den Profil-Namen mit deiner Homepage oder die Seite deiner Wahl verlinken.

Step 1):  Inserting The (New!) Profile Name:
Add the below HTML code in your "About Me" section:

  <div class="KhAkRoll">
   <a href="PAGE URL">KhAk's Help
    <span class="KhAk">
     Welcome To My Page<br />
     <img src="IMAGE URL">
     </span>
   </a>
  </div>

Instruction:

- Replace the "Profile Name and Welcome Message" with your own "Words".
- Replace "URLs" with your own before you click on the "Save Changes" button.

Step 2):  Format And Position The Profile Name And Its Rollover Content:
Add the below code in your Field:

.KhAk {Hide Def. Profile Name}
div.basicInfoDetails h2 {visibility:hidden;
margin-bottom:50px;}

.KhAk {Format The New Profile Name}
div.KhAkRoll a {
display:block; padding-left:5px;
position:absolute; left:50%;
top:230px; margin-left:-275px;
height:30px; width:200px;
background-color:Black; color:White;
font-family:Arial Black;
font-size:24px;
line-height:27px;
text-decoration:none;
z-index:9;
}
.KhAk {Profile Name Hover Effect}
div.KhAkRoll a:hover {
background-color:DarkGreen; color:Yellow;
}

.KhAk {Profile Name Rollover Content}
a span.KhAk {display:none;}
a:hover span.KhAk {
display:block; position:absolute; left:50%;
top:40px; margin-left:60px;
width: 220px; height: 150px;
font-family:Arial Black;
font-size:14px;
color: Black;
z-index:9;
}

Instruction:

☼- Change the Numbers "230 And -275" to move your "Name" up/down And left/right.
☼- Adjust the number "200" to the length/width of your "Name".
☼- Change the Values to format your "Name".

☼- Change the Numbers "40 And 60" to move the "Appearing Content" up/down And left/right.
☼- Adjust the numbers "220 And 150" to the width/height of the "Appearing Content".
☼- Change the Values to format "Appearing Text/Welcome Message".

Note:   (Firefox 2 User)

You will have a problem in Firefox Version 2 with the stack order of inserted Name and Basic Info
(z-index + position), and the Hover/Rollover won't work.
However, the Code will work perfectly with Firefox 3 and Internet Explorer.

Du wirst in Firefox 2 ein Problem mit der Layer Anordnung des eingefügten Namen und Basic Info haben
(z-index + position) und das Hover/Rollover wird nicht funktionieren.
Der Code wird allerdings in Firefox 3 und Internet Explorer einwandfrei funktionieren.

Enjoy!