<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = controls">
</script>
<script type="text/javascript">
window.onload = function () {
// Default InplaceEditor with no
// options
new Ajax.InPlaceEditor(
'editableElement',
);
// InplaceEditor with a modified
// clickToEditText value
new Ajax.InPlaceEditor(
'editableElement2',
{
// Specify the text to be used for
// the hover text of the editor
clickToEditText:
"Click here to start editing"
}
);
}
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>InPlaceEditor clickToEditText Option</h2>
<p>
The "clickToEditText" option is used to
specify the text to be shown when the user
hovers the mouse over the editable element.
</p>
<b>This element has the clickToEditText as
the default one.</b>
<div id="editableElement">
Hover over this element to see the
clickToEditText value.
</div>
<br>
<b>
This element has the clickToEditText
set to a custom value.
</b>
<div id="editableElement2">
Hover over this element to see the
clickToEditText value.
</div>
</body>
</html>