SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2003
    Location
    USA
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    superimposing text on an image

    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?

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •