...

View Full Version : Adding Graphic To Text Field



Dan6971
01-15-2004, 04:14 PM
How can I add a graphic to a text field, like on the top of this page:

:thumbsup: CLICK HERE (http://www.smh.com.au/) :thumbsup:


Thanks,
Dan

liorean
01-15-2004, 04:22 PM
Using CSS. Set a background-image, and background-repeat should be no-repeat. Override it in an onmouseover and an onfocus handler, so that it disappears when mousing over or focusing. If you wish to reset it, override the setting from the mouseover or focus events with onmouseout and onblur handlers.

Dan6971
01-15-2004, 04:28 PM
How would I add, what you said, to this code:

<TABLE width="480" border="8" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#000000">
<tr>
<td height="21"><font size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong>Super
Search</strong></font></td>
</tr>
<tr>
<td height="26"><form onKeyUp="highlight(event)" style="{display:inline}" class="one">
<input name="S1" type="text" style="background-color:#CCFF99;" value="Start Here" size="40" onFocus="clearText(this)">
<input type="button" value="Add To All Searches" onclick="popSearch(this.form)">
<input type="button" value="Clear Text" onclick="this.form.S1.value=''">
</form></td>
</tr>
</table>


Thank you,
Dan

Dan6971
01-15-2004, 07:43 PM
Liorean?

Roy Sinclair
01-15-2004, 08:04 PM
How much CSS do you know? It appears that you've got a mix of deprecated (that means obsolete) properties and CSS already but since you didn't seem to understand the reply it'd help to know how much learning you need in order to be able to understand.

Dan6971
01-15-2004, 08:09 PM
I know that I have to add CSS scripts to my head and then add something that corresponds to that CSS script in the Form or Table, etc. that I want - correct?


Thank you,
Dan

Roy Sinclair
01-15-2004, 08:59 PM
Not really, you've already got a style on your input field where you're setting it's background color. You only need to set up the background image and repeat in place of that style.

http://www.w3.org/TR/CSS2/colors.html#propdef-background-image

Dan6971
01-15-2004, 09:18 PM
Thank you, Roy...

As I am a novice, how can I add this image:

http://www.PianoManFan.com/LootTool/FieldText1.gif

...to this code:

<TABLE width="450" border="8" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#000000">
<tr>
<td width="441"> <SCRIPT LANGUAGE="JavaScript">
<!-- Begin

var initialsubj="Check Out: www.LOOTTOOL.com"
var initialmsg="Hey...\n Check Out The Best Comparison Price Search Portal: http://www.LOOTTOOL.com"
var good;
function checkEmailAddress(field) {

var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.co op)|(\.museum)|(\.name)|(\.pro)|(\..{2,2}))$)\b/gi);
if (goodEmail) {
good = true;
}
else {
alert('Please Enter A Valid E-Mail Address.');
field.focus();
field.select();
good = false;
}
}
u = window.location;
function mailThisUrl() {
good = false
checkEmailAddress(document.eMailer.email);
if (good) {

//window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+document.title+" "+u;
window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+initialmsg
}
}
// End -->
</script> <form name="eMailer" style="{display:inline}" class="two">
<strong><font size="3" face="Verdana, Arial, Helvetica, sans-serif">Tell
A Friend: </font> </strong>
<input type="text" name="email" size="30" value="Enter E-Mail Address Here" onFocus="this.value=''" onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true" onMouseOut="window.status='';return true" style="background-color:#CCFF99;">
<a href="onClick=mailThisUrl();"><img name="Go" src="http://www.PianoManFan.com/LootTool/EnterButton.gif" width="72" height="23" border="0" alt="" onMouseOver="window.status='Click Here To Tell A Friend About www.LOOTTOOL.com'; return true" onMouseOut="window.status='';return true"></a>
</form></td>
</tr>
</table>


(Also, I tried to put in a SUBMIT graphic, but it's suddenly not working, as when the BUTTON was on the page. Can you help me with that, please?)



THANK YOU!!!
Dan

Roy Sinclair
01-15-2004, 09:41 PM
After the all nasty popup windows and everything else that happened when I clicked on the link above Forget I ever replied.

:mad: :mad: :mad: :mad: :mad: :mad: :mad: :mad:

Dan6971
01-16-2004, 05:37 AM
Roy, I am so sorry, I got dyslexic with my link...


http://www.pianomanfan.com/LootTool/TextField1.gif


That's the real one...


Thanks,
Dan

Roy Sinclair
01-16-2004, 02:36 PM
<input type="text"
name="email"
size="30"
value="Enter E-Mail Address Here"
onFocus="this.value='';this.style.background='#CCFF99'"
onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true"
onMouseOut="window.status='';return true"
style="background-image: url('http://www.pianomanfan.com/LootTool/TextField1.gif'); background-repeat: no-repeat;" />

Dan6971
01-16-2004, 03:23 PM
Roy, I messed around with your code for so long, but I was unsuccessful, how can I use your above code, with my code:


<form name="eMailer" style="{display:inline}" class="two">
<strong><font color="#CCFF99" size="3" face="Verdana, Arial, Helvetica, sans-serif">Tell
A Friend: </font> </strong>
<input name="email" type="text" style="background-color:#CCFF99;" onFocus="this.value=''" onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true" onMouseOut="window.status='';return true" value="Enter E-Mail Address Here" size="30">
<input name="button" type="button" onClick="mailThisUrl();" onMouseOver="window.status='Click Here To Tell A Friend About www.LOOTTOOL.com'; return true" onMouseOut="window.status='';return true" value="Send This URL">
</form>



Thanks SOOOOOOOO Much,
Dan

Garadon
01-16-2004, 03:42 PM
Like this I think, oh and dan when u make a post and wanna post some code there is a button just above the text area '#' if you click that and then make a space and click ok to the promt u get 2 code tags post the code inside that.



<form name="eMailer" style="{display:inline}" class="two">
<strong><font color="#CCFF99" size="3" face="Verdana, Arial, Helvetica, sans-serif">Tell
A Friend: </font> </strong>
<input type="text"
name="email"
size="30"
value="Enter E-Mail Address Here"
onFocus="this.value='';this.style.background='#CCFF99'"
onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true"
onMouseOut="window.status='';return true"
style="background-url: url('http://www.pianomanfan.com/LootTool/TextField1.gif'); background-repeat: none;" />

<input name="button" type="button" onClick="mailThisUrl();" onMouseOver="window.status='Click Here To Tell A Friend About www.LOOTTOOL.com'; return true" onMouseOut="window.status='';return true" value="Send This URL">
</form>

Dan6971
01-16-2004, 03:58 PM
Roy, it didn't work, can you look at it again, please? :(

Roy Sinclair
01-16-2004, 04:06 PM
It didn't work because of a typo, I put "background-url" where I should have put "background-image". Change that and you should be good to go. Also note that I wrote "none" as the value for the "background-repeat" and it should have been "no-repeat" instead.

(I also edited the original message to fix those problems).

Dan6971
01-16-2004, 04:20 PM
Roy, you F*CKING GENIUS!!!

I had to tweak the code a bit, to work, but here it is:

(How can I get the text field to always be #CCFF99?) And how can I change those BUTTONS to GRAPHICS (same question for the next FORM on that page)? Oh, and can you see about adding a GRAPHIC to that second FORM, as you did with the first form? You are so awesome at this!!!


<form name="eMailer" style="{display:inline}" class="two">
<strong><font color="#CCFF99" size="3" face="Verdana, Arial, Helvetica, sans-serif">Tell
A Friend: </font> </strong>
<input type="text"
name="email"
size="30"
onFocus="this.value='';this.style.background='#CCFF99'"
onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true"
onMouseOut="window.status='';return true"
style="background-image: url('http://www.pianomanfan.com/LootTool/TextField1.gif'); background-repeat: no-repeat;" />

<input name="button" type="button" onClick="mailThisUrl();" onMouseOver="window.status='Click Here To Tell A Friend About www.LOOTTOOL.com'; return true" onMouseOut="window.status='';return true" value="Send This URL">
</form>


THANK YOU!!!!!!!
Dan

Roy Sinclair
01-16-2004, 05:26 PM
Add the code in blue:



<form name="eMailer" style="{display:inline}" class="two">
<strong><font color="#CCFF99" size="3" face="Verdana, Arial, Helvetica, sans-serif">Tell
A Friend: </font> </strong>
<input type="text"
name="email"
size="30"
onFocus="this.value='';this.style.background='#CCFF99'"
onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true"
onMouseOut="window.status='';return true"
style="background: #CCFF99;background-image: url('http://www.pianomanfan.com/LootTool/TextField1.gif'); background-repeat: no-repeat;" />

<input name="button" type="button" onClick="mailThisUrl();" onMouseOver="window.status='Click Here To Tell A Friend About www.LOOTTOOL.com'; return true" onMouseOut="window.status='';return true" value="Send This URL">
</form>


There are already messages on this forum about how to replace buttons with images in forms. You just need to search the forum.

Dan6971
01-16-2004, 05:33 PM
Roy... It works!!! Check out the site now!!!

Click Here (http://www.PianoManFan.com/Test2.html)

I can change the buttons to images on those two forms, but then, they don't operate properly. Can you please take a look at them? Please??? For the image, for now, I would just use the "ENTER" button in the other tables.


Thanks so much!
Dan

Roy Sinclair
01-16-2004, 06:22 PM
Using "document.test.submit()" is wrong:



<a href="javascript:document.forms["Name of form goes here"].submit();" ...><img ...></a>


Don't copy the space between the "java" and "script" that the BBS software insists on inserting.

Dan6971
01-16-2004, 06:44 PM
Here is what I did, but it didn't work... :( Please help me...




<form name="eMailer" style="{display:inline}" class="two">
<strong><font color="#CCFF99" size="3" face="Verdana, Arial, Helvetica, sans-serif">Tell
A Friend: </font> </strong>
<input type="text"
name="email"
size="26"
onFocus="this.value='';this.style.background='#CCFF99'"
onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true"
onMouseOut="window.status='';return true"
style="background: #CCFF99;background-image: url('http://www.pianomanfan.com/LootTool/TextField1.gif'); background-repeat: no-repeat;" />

<input name="button" onClick="mailThisUrl();"><a href="javascript:document.forms["eMailer"].submit();"><img="http://www.pianomanfan.com/LootTool/Enter.gif">onMouseOver="window.status='Click Here To Tell A Friend About www.LOOTTOOL.com'; return true" onMouseOut="window.status='';return true" value="Send"></a>
</form>





Thank you so much, Roy...
Dan

Dan6971
01-17-2004, 02:23 AM
Roy, can you please help me convert my FORM BUTTONS to GRAPHIC BUTTONS? I have tried, but then the buttons don't work properly...

Click Here To View The Page (http://www.PianoManFan.com/Test2.html)

Thanks,
Dan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum