CODEWITHSUNDEEP
cssweb
Elitmiar
Elitmiar

Reputation: 36899

Positioning text to display over an image using CSS

I have the following scenario

<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>

I want the Home text to appear above the image eg. floating without the image actually loosing the onmouseof and onmouseover position, is this posible?

Upvotes: 0

Views: 718

Answers (5)

hunter
hunter

Reputation: 63562

I would make the image source the background of that a tag and position it properly to save room for the text to "float" above

<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');
}

Upvotes: 2

Ran Bar-Zik
Ran Bar-Zik

Reputation: 1237

<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;
}

Upvotes: 0

Betard Fooser
Betard Fooser

Reputation: 526

As an alternate solution you can simply place your text in a span tag and then use css to position it any way you like.

<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>

Upvotes: 0

Aaron Hathaway
Aaron Hathaway

Reputation: 4315

In your CSS you can say

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

and then just change the background in JavaScript/jQuery

Upvotes: 0

FatherStorm
FatherStorm

Reputation: 7183

<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>

Upvotes: 1

Related Questions