|
HTML - Best Method: Text Over Image
I am looking for the most efficient way to put text over a picture. I have a background image that i want to place text over that has to stay in the same spot and same size relative to the image that it is on top of.
There are a couple ways i can think to do it. 1. Would be to use an iframe where i want the text to be placed 2. Use css to position the image and the text relative to one another. I am not as familiar with method number 2. If anyone has any ideas on the most efficient way to do this that would be great! Similar TutorialsSo in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. I have seen this many times but can not figure how to do it. Its the transparent images or text in text boxes, one example of this is http://au.movies.yahoo.com/Coming+Soon/to-cinemas/ At the top right you can see that transparent yahoo image in the text box and when you click it it disappears then comes back? can someone tell me how this works? Thanks My client friend wants a links page with rollover emails that chage the main image of the page so he can have a different sketch of each of them. My idea, and its backfiring as I can do this if I change the email text into images with swap image and a target but he wants them to remain as copyable (mmm is that even a word?) text. Can it be done with text without making it an image? many thanks to all you wonderful people that make these sites possible jax Im trying to create a simple thing for my business. What im trying to do is have the image of each of my employees and under it have their name and other info. I want the images side by side with some space and able to put their info under it. Can someone help me with a html code? thanks! How can I get text on top of an image? I can't use an absolute position. credmond8.awardspace.com/random.html The text on the footer img. Hi, I am relativeley new to web design, I am just wondering if there is a way for me to put text over an image in Dreamweaver. I made my layout in Photoshop, sliced it in Imageready and now have it open in Dreamweaver. Any help is much appreciated. Thanks -Danny Edit: Sorry, should've posted a screenshot to give you a better idea of what I mean.. Click the link to see what it is I want the text on.. The 'box' is a slice by the way. http://img396.imageshack.us/img396/3271/helpub8.jpg Hi, I am new to the forum, and HTML. I have a website, but it built by someone else, who has since left the country, so I am trying to learn basic coding to do my own website work. My question is, how do I put an image on a page with text displayed on the image ? There is an image on the home page of my site, Lanna Charm, with text on it , and I have tried to create the same effect, without success. Is there an easy way to do this ? I found the image in "Assets", in the admin section, and I can reproduce it, but I want to use different images, with different text. Thank you, Mickmac Hello, I would like to know, how can I insert text on top of an image (the one with the baby), so that the text would be non stop there on the same position, even if you change browser width... URL: http://www.fkkt.org/gdemsa/domov.html Please help How do I type text on top of a image and have it look the same in IE and Firefox If anyone knows how to do this, please help... I am trying to place text over an image. My image is broken up into 2 images. I want the text to be over the top image while retaining the two images being together. Here is my html: <td align="center" valign="top"><table width="500" border="0" cellspacing="0" cellpadding="0"> <img src="top.jpg"><img src="middle.jpg"> What would the html be to accomplish this? Thank you Heya, Im coding a site here in Dreamweaver CS3 and need some help. I have a sliced image from my made-in-photoshop layout, that is my content area. But In dreamweaver I cannot add text over it. Anyone have a tutorial or advice that can get me past this? Quote: <html> <head> <title>newv4</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="breakdownconspiracyinc.css" rel="stylesheet" type="text/css"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (newv4.psd) --> <div id="site_layout"> <table id="Table_01" align="center" width="500" height="470" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4"> <img src="images/area/name_area.jpg" width="26" height="470" alt=""></td> <td colspan="11"> <img src="images/area/logo_area.jpg" width="450" height="159" alt=""></td> <td rowspan="4"> <img src="images/fill/right_fill.gif" align="middle" width="24" height="470" alt=""></td> </tr> <tr> <td> <img src="images/fill/graphics-fill.jpg" width="42" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/Graphics.html"> <img src="images/buttons/button_graphics.jpg" border=0 width="73" height="17" alt=""></a></td> <td> <img src="images/fill/music_fill.jpg" width="31" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/music.html"> <img src="images/buttons/button_music.jpg" border=0 width="45" height="17" alt=""></a></td> <td> <img src="images/fill/film_fill.jpg" width="33" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/film.html"> <img src="images/buttons/button_film.jpg" border=0 width="30" height="17" alt=""></a></td> <td> <img src="images/fill/blog_fill.jpg" width="36" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/blog.html"> <img src="images/buttons/button_blog.jpg" border=0 width="33" height="17" alt=""></a></td> <td> <img src="images/fill/about_fill.jpg" width="33" height="17" alt=""></td> <td> <a href="http://www.freewebs.com/breakdowninc/pages/blog.html"> <img src="images/buttons/button_about.jpg" border=0 width="50" height="17" alt=""></a></td> <td> <img src="images/fill/end_fill.jpg" width="44" height="17" alt=""></td> </tr> <tr> <td colspan="11"> <img src="images/area/content_area.gif" width="450" height="270" alt=""></td> </tr> <tr> <td colspan="11"> <img src="images/area/copywrite_area.jpg" width="450" height="24" alt=""></td> </tr> </table> </div> <!-- End ImageReady Slices --> </body> </html> image: http://allyoucanupload.webshots.com/...57666093499606 How can I, in a table, put text directly to the right of an image? When I try, the image is placed, and then there's plenty of space to the right, but the text goes to the bottom right corner of the picture. How can I have it like this: (x's represent the image) xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx ← Text xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx I'd like to have them all on a center line so to speak, where the middle of the text is lined up with the middle of the picture, and the text is centered (the text will be in a column-like structure, not just one line as it appears above) Hi, I want to place some text over an image, however i don't want to set the image as a background, as the user should be able to print the image, along with the text. What i want is that a photo would have something like "copyright 2009" or something similar when it is printed. Can someone point me in the right direction (to the correct forum, link etc.) thanks and best regards, Joe I'm using Frontpage 98 as my editor. I have made a template to cut and paste text into a page that has a table. My problem is when I insert a image into a field of text it looks like I have parted the Red Sea. My question is "How do you insert a image without using a table and have the text flow around the image like it would in a newspaper or magizine." My OS is Windows Vista. Also would upgrading to a new editor be wise? Thanks GaryO Hi All, This is probably a basic question to ask but for some reason i cant seem to figure it out, Basically what you can see below is a table width="850" and then another table inside that table with a width="425" as you can see i have set 4 back ground images which look perfect my problem is im trying to put wording over them images....i can get wording on the images but they wont go in the relevant position, i.e align="top" they align at the bottom! iv tried everything i can possibly think off.... HTML Code: <table border="0" cellpadding="0" cellspacing="0" width="850">
<tr>
<td>
<table width="425" border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td height="163" style="background-image: url(/images/box1.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
<td height="163" style="background-image: url(/images/box3.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
</tr>
<tr>
<td height="163" style="background-image: url(/images/box2.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
<td height="163" style="background-image: url(/images/box4.png); background-position: left;
background-repeat: no-repeat">
<a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 15px">
</tr>
</table>
If some one can tell me how to do it this i would highly appreciate it, iv tried adding this HTML Code: <tr>
<td height="163" style="background-image: url(/images/box1.png); background-position: left;
background-repeat: no-repeat" class="WhiteSmall" valign="top"><b>Apply Now></b>
</td>
</tr>
So it aligns it at the top but still i need it in the top middle..... if there a way of saying Valign="top middle" ??? as im aware you can use background-position: left top maybe you can do the same for valign? Hope some one can help me thanks for reading and look forward to hearing from you I have an image and some text which i would like to be grouped together as 1 object, is this possible and if so how? Also does anyone know of a html editor which allows you to edit the html in design view? Thankyou in advance for any help! Hi I am very HTML newbe I want to put some text on the image but i cant This is the code i am using HTML Code: <table> <tr> <td> <img src="http://asmgx.webs.com/p1.jpg">My text should start from the red dot till the right border of the image, up to the bottom border to the image but as you can see it does not :(</img> </td> <td> <img src="http://asmgx.webs.com/p2.jpg">another text goes here</img> </td> <td> <img src="http://asmgx.webs.com/p3.jpg">another one too</img> </td> </tr> </table> This is how should my result look like can any one help me here? Hi I am trying to make the image "y.bmp" and the text "Yahoo" and the other text ">" in the middle (vertically) I tried "vertical-align: middle" but does not work may someone please help me here. here is my html thanks HTML Code: <div style="width: 100%;">
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr style="height: 76px; width: 100%; background-image: url('rep.bmp'); background-repeat: repeat-x;">
<td>
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.yahoo.com">
<img style="" src="y.bmp" />Yahoo!</a>
</td>
<td align="right">
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.yahoo.com">
></a>
</td>
</tr>
<tr style="height: 76px; width: 100%; background-image: url('rep.bmp'); background-repeat: repeat-x;">
<td>
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.google.com">
<img src="g.bmp" />Google</a>
</td>
<td align="right">
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.google.com">
></a>
</td>
</tr>
</table>
</div>
These image icons are to the left of the corresponding text. The text, lines up on the same line as the image. When viewed, because they line up on the same line, the image is next to the text and bigger than the text (see attached image). How can I line the text up next to the middle of the image rather than how it lines up now, which is next to the bottom of the image? thanks Code: <font face="Arial" color="#000000" size="3"><IMG src="/images/hphone.gif"> <a href="?action=login"> Home</a><br><br> <IMG src="/images/hphone1.gif"><a href="?action=register"> Register</a><br><br> <IMG src="/images/hphone2.gif"> <a href="?action=faq"> FAQ</a><br><br> <IMG src="/images/hphone3.gif"> <a href="? action=terms"> Terms Of Use</a><br><br> <IMG src="/images/hphone4.gif"> <a href="?action=contact"> Contact Us</a><br><br> <IMG src="/images/hphone5.gif"><a href="?action=forgotpass"> Forgot Password</a><br><br> <IMG src="/images/hphone6.gif"><a href="?action=forgotusername"> Forgot Username</a><br></font> |
|||||||