Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    63
    Thanks
    24
    Thanked 0 Times in 0 Posts

    Question Image Clickable Inside Form

    Hi all,

    I currently have a search form with a CSS background image of a magnifying glass as a background. Being that it is a background image, I was pulling my hair out trying to make the image clickable, but was unable to. However, I found this page that has the exact effect I'm looking for in their search box: http://www.1up.com/

    I looked at their code, but was unable to "reverse engineer it."
    Could anyone enlighten me how this is done? From what I gather, it has to do something with onclick="document.getElementById('search').submit()"
    Last edited by JAG; 07-15-2012 at 12:15 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .search {
      width:200px;height:22px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
    }
    
    .search INPUT {
      height:20px;margin-Left:30px;background-Color:#FFFFCC;border-Width:0px;
    }
    /*]]>*/
    </style></head>
    
    <body>
    <div class="search"><input name="" /></div>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    JAG (07-15-2012)

  • #3
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    63
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Thanks Vic. I had to add to your code in order to make the <div> actually clickable, I also changed around the colors to differentiate the image from the form field, but besides that, your example lead me in the right direction. I'll leave my final code in case anyone needs it for future reference.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    .search {
    	background-color: green;
    	border-radius: 10px;
    	width: 200px;
    	height: 22px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
    }
    
    .search input {
    	height: 20px;
    	margin-left: 30px;
    	background-color: green;
    	border-width: 0px;
    }
    
    .search a { /* A link inside a <div>. */
    	display: block;
    }
    </style>
    </head>
    
    <body style="background-color: black;">
    
    <div class="search"><a href=""><input name="" /></a></div>
    
    </body>
    
    </html>


  •  

    Posting Permissions

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