473,473 Members | 1,563 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

how to draw a frame around an element

Mel
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

Apr 21 '07 #1
8 2173
Mel wrote:
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
Apr 21 '07 #2
On Apr 21, 3:07 am, Mel <MelHer...@gmail.comwrote:
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>

Apr 21 '07 #3
On Apr 21, 2:07 pm, Mel <MelHer...@gmail.comwrote:
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>
<divthis wont</div>
</body></html>
------------------------------ End sample code -------------
HTH
Prince
--
http://dyumnin.com/webapps/howto/web...vascript.shtml
http://dyumnin.com/

Apr 21 '07 #4
On Apr 21, 7:06 pm, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
On Apr 21, 3:07 am, Mel <MelHer...@gmail.comwrote:
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>

Apr 21 '07 #5
VK
On Apr 21, 7:06 pm, pri...@dyumnin.com wrote:
On Apr 21, 2:07 pm, Mel <MelHer...@gmail.comwrote:
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.
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

Apr 21 '07 #6
Mel
On Apr 21, 7:06 am, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
On Apr 21, 3:07 am, Mel <MelHer...@gmail.comwrote:
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>
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

Apr 21 '07 #7
Mel wrote:
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"
}
>
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

Apr 21 '07 #8
Mel
On Apr 21, 1:58 pm, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
Mel wrote:
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"
}
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- Hide quoted text -

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

Apr 21 '07 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Allan Horwitz | last post by:
I am trying to draw a rectangle onto a pane. My program will compile and run but the rectangle does not seem to get drawn. When the program is run the program frame opens up, but I cannot see a...
1
by: TPG | last post by:
I'd like a Javascript function I have written to be invoked whenever *any* new document is been loaded into a particular frame (i.e I don't control the incoming document's BODY tag). Under...
2
by: Paul | last post by:
I have a simple frame-based application where title information appears in a top frame and a lower frame contains the content for the application. One of the needs for this app is for a status...
4
by: Kai Grossjohann | last post by:
I have a file which contains component definitions, along with their x/y coordinates and width and height. Examples for components are a short text string, a text entry field, a date entry field,...
1
by: John | last post by:
How to draw anmation in window app? I mean... like how can I draw a dot in window at a point then moves to another point and we can see it moves. Please explain in detail.
4
by: Val | last post by:
When I am using Graphics.DrawString, I can only draw a string either horizontally or vertically. Is the a way to draw under arbitrary angle - parallel to some line? I would appreciate a code...
1
by: zxo102 | last post by:
Hi everyone, I have tried two days to figure out how to draw the image in wx.BufferedDC on the page created by AddPage of wx.Notebook but still got no clue. The attached example works fine. If...
1
by: sayid | last post by:
Hello, I have a problem when altering a DIV-element from another frame. The frameset looks like this: <frameset rows=0,0,* border=0> <frame name=header src=/header.htm scrolling=no...
7
by: HxRLxY | last post by:
I am trying to write a simple program which will allow users to view pictures. I am loading an image as an icon, then assigning that ImageIcon to an Image object. Then i get the graphics context of...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.