www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to place text over link image

Hybrid View

  1. #1
    Join Date
    Sep 2012
    Posts
    10

    How to place text over link image

    I am trying to figure out how to place text on top of a link image. Instead of all kinds of explaining here is a link to some test code. http://dutchbarn.net/issue01.html I have found some other questions on this forum that are simular but none seem to fix my problem. The 1st, 3rd, and 4th buttons perform the way I want. The second is an example of my attempt to place a heading on top of the image of course the image does not respond to the hover condition as the heading text is covering it. I can use an individual image file for each button with the text already part of the image but search engines won't see the text and it won't be part of the "html5 outline". It also does not seem to be a clean way to write the page as more downloading is needed than seems necessary. On the last button I used the image as a background but you will notice it does not display right when hovered over. Any suggestions?

  2. #2
    Join Date
    Sep 2012
    Posts
    10
    I have posted this question on a number of forums and aside from the useless reply above I have yet to receive a single reply! Does this question expose my stupidity or what? Am I missing something that is a no-brainer; surely others have had simular situations or not? Let me know at least if I missing the obvious! Thanx

  3. #3
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    Not too clear what you mean.

    An HTML image tag <img src="___">does not have a link
    <a href="_____"> ___</a> attribute. So, if you want viewer to click image instead of text for link, you wrap the image tag inside the link anchor tag. Like so
    <a href="_____"> <img src="______"> </a>

    As far as text on top of an image is concerned, think you would be using Z-index. The element has to be "positioned" to apply a z-index.

    It you have online link to your page, it might clarify things.

    ========
    Sorry, missed your link above.
    Last edited by auntnini; 11-27-2012 at 05:41 PM. Reason: missed link above

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    What you have seems too complicated to me
    <style type="text/css">
    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}
    #sidenav {
    width:190px;
    height:332px;
    margin:100px 0px 0px 60px;
    background:url('menu_rap.png');
    background-repeat:no-repeat;
    position:relative;
    }
    .navbtn {
    position:absolute;
    left:21px;
    width:193px;
    height:52px;
    border:0;
    }
    #btn1 {top:48px;}
    #btn2 {top:101px;z-index:-1;}
    #btn3 {top:154px;}
    #btn4 {top:207px;}
    #txt5 {position:absolute;
    width:193px;
    height:52px;
    left:21px;
    background-image: url('menu_button.png');
    top:260px;
    }
    h3 {position:absolute;top:103px;
    left:26px;
    }
    </style>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript">
    function navbtnlong(x)
    {x.style.width="200px";}
    function navbtnshort(x)
    {x.style.width="193px";}
    </script>
    Can't you just have one button and use the CSS a:hover to change the width, etc.? It's best to avoid images for link buttons.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles