How to draw rectangle on the website to highlight?
Question
Is there any way to implement a Google feedback like feature as shown here ? We can make the website slightly black-out using CSS, but how can we draw a rectangle on the that particular interface like highlighting some text or error. We can use same concept like sprite cow, has used to highlight the rectangle on particular image link . Any kind of idea and source is welcomed.
Thanks
5 answers
solution1
7 2011-07-08 10:14:40
The most straightforward way to do this is, probably, to just have a div that are created when you drag the mouse over the page.
I suspect Google does it using something like this:
- Draw a slightly dimmed div ("dimmer") on top of the whole page
When the user clicks and drags on the dimmer, they split it in multiple divs like this:
### | ## | ### ----+----+---- ### | | ### ----+----+---- ### | ## | ###In the above, the center area is the area the user was dragging over
- The center area is now empty, and you can see the site through it, because the dimmer was split into 8 smaller divs.
- While the user keeps the mouse button held down, the script keeps resizing the split dimmer divs to accommodate the rectangular area the user has dragged.
(It might also omit the extra divs I included in the diagram, so that it only has one div above, and one div below, the rectangle since it would work without them too)
solution2
1
Sample code working on all browser, just draw rectangle with mouse click, but give some highlight flicking in chrome, didn't find any solution to it:-C....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Draw on Web</title>
<style type="text/css">
.square {
border: 3px solid #FF0000;
position: absolute;
}
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.1;
opacity:.10;
filter: alpha(opacity=10);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/JavaScript">
var d;
var posx;
var posy;
var initx=false;
var inity=false
function getMouse(obj,e){
posx=0;
posy=0;
var ev=(!e)?window.event:e;//Moz:IE
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{
return false
}//old browsers
obj.onmousedown=function(){
initx=posx; inity=posy;
d = document.createElement('div');
d.className='square'
d.style.left=initx+'px';d.style.top=inity+'px';
//d.style.background='#434343';
document.getElementsByTagName('body')[0].appendChild(d)
}
obj.onmouseup=function(){initx=false;inity=false;}
if(initx){
d.style.width=Math.abs(posx-initx)+'px';d.style.height=Math.abs(posy-inity)+'px';
d.style.left=posx-initx<0?posx+'px':initx+'px';
d.style.top=posy-inity<0?posy+'px':inity+'px';
}
}
document.onmousemove=function(event){
getMouse(document,event);
}
</script>
</head>
<body>
<FORM METHOD=POST ACTION="mailto:someone@$nailmail.com" ENCTYPE="text/plain">
<table border=0 cellspacing=0 cellpadding=2>
<tr>
<td colspan=2>
<font size=2 face="arial" color="#000000">
<INPUT type="text" name=URL size=17 value="http://"> :Your URL<BR>
<INPUT type="text" name=user size=17> :Your Username<BR>
<INPUT type="text" name=email size=17> :Your E-mail
</font>
</td>
</tr>
<tr>
<td>
<font size=1 face="arial" color="#000000">
<INPUT name=subscribe type=radio value="yes" CHECKED> subscribe<BR>
<INPUT name=subscribe type=radio value="no"> unsubscribe<BR>
</font>
</td>
<td>
<SELECT name="choices" size=1>
<OPTION selected> OPTIONS
<OPTION> OPTION 1
<OPTION> OPTION 2
<OPTION> OPTION 3
<OPTION> OPTION 4
<OPTION> OPTION 5
</SELECT>
</td>
</tr>
<tr>
<td colspan=2>
<font size=1 face="arial" color="#000000">
<INPUT type=checkbox name="html" value="sendme" CHECKED>
i can recive email as html<BR>
<INPUT type=checkbox name="receipt" value="sendme">
send me a recipt for this email<BR>
</font>
<TEXTAREA cols=20 rows=10>
Hey !
what do you think of the form?
cool huh?
</TEXTAREA><br>
<center>
<INPUT NAME="redirect" TYPE="hidden" VALUE="index.html">
<INPUT NAME="NEXT_URL" TYPE="hidden" VALUE="index.html">
<INPUT type=submit value=Send>
<INPUT type=reset value="Clear">
</center>
</td></tr></table>
</FORM>
</body>
</html>
solution3
1 ACCPTED 2011-07-19 20:34:02
I asked myself this question recently and when looking at it through the chrome debugger it would appear that they are using some techniques that are more advanced than just sectioning off the screen into highlighted and un-highlighted areas.
The first thing to notice is that google uses 5 iframes to acheive their feedback system.
google-feedback-mask-frame : This is used just for the mask, it covers the whole screen. I'm not sure why they chose to use a whole iframe for this. But it serves the purpose of making sure you dont click any page links in feedback mode
google-feedback-screenshot-frame :This is where the real magic happens I suspect. It contains a copy of the page you were viewing, but with some proprietary HTML tags ( <gft></gft> ) to let the script know where highlight-able content is (images, text, links, etc.)
google-feedback-feedback-frame : This holds the controls for the highlighted areas as well as the X button for the whole widget.
To pull off the effect google actually does use a bunch of sections like @Jani Hartikainen suggests. In the screenshot below you can see that when you have multiple selections there's quite a few div's that need to be created to accommodate the effect.
I'm sure there's a very complicated algorithm for figuring out where all the div's go, but that's what makes software dev fun right??
google-feedback-proxy-frame : has the controls that you see in the bottom right side.
google-feedback-render-frame : This one is a bit more mysterious, all it contains is a script called render_frame.js which is obviously obfuscated and illegible.
In conclusion, using sections IS the way that google does it but there's a lot more magic that allows them to auto-highlight links and images. If you find out more I'm really interested too so let me know!
solution4
0 2011-07-15 08:54:54
You could also do this with the Canvas element.
solution5
0 2011-07-15 20:09:58
jQuery Tools has a nice little tool called "Expose" , I used it a few months ago and it worked great for me...simple, extensible, and it just works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.