Zaloguj | Zarejestruj | FAQ
Anonymous

Need help

+ Odpowiedz

Posty: 11 1, 2


Need help

przez Mister Fox » Pt sty 20, 2012 9:52 pm

I want to use a picture for a submit button. I have a JPG of a magnifying glass I want to use for a search button, and I haven't been very successful so far. Here's the code as it is now:

<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this, 'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold; font-size: 10pt; height: 20px; width:188px; color: #000000; padding-left: 4px; margin: 0px -3px 0px 0px; border: 1px solid black; border-top-left-radius: 1em; border-bottom-left-radius: 1em; background-color: #ffffff" />
<input type="submit" value="Search" style="font-family: verdana; font-weight:bold; font-size: 10pt; width:88px; color:#ffffff; border: 1px solid black; border-top-right-radius: 1em; border-bottom-right-radius: 1em; background-color: #313131; " />
<div id="searchBoxSuggestions"></div>
</form>

Any help is appreciated!!

Ostatnio edytowano So sty 21, 2012 10:47 pm przez Mister Fox, łącznie edytowano 1 raz

Avatar użytkownika

Mister Fox

  • Posty: 33
  • Dołączył(a): Pt sty 20, 2012 9:45 pm

Re: Need help

przez chrisf1288 » So sty 21, 2012 3:29 am

You could use a code like this.

<input type="image" src="magnifying-glass.png" height="30" width="30" border="0">

It's kinda weird that it's not some thing more like this: <input type="submit" src="magnifying-glass.png" height=".... But yea, the image type does the same thing as submit.
Avatar użytkownika

chrisf1288

  • Posty: 128
  • Dołączył(a): N cze 26, 2011 1:01 am

Re: Need help

przez Mister Fox » So sty 21, 2012 7:56 pm

I must be doing something wrong. The photo isn't showing on page. Here's my site http://www.viddir.com

Here's the current code:

<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 20px; width:188px; color: #000000; padding-left: 4px; margin: 0px -3px 0px 0px;
border: 1px solid black; border-top-left-radius: 1em; border-bottom-left-radius: 1em; background-color:
#ffffff" />
<input type="image" src="../images/search.jpg" height="30" width="30" border="0">
<div id="searchBoxSuggestions"></div>
</form>

Ostatnio edytowano So sty 21, 2012 10:48 pm przez Mister Fox, łącznie edytowano 1 raz

Avatar użytkownika

Mister Fox

  • Posty: 33
  • Dołączył(a): Pt sty 20, 2012 9:45 pm

Re: Need help

przez chrisf1288 » So sty 21, 2012 8:08 pm

The problem is that the src (http://viddir.com/images/search.png) goes to a 404 page.
If you want, change the submit image's src to http://cdn1.iconfinder.com/data/icons/KDE_Crystal_Diamond_2.5_Classical_Mod/22x22/actions/find.png and see if it works. :)
Avatar użytkownika

chrisf1288

  • Posty: 128
  • Dołączył(a): N cze 26, 2011 1:01 am

Re: Need help

przez Mister Fox » So sty 21, 2012 10:45 pm

Here's the one I want to use: http://viddir.com/themes/default/images/search.jpg

But, I can't make it work for some reason.
Avatar użytkownika

Mister Fox

  • Posty: 33
  • Dołączył(a): Pt sty 20, 2012 9:45 pm

Re: Need help

przez chrisf1288 » So sty 21, 2012 10:49 pm

Here's a link to JsFiddle. It worked for me :)

http://jsfiddle.net/hUKyS/
Avatar użytkownika

chrisf1288

  • Posty: 128
  • Dołączył(a): N cze 26, 2011 1:01 am

Re: Need help

przez Mister Fox » So sty 21, 2012 10:55 pm

It worked! Thanks
Avatar użytkownika

Mister Fox

  • Posty: 33
  • Dołączył(a): Pt sty 20, 2012 9:45 pm

Re: Need help

przez chrisf1288 » So sty 21, 2012 11:07 pm

Glad to help!
Avatar użytkownika

chrisf1288

  • Posty: 128
  • Dołączył(a): N cze 26, 2011 1:01 am

Re: Need help

przez Mister Fox » N sty 22, 2012 7:05 pm

Is there some way to move the icon down to be level with the search bar?
Avatar użytkownika

Mister Fox

  • Posty: 33
  • Dołączył(a): Pt sty 20, 2012 9:45 pm

Re: Need help

przez atik » Wt sty 24, 2012 9:50 am

Mister Fox napisał(a):Is there some way to move the icon down to be level with the search bar?

apply this style codes
Kod: Zaznacz cały
#search-bar form {width:230px;}
              input#keyword{display:block;float: left;margin: 0 2px 0 0;}

for the input button, you can use this also
Kod: Zaznacz cały
width: 30px;display: block;float: right;
Avatar użytkownika

atik

  • Posty: 471
  • Dołączył(a): Pn paź 17, 2011 4:55 pm


+ Odpowiedz

1, 2

cron