在表单上的图像链接上的文本

时间:2013-03-01 08:29:45

标签: css image hyperlink

好的,所以我很难在我的页面上设置Aweber表单的一部分。表单有一个按钮,用户单击该按钮即可加入邮件列表。我想在上面添加一些文字(这样我就可以A:B分开测试文本了)。我设置了第二个div并且绝对定位文本来完成这个,它完美地运行。

问题是当用户将鼠标悬停在按钮上时。文本在图像上的任何地方,它都会否定链接。请帮忙。

您可以在www.pregnantatlast.com

在线查看该页面

以下是代码:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Pregnant At Last - Conditions that Stop Pregnancy, Solutions</title>
<!-- InstanceEndEditable -->
<style type="text/css">
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
    <div id="header">
      <div id="header_txt">
                    Pregnant At Last
        <h1>Increase Fertility - Get Pregnant - Naturally</h1>
        </div>
        <div id="menu">
          <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="causes.html">Causes</a></li>
                <li><a href="miscarriage.html">Miscarriage</a></li>
                <li><a href="nutrition.html">Nutrition</a></li>
                <li><a href="conditions.html">Conditions</a></li>
            </ul> 
        </div><!--End menu-->
    </div><!--End header-->
    <!-- InstanceBeginEditable name="Content" -->
    <div id="content_bg">
      <div id="content">
        <h1>Common fixable conditions often lead to infertility.</h1>
        <div class="picture"> <img src="Assets/Images/44037990.jpg" width="301" alt="Couple with Doctor" />
        </div>
        <div id="caption">
          <p>2/3 of all infertility cases are linked to the woman. &nbsp; Many can be helped.</p>
        </div>
        <div id="list">
          <ul>
            <li>Environmental factors are known to block conception</li>
            <li>Some medical treatments alter sperm production and cause ovarian problems</li>
            <li>Simple lifestyle changes can fix many conditions</li>
            <li>How to breathe so your body heals itself</li>
            <li>Herbs that help your body clense</li>
          </ul>
          <p> Learn what to <span>do</span> and more importantly, what <span> not to do</span>. </p>
          <p> Heal your <span>body</span> and become <span>fertile</span> in no time! </p>
        </div>
        <!--End list-->
        <div id="formbox">
          <h2>Learn Secrets to Get Pregnant<br />Naturally in Months</h2>
          <div id="formtxt">
            <h3>Sign up for a FREE 7 day course and recieve:</h3>
            <p>-10 Household Chemicals you Must Avoid</p>
            <p>-Simple technique to double chances of conception</p>
            <p>-Ways to help your parner increase his sperm count</p>
          </div>
          <!--End formtxt-->
          <div id="form">
            <!-- AWeber Web Form Generator 3.0 -->
            <style type="text/css">
                    #af-form-69035635 .af-body .af-textWrap{width:98%;display:block;float:none;}
                    #af-form-69035635 .af-body input.text, #af-form-69035635 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;}
                    #af-form-69035635 .af-body input.text:focus, #af-form-69035635 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
                    #af-form-69035635 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;}
                    #af-form-69035635 .af-body{padding-bottom:0px;padding-top:5px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:11px;font-family:Verdana, sans-serif;}
                    #af-form-69035635 .af-quirksMode{padding-right:10px;padding-left:10px;}
                    #af-form-69035635 .af-standards .af-element{padding-right:10px;padding-left:10px;}

                    #af-form-69035635 .buttonContainer input.submit{background-color:#c20606;background-image:url("http://www.pregnantatlast.com/Assets/Images/button_arrow3.jpg");color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}

                    #af-form-69035635 .buttonContainer input.submit{width:auto;}
                    #af-form-69035635 .buttonContainer{text-align:center;}
                    #af-form-69035635 button,#af-form-69035635 input,#af-form-69035635 submit,#af-form-69035635 textarea,#af-form-69035635 select,#af-form-69035635 label,#af-form-69035635 optgroup,#af-form-69035635 option{float:none;position:static;margin:0;}
                    #af-form-69035635 div{margin:0;}
                    #af-form-69035635 form,#af-form-69035635 textarea,.af-form-wrapper,.af-form-close-
                    #af-form-69035635 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
                    #af-form-69035635 input,#af-form-69035635 button,#af-form-69035635 textarea,#af-form-69035635 select{font-size:100%;}
                    #af-form-69035635 select,#af-form-69035635 label,#af-form-69035635 optgroup,#af-form-69035635 option{padding:0;}
                    #af-form-69035635,#af-form-69035635 .quirksMode{width:329px;}
                    #af-form-69035635.af-quirksMode{overflow-x:hidden;}
                    #af-form-69035635{background-color:#FFFFFF;border-color:transparent;border-width:1px;border-style:solid;}
                    #af-form-69035635{display:block;}
                    #af-form-69035635{overflow:hidden;}
                    .af-body .af-textWrap{text-align:left;}
                    .af-body input.image{border:none!important;}
                    .af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
                    .af-body input.text{width:100%;float:none;padding:2px!important;}
                    .af-body.af-standards input.submit{padding:4px 12px;}
                    .af-clear{clear:both;}
                    .af-element label{text-align:left;display:block;float:left;}
                    .af-element{padding:5px 0;}
                    .af-form-wrapper{text-indent:0;}
                    .af-form{text-align:left;margin:auto;}
                    .af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
                    .lbl-right .af-element label{text-align:right;}
                    body {
                    }
                    </style>
            <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
              <div style="display: none;">
                <input type="hidden" name="meta_web_form_id" value="69035635" />
                <input type="hidden" name="meta_split_id" value="" />
                <input type="hidden" name="listname" value="4pregnantatlast" />
                <input type="hidden" name="redirect" value="http://pregnantatlast.com/welcome.hmtl" id="redirect_6f08e83ce4f3bc074b25117c5105d14d" />
                <input type="hidden" name="meta_redirect_onlist" value="http://pregnantatlast.com/welcome.hmtl" />
                <input type="hidden" name="meta_adtracking" value="Pregnant_At_Last_Form" />
                <input type="hidden" name="meta_message" value="1" />
                <input type="hidden" name="meta_required" value="name,email" />
                <input type="hidden" name="meta_tooltip" value="" />
              </div>
              <div id="af-form-69035635" class="af-form">
                <div id="af-body-69035635"  class="af-body af-standards">
                  <div class="af-element">
                    <label class="previewLabel" for="awf_field-42946097">Name: </label>
                    <div class="af-textWrap">
                      <input id="awf_field-42946097" type="text" name="name" class="text" value=""  tabindex="500" />
                    </div>
                    <div class="af-clear"></div>
                  </div>
                  <div class="af-element">
                    <label class="previewLabel" for="awf_field-42946098">Email: </label>
                    <div class="af-textWrap">
                      <input class="text" id="awf_field-42946098" type="text" name="email" value="" tabindex="501"  />
                    </div>
                    <div class="af-clear"></div>
                  </div>
                  <div class="af-element buttonContainer">
                    <input name="submit" id="af-submit-image-69035635" type="image" class="image" style="background: none;" alt="Submit Form" src="http://www.pregnantatlast.com/Assets/Images/button_arrow3.jpg" tabindex="502" />
                    <div class="af-clear"></div>
                  </div>
                </div>
              </div>
              <div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=bJwMzKxszKw=" alt="" /></div>
            </form>
            <script type="text/javascript">
                        <!--
                        (function() {
                            var IE = /*@cc_on!@*/false;
                            if (!IE) { return; }
                            if (document.compatMode && document.compatMode == 'BackCompat') {
                                if (document.getElementById("af-form-69035635")) {
                                    document.getElementById("af-form-69035635").className = 'af-form af-quirksMode';
                                }
                                if (document.getElementById("af-body-69035635")) {
                                    document.getElementById("af-body-69035635").className = "af-body inline af-quirksMode";
                                }
                                if (document.getElementById("af-header-69035635")) {
                                    document.getElementById("af-header-69035635").className = "af-header af-quirksMode";
                                }
                                if (document.getElementById("af-footer-69035635")) {
                                    document.getElementById("af-footer-69035635").className = "af-footer af-quirksMode";
                                }
                            }
                        })();
                        -->
                    </script>
            <!-- /AWeber Web Form Generator 3.0 -->
          </div>
          <!--End form-->
        <div id="button_ttl"> Successful Pregnancy<br />
            Starts Here </div>
          <!--End button_ttl-->
        </div>
        <!--End formbox-->
        <div id="arrow"> <img src="Assets/Images/red-arrow.png" width="252" height="415" alt="Arrow" /> </div>
        <!--End arrow-->
        <!--End content-->
      </div>
        <!--End content-->
      </div>
      <!--End content-->
    </div><!--End content_bg-->
    <!-- InstanceEndEditable -->
        <div id="footer">
        <div id="ft_menu">
        <ul>
                <li><a href="service.html">Terms of Service</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
                <li><a href="sitemap.html">Site Map</a></li>
                <li><a href="privacy.html">Privacy Policy</a></li>
                <li><a href="contact.html">Contact Us</a></li>

          </ul>
        </div><!--End ft_menu-->
        <div id="foot_txt">
            Pregnant At Last<br />
            4043 Mahinahina Pl.<br />
            Lahaina, HI 96761<br />
        </div>
        </div>
</body>
<!-- InstanceEnd --></html>

2 个答案:

答案 0 :(得分:0)

我不是专家。 但我知道我的文字与图像有类似之处。 我用changin z-indexes

修复了它

尝试使用正z-index

希望这会有所帮助。

这是关于z-index和图像链接的另一个堆栈: Link using z-index can't be clicked even though it's on top, in both Firefox & IE

答案 1 :(得分:0)

你错过了重定向页面。

变化:

<input type="hidden" name="redirect" value="http://pregnantatlast.com/welcome.hmtl" id="redirect_6f08e83ce4f3bc074b25117c5105d14d" />

要:

<input type="hidden" name="redirect" value="http://pregnantatlast.com/welcome.html" id="redirect_6f08e83ce4f3bc074b25117c5105d14d" />