I want to draw a form where there will be some textarea, on the textarea there will be a little image [the image's size will be smaller than the size of the textarea], and clicking on the image will call a function fx() Can anyone code this for me in JavaScript/jquery/CSS ?

In this image the GO is an image, clicking on it will call Fx()

i tried with it and failed (and dont know how to attach a function on the image)

.searchform {
display: inline-block;
padding: 3px 5px;
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
}


<form class="searchform">
<input id="t" class="searchfield" value="Search..." type="text">
<input class="searchbutton" value="Go" type="button">
</form>

I want to draw a form where there will be some textarea, on the textarea there will be a little image [the image's size will be smaller than the size of the textarea], and clicking on the image will call a function fx() Can anyone code this for me in JavaScript/jquery/CSS ?

In this image the GO is an image, clicking on it will call Fx()

i tried with it and failed (and dont know how to attach a function on the image)

.searchform {
display: inline-block;
padding: 3px 5px;
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
}


<form class="searchform">
<input id="t" class="searchfield" value="Search..." type="text">
<input class="searchbutton" value="Go" type="button">
</form>

• javascript
• jquery
• css

• Are the height and width of the textarea known? – Pekka Commented Apr 22, 2011 at 8:00
• 2 Do you want someone to do the work for you, or do you want help solving a problem? I would appreciate if you gave it a try your self first, and then ask the question if you are stuck. This is not "RentACoder". – Martin at Mennt Commented Apr 22, 2011 at 8:00
• 2 @Martin Hey martin, where are you ! i posted my code ! – Sourav Commented Apr 22, 2011 at 8:13
• 1 -1 for the ment related to Znarkus. – Dr.Molle Commented Apr 22, 2011 at 8:27
• 1 Come on, i am telling to code just 10 or maximum 15 lines not about hundred or thousands of lines ! – Sourav Commented Apr 22, 2011 at 10:21

3 Answers 3

What I would do is

• Place the "go" element before the textarea, make it position: absolute so it hovers over the top left corner of the area

• Put a wrapper with position: relative around the elements

• Use jQuery's .width() and .height() functions to adjust the position of the "go" element.

HTML:

<div id="wrapper">
<div id="go">Go</div> 
<textarea id="area" rows=33 cols=22></textarea>
</div>

CSS:

#wrapper { position: relative }
#go { width: 16px; tpp: 16px; position: absolute; background-color: yellow }

JS:

$(function(){
$("#go").css("left", $("#area").width() - $("#go").width());
$("#go").css("top", $("#area").height() - $("#go").height());
});

http://jsfiddle/WUnQW/

There's an even simpler approach that doesn't need JavaScript at all, but uses display: inline-block which won't work properly in IE6/7 (although I guess it could be made work in IE7 by using a span instead of a div for wrapper).

http://jsfiddle/WUnQW/6/

You cannot place an image tag inside a textarea unless it's a background image. To work around this Use a div with contentEditable attribute. This will act like a textarea and will allow you to insert an <img> tag inside. That's how WYSIWYG editors work. Then with simpe CSS you can position the image bottom right.

<div contentEditable="true"> type here
 <img id="textimg" src="..." />
</div>

To run function fx() when image is clicked on you can do.

function fx() {
    alert('this is a function');
}
$('#textimg').click(fx);

Check working example at http://jsfiddle/6bCRJ/4/

You can wrap image into an anchor <div><a ... ><Image /></a>.</div> then you can call the click attribute. Then use CSS to absolute position the <div>