Question

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>

Answer 1

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.net/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.net/WUnQW/6/