<!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 custom color
// assigned
new Ajax.InPlaceEditor(
'editableElement2',
{
// Specify the color to
// be used to highlight the
// element
highlightColor: "#00FF00"
}
);
// InPlaceEditor with a custom color
// assigned
new Ajax.InPlaceEditor(
'editableElement3',
{
// Specify the color to
// be used to highlight the
// element
highlightColor: "#FF00FF"
}
);
}
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
h2
>InPlaceEditor highlightColor Option</
h2
>
<
p
>
The "highlightColor" option is used to
specify the color to be used when the
user hovers over the editable element.
</
p
>
<
b
>
This element has the highlightColor
as the default one.
</
b
>
<
div
id
=
"editableElement"
>
Hover over this element to
see the highlightColor.
</
div
>
<
br
>
<
b
>
This element has the highlightColor
set to a custom color.
</
b
>
<
div
id
=
"editableElement2"
>
Hover over this element to
see the highlightColor.
</
div
>
<
br
>
<
b
>
This element has the highlightColor
set to a another custom color.
</
b
>
<
div
id
=
"editableElement3"
>
Hover over this element to see
another highlightColor.
</
div
>
</
body
>
</
html
>