Click to See Complete Forum and Search --> : adding smileys to a html guestbook
Larkdog
03-24-2003, 09:57 PM
Hi,
I have a website for my students and my guestbook is pretty dull. I would like to use some images of smileys that I have and allow all those who sign my guestbook to insert them whereever they wish. However, I can't figure it out. This is what I use at this point.
<script language="JavaScript">function addsmiley() { document.addguest.comments; document.addguest.comments.focus();}</script>
and this is what I tryed to place in the table of smileys:
<a href="javascript: addsmiley('<img src="/webpage/alien.gif" border=0>')"><img width=40 border=0 src="/webpage/alien.gif" alt="Alien"></a>
however, there is something wrong. Since I know didly sqwat about javascript, this is my feeble attempt at it. Did I get close or am I waaaaaaaaay off?
addguest page for my guestbook is http://24.144.19.198/guestbook/addguest.html
dabush
03-24-2003, 10:17 PM
i have a couple problems with your script. first of all, on the <a> tag for the alien, you have 2 sets of double quotes (big NONO). second of all, you shouldnt insert a pic into a textarea. you see what this forum does? it puts a code for the pic into the textarea. and then checks for that code at the end.
Larkdog
03-25-2003, 06:45 AM
well, since my guestbook and addguest page are html not script, how do you suggest i go about doing this? my plan was to have click the picture of the smiley and have it insert the html code itself for the location of the smiley. Isn't this doable?:confused: just like this forum. this forum adds code for the smiley, not the actual picture. I want mine to work the same way. how?
dabush
03-25-2003, 07:15 AM
o, u want to insert the actual <img> tag? most anything is doable. for each smiley picture, give it this onClick event
<img ... onClick="document.addguest.comments.value+='<img src='+this.src+'>'">
Larkdog
03-25-2003, 07:30 AM
well, i think i will try with dave's suggestion, although i don't know exactly what i need to change...
Larkdog
03-25-2003, 07:37 AM
hmm, getting more confused,
Dave, what exactly do I need to change about that script, i don't need to specify the height and width of the image b/c i resized all the images to a reasonable size.
do i need to change the obj.border code or the addSmiley(this) code?
and i hope this part is correct: "document.addguest.comments.value"
my form name is "addguest"
the section for adding smileys into is "comment"
is this correct?
dabush
03-25-2003, 07:55 AM
add
onclick="return addSmiley(this)"
to the end of each <img> tag
and add this into the <head> of your page
<script type="text/javascript">
function addsmiley(img) {
var str = '<img src="' + obj.src;
str += '" alt="' + obj.altSrc;
str += '" width="' + obj.width;
str += '" height="' + obj.height;
str += '" border="' + obj.border;
str += '">';
document.addguest.comments.value += str;
document.addguest.comments.focus();
return true;
}
</script>
Larkdog
03-25-2003, 11:05 AM
well, i did that, but it does nothing.
the style="cursor:pointer" part works, b/c when i hover, it is cursor, but the onclick="return addSmiley(this)" does nothing.
here's the page: http://24.144.19.198/guestbook/addguest.html
did i do something wrong?
Larkdog
03-25-2003, 11:08 AM
i am not too confident in the script function placed in the head. are you sure it is correct?
dabush
03-25-2003, 11:52 AM
it does not matter where that function is placed. if that doesn't work, try what i recommended a few posts above.
Larkdog
03-25-2003, 01:35 PM
ok guys, it doesn't work!
Larkdog
03-25-2003, 02:31 PM
i thought it might help to see the code from the page..
<HEAD>
<TITLE>
Sign My GuestBook
</TITLE>
<script type="text/javascript">
function addsmiley(img) {
var str = '<img src="' + obj.src;
str += '" alt="' + obj.altSrc;
str += '" width="' + obj.width;
str += '" height="' + obj.height;
str += '" border="' + obj.border;
str += '">';
document.addguest.comments.value += str;
document.addguest.comments.focus();
return true;
}
</script>
</HEAD>
<BODY BGCOLOR="#ffffff">
<H2 ALIGN=CENTER>
Sign My Guest Book and Receive
<FONT COLOR="#ff0000">
5 Bonus Points
</FONT>
,
once per 9 weeks.
</H2>
<FORM NAME="ADDGUEST" METHOD="POST" ACTION="http://24.144.19.198/cgi-bin/guestbook.pl">
<TABLE cellspacing="0" cellpadding="0" border="0" align="center">
<TR>
<td>
<center>
Click to use!
<br>
THIS DOESN'T WORK YET.
</center>
<table cellspacing=0 cellpadding=4 border=1 bordercolor=gold width=30%>
<tr>
<td align=center width=25%>
<img border=0 width=40 src="/webpage/alien2.gif" alt="Alien" style="cursor:pointer" onclick="return addSmiley(this)">
<BR>
<font size=3>
Alien
</font>
</td>
maybe this will help you help me.
Larkdog
03-25-2003, 05:50 PM
ok, thats for the heads up on the all caps form name. I didn't know that it mattered. I changed it to all lowercase letters.
Early I didn't put the entire html code from the page cause it was too much. there is a section called comments . Here it is:
<table>
<tr>
<td>
<FONT COLOR="#0000ff">
Comments:
</FONT>
<BR>
<TEXTAREA rows=9 cols=51 name="comments">
</TEXTAREA>
</td>
<tr>
</table>
what else is wrong with my code? why won't it work?
Larkdog
03-25-2003, 07:38 PM
as you wish, here is a working link...
http://24.144.19.198/guestbook/addguest.html
good luck
dabush
03-25-2003, 07:50 PM
i'll let dave take car of u. but ur flash intro is super-cool
Larkdog
03-25-2003, 07:56 PM
thanks man, i teach high school, and i teach myself this internet/website stuff. the parents and students love the website, i just add bits and pieces of things to make it better, and this is one that i think the students would really like. to be able to add smileys in their comments would be cool. but gettin it to work is tough... i had a good idea, just need the help of guys that are better at javascript than I :D
Larkdog
03-25-2003, 08:09 PM
would you be referring to the "addsmiley(img)" and "addsmiley(this)"?
b/c if you aren't, then i have no clue!
Larkdog
03-25-2003, 08:12 PM
ooooh you are referring to the CASE of the letters?!?!
is javascript case sensitive?
Larkdog
03-25-2003, 08:15 PM
what about the parts that i made bold in the previous reply? the "img" part and the "this" part? should they both be the same?
Larkdog
03-25-2003, 08:21 PM
arrrrgggghhh!
i made the appropriate changes, but it still gives an error on the page. nothing happens when i click the picture.
http://24.144.19.198/guestbook/addguest.html
Larkdog
03-25-2003, 08:31 PM
ok, but when i switched it back, same problem...
please don't get frustrated with me!!?!! I enjoy working through tough problems to the end!
i now have this in the head:
<script type="text/javascript">
function addsmiley(img) {
var str = '<img src="' + obj.src;
str += '" alt="' + obj.altSrc;
str += '" border="' + obj.border;
str += '">';
document.addguest.comments.value += str;
document.addguest.comments.focus();
return true;
}
</script>
and this for each img:
onClick="return addsmiley(this)"
but i still get the same problem, error on page...
Larkdog
03-25-2003, 09:05 PM
sorry, i was playing with the new toy... i must say, you are a java-genius!
please sign my guestbook and take credit for the smileys feature, check out my site anyway, www.MrLarkins.com
so lemme get this straight
this part var str = '<img src="' + img.src; str += '" alt="' + img.alt; str += '" border="' + img.border; str += '">'
is a string? and it pieces together the html code that i would need to call up the pic.
i didn't know that javascript could read AND APPLY html code like you have it doing here. very cool
dabush
03-25-2003, 09:10 PM
ya, i signed it (hope u dont mind). can i get extra bonus points? ;)
Larkdog
03-25-2003, 09:12 PM
LOL
if you were in my algebra or geometry class, i'd give you an A right now, even with 9 weeks left!