how to draw a frame around an element

Mel · Apr 21, 2007

I need to draw a red frame around the element under current pointer.

I have seen it done in debuggers, but need to have it in my
application, without the need to download and install applications.

Any help is appreciated

Janwillem Borleffs · Apr 21, 2007

Mel said:
I need to draw a red frame around the element under current pointer.

I have seen it done in debuggers, but need to have it in my
application, without the need to download and install applications.

Any help is appreciated

Not that hard to accomplish:

var elem, elemOriginalBorder;

function borderOn(e) {
if (!e) e = event;
e = e.target || e.srcElement;
if (e && e.style) {
elem = e;
elemOriginalBorder = e.style.border;
e.style.border = '1px solid red';
}
}

function borderOff(e) {
if (elem) {
elem.style.border = elemOriginalBorder;
}
}

document.onmouseover = borderOn;
document.onmouseout = borderOff;

JW

scripts.contact · Apr 21, 2007

I need to draw a red frame around the element under current pointer.

I have seen it done in debuggers, but need to have it in my
application, without the need to download and install applications.

Any help is appreciated

try:

<html>
<head>
<title>Borders</title>
<script>
var pv={e:'',s:''}
document.onmousemove=function(Event){
Event=(Event||event)
Eleme=Event.srcElement||Event.target
if(pv.e)pv.e.style.border=pv.s
pv.e=Eleme;pv.s=Eleme.style.border
Eleme.style.border="1px dashed red"
}
</script>
</head>
<body>
<div>A</div>
<p><span>B</span><b>dsf</b></p>
</body>
</html>

prince · Apr 21, 2007

I need to draw a red frame around the element under current pointer.

I have seen it done in debuggers, but need to have it in my
application, without the need to download and install applications.

Any help is appreciated

CSS is better than javascript for this.
for example try
-------------------------HTML CODE ---------------------
<html><head>
<style type="text/css">
.brdr:hover{border:1px solid #F00; }
</style>
</head>
<body>
<div class="brdr"> this will have a border</div>
<div> this wont</div>
</body></html>
------------------------------ End sample code -------------
HTH
Prince

prince · Apr 21, 2007

try:

<html>
<head>
<title>Borders</title>
<script>
var pv={e:'',s:''}
document.onmousemove=function(Event){
Event=(Event||event)
Eleme=Event.srcElement||Event.target
if(pv.e)pv.e.style.border=pv.s
pv.e=Eleme;pv.s=Eleme.style.border
Eleme.style.border="1px dashed red"
}
</script>
</head>
<body>
<div>A</div>
<p><span>B</span><b>dsf</b></p>
</body>
</html>

VK · Apr 21, 2007

CSS is better than javascript for this.

It is, but until IE 6 remains in a non-negligible use, :hover rule
will be limited to links only - this is the only element where IE6
supports :hover

Mel · Apr 21, 2007

try:

<html>
<head>
<title>Borders</title>
<script>
var pv={e:'',s:''}
document.onmousemove=function(Event){
Event=(Event||event)
Eleme=Event.srcElement||Event.target
if(pv.e)pv.e.style.border=pv.s
pv.e=Eleme;pv.s=Eleme.style.border
Eleme.style.border="1px dashed red"
}
</script>
</head>
<body>
<div>A</div>
<p><span>B</span><b>dsf</b></p>
</body>
</html>

Your code works fine except one little glitch. On mouse over does the
job of placing border, however on MousOut, My element disapears
completelty from the screen. Can't tell you why, I just copied your
code into my app without any change and that is what is happening with
form elements like text etc.

Any pointer is appreciated

scripts.contact · Apr 21, 2007

Your code works fine except one little glitch. On mouse over does the
job of placing border, however on MousOut, My element disapears
completelty from the screen. Can't tell you why, I just copied your
code into my app without any change and that is what is happening with
form elements like text etc.

The code works fine for me in FF2,IE6,OP9

Mel · Apr 21, 2007

The code works fine for me in FF2,IE6,OP9- Hide quoted text -

- Show quoted text -

Just wondering; did you try it on a form text field ?
thanks

How to properly insert a landing page within same container beneath an image element?	1	Oct 6, 2024
Can't wrap text around image and one more	1	Jul 25, 2025
Update element value ViewWeb2 .net Control	1	Oct 7, 2022
Iam having trouble adding a level editor to my platformer	0	Nov 4, 2025
How to paint an element in screen using javascript?	1	Jan 11, 2023
Physics coding -> getting the trajectory of an object with a force applied to it.	2	Oct 21, 2024
How to go about building a crud app when you are a noob	1	Jan 2, 2023
How to View an OST file without Microsoft Outlook?	5	Nov 18, 2024

how to draw a frame around an element

Mel

Janwillem Borleffs

scripts.contact

prince

prince

VK

Mel

scripts.contact

Mel

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads