SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: superimposing text on an image
-
Jul 26, 2004, 20:40 #1
- 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 css for the "remcnt" class is:Code:.remcnt { position:relative; width: 27px; top:-28px; left:-15px; margin:0px -15px 0px 0px; }
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; }
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?
-
Jul 26, 2004, 21:49 #2
- 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>
Cross-Browser.com, Home of the X Library
Bookmarks