...

View Full Version : Resolved Image Clickable Inside Form



JAG
07-14-2012, 11:11 AM
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()"

vwphillips
07-14-2012, 01:15 PM
<!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>

JAG
07-15-2012, 01:14 AM
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.



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum