Overlay Technique for E-mail Submission Box:

Hello all,

Similar to what was discussed in one of my previous threads here, I would like to utilize the same concept for the e-mail submission box, in anticipation that the visitor may have images turned off in their browser; however, this would be going over a form element, and there seems to be a bit more than an anchor that has a span over it.

This is the markup for the form:


 <form id="emailbox" name="form1" method="post" action="">
        <div>
          <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)"/>
          <input type="submit" value="Join" />
        </div>
      </form>

I would like to put some text under the image somehow, so that it will be displayed if the images are turned off. Thinking back on the previous thread, this is the technique utilized:


<h3 id="sectionhomelink"><a alt="Home Page" title="Go to the Home Page." href="index.html">Back to Home Page<span></span></a></h3>


h3#sectionhomelink{
	height:48px;
  	position:relative;
    width:360px;
}
#sectionhomelink a{
    height:48px;
    width:360px;
}
#sectionhomelink a:hover, #sectionhomelink a:active, #sectionhomelink a:focus{color:#FC6; text-decoration:none;}
#sectionhomelink span{
	background:url("sectionhomelink.gif") no-repeat 0 0;
	height:48px;
	position:absolute;
	width:360px;
	top:0;
	left:0;
}
#sectionhomelink a:hover span{
	background-position:0 -48px;
	height:48px;
	width:360px;
}
/* positioning the link */
#sectionhomelink{margin-top:5px; padding-right:10px; float:right;}

Thanks for your insight.

Under which image?

As Ralph said above which image do you mean as there is o image in your form code.

If you are using a background image in the submit then you will have the value holding the text content anyway so nothing needs to be done unless you are moving the text content out of the way of course (with something like text-indent). In that scenario images off will show nothing as the css is removed although screen readers will probably be ok as they will see the value attribute.

What I have done previously is to use an associated label to hold the text and then place the input on top to hide it. This ensures that in any scenario of images/css on/off the user will still get something usable.

Here’s an old (and rough) example.

View source as the code is in the head.

The image is the “join the mailing list” image at the bottom of this page.

I have looked over that example, yet I still find myself confused as to what you mean by associated label.

OK, we misunderstood what you were asking. It would be better to separate the text from the background image, and put that text in the HTML itself. Then you could use an image replacement technique if you wanted to eep the font you have:

http://pmob.co.uk/temp/headerreplacement2.htm

Or you could use a web font instead.

I was thinking of something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#emailbox {
	float: left;
	height: 54px;
	margin: 2px 0 0 58px;
	width: 216px;
	position:relative;
	overflow:hidden;
}
#emailbox label, #emailbox label span {
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	height: 54px;
	width: 216px;
	text-align:center;
}
#emailbox label span { background:url(http://www.atlantareviewgroup.com/style/sectionemailbox.gif) no-repeat 0 0; }
#go {
	margin:26px 0 0 19px;
	width: 130px;
}
.submit {
	overflow:hidden;
	margin:26px 0 0;
}
#emailbox input {
	position:relative;
	z-index:2;
}
</style>
</head>

<body>
<form id="emailbox" action="" method="post" name="form1">
		<div>
				<label for="go">Join the Mailing List<span></span></label>
				<input id="go" type="text" onblur="input_reset(this)" onclick="input_focus(this)" value="your e-mail" name="go">
				<input class="submit" type="submit" value="Join">
		</div>
</form>
</body>
</html>


Yes, I believe this produced what I need to cover for when images are turned off. However, this seems to be a very different image replacement technique than the one I learned about before.

I understand how the z-index comes into play so that the input fields appear above the image. I understand the span over the label. I understand why emailbox and the span are absolutely placed- because #emailbox has the image attached to it, and so that the image appears over the label’s text, which is placed relatively below the image in the span.

What I don’t understand:

  1. #emailbox is given a float for reasons unknown
  2. Overflow is hidden, which I don’t understand.

Thank you for your posts. This is just what I needed.

It was taken from your own code which had the element floated left so I left it in place as you obviously needed it floated. It is not needed for the technique to work.

  1. Overflow is hidden, which I don’t understand.

The overflow:hidden is to stop any text from peeking out under the image should the text be wider than the image or indeed should the user resize the text larger.

Thank you for your posts. This is just what I needed.

You’re welcome and glad you are asking questions :slight_smile: