Positionnement du texte pour afficher sur une image avec CSS

Question

je le scénario suivant

<TD><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)"><img src="images/m2.jpg" name="Image20" width="103" height="136" border="0">Home</a></TD> 

Je veux que le texte d'accueil apparaissent au-dessus de l'image par exemple. flottant sans que l'image ne perde réellement la position onmouseof et onmouseover, est-ce posible?

Answer 1

Je voudrais faire la source d'image l'arrière-plan de cette une étiquette et le positionner correctement pour gagner de la place pour que le texte « flotter » au-dessus

<td><a href="index-1.html">Home</a></td> 

CSS

td a /* probably better to use an ID here #myAnchor */ 
{   
    vertical-align: top; 
    height: 156px; /* padding 20px to save room for "Home" text */ 
    width: 103px; 
    display: inline-block; 
    background: url('images/m20.jpg') no-repeat 0 20px; 
    text-align: center; 
} 

td a:hover /* probably better to use an ID here #myAnchor */ 
{ 
    background: url('images/m21.jpg'); 
} 

Answer 2

<style> 
#thisNavElement{ 
width:103px; 
height:136px; 
display:block; 
text-align:center; 
vertical-align:center; 
background:url(images/m2.jpg); 
} 
#thisNavElement:hover{ 
background:url(images/m21.jpg); 
} 
</style> 

<a id='thisNavElement'>Home</a> 

Answer 3

En votre CSS, vous pouvez dire

#my_anchor { 
    background: url(images/m21.jpg); 
} 

puis changez simplement l'arrière-plan en JavaScript/jQuery

Answer 4

Comme alternative, vous pouvez simplement placer votre texte dans une balise span, puis utiliser css pour le positionner comme vous le souhaitez.

<TD> 
    <a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)"> 
     <img src="images/m2.jpg" name="Image20" width="103" height="136" border="0" /> 
     <span class="someclassname">Home</span> 
    </a> 
</TD> 

Answer 5

<TD><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)"><img src="images/m2.jpg" name="Image20" width="103" height="136" border="0"><div id='text'>Home</span></a></TD> 

CSS:

#id { 
position: relative; 
top: -20px; 
z-index: 2; 
}