superimposing text on an image

**camner** · Jul 26, 2004, 19:40

I'd like to superimpose text on an image (the text is dynamic, so I want to use javascript). Here's the html:

Code:

<a href="javascript:void();"> <img src="remarks.gif" border="0"  id="remarks1" name="remarks1" onclick="javascript:toggleRemarks();"/></a>
<span class="remcnt" id="remcnt"></span>
<a href="javascript:toggleInfo()"> <img src="info.gif" border="0"/></a>

The images are not styled in any way....

The css for the "remcnt" class is:

Code:

.remcnt {
	position:relative; 
	width: 27px;
	top:-28px;
	left:-15px; 
	margin:0px -15px 0px 0px;
}

I then use the following javascript to write the text:

Code:

function display_count(count)
{
	document.getElementById("remcnt").innerHTML=count;

	/*center the count over the icon*/
	left="-15px"; margin="-5px";
	if (count>9) {left="-26px"; margin="-22px";}
	if (count>99) {left="-30px"; margin="-29px";}
	document.getElementById("remcnt").style.left=left;
	document.getElementById("remcnt").style.marginRight=margin;
}

The reason I am fiddling with the right margin is if I keep the right margin at 0, the width of the <span> forces the second image over to the right, which is undesirable.

Q1: why does that happen? If the superimposed text is only 1 character, why should it take so much room as to push the icon over?

So, by making the right margin negative, that "pulls over" the next image.

At least it does in Gecko based browsers....it doesn't work in IE 6! The text entirely disappears!

Is there a better way to accomplish what I want? That is, to superimpose text on the image without shoving the rest of stuff on the line to the right?

**MikeFoster** · Jul 26, 2004, 20:49

Have a look at this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type='text/css'>
.imgHolder {
  position:relative;
}
.imgText {
  position:absolute;
  left:0; top:0;
  width:100px;
}
</style>
<script type='text/javascript'>
window.onload = function()
{
  var spans = document.getElementsByTagName('SPAN');
  for (var i = 0; i < spans.length; ++i) {
    spans[i].onmouseover = setText;
  }
}
function setText()
{
  document.getElementById('txt1').innerHTML = this.innerHTML;
}
</script>
</head>
<body>

<div class='imgHolder'>
  <img src='../images/cb_x.gif' width='100'>
  <div id='txt1' class='imgText'></div>
</div>

<div>
<span>Lorem ipsum dolor sit amet,</span>
<span> consectetaur adipisicing elit,</span>
<span> sed do eiusmod tempor incididunt</span>
<span> ut labore et dolore magna aliqua.</span>
</div>

</body>
</html>

The SitePoint Forums have moved.

User Tag List

Thread: superimposing text on an image

Thread Tools

Display

superimposing text on an image

Bookmarks

Bookmarks

Posting Permissions