Cómo dibujar un rectángulo en el sitio web para resaltar?

¿Hay alguna forma de implementar un comentario de Google como la función as shown here? Podemos hacer que el sitio web se oscurezca ligeramente usando CSS, pero ¿cómo podemos dibujar un rectángulo en esa interfaz en particular, como resaltar algún texto o error? Podemos usar el mismo concepto como sprite cow, se ha usado para resaltar el rectángulo en la imagen particular link. Cualquier tipo de idea y fuente es bienvenida.Cómo dibujar un rectángulo en el sitio web para resaltar?

Gracias

Fuente

2011-07-08 A.P.S

¿Está buscando simplemente crear el efecto o está tratando de imitar algunas de las funciones subyacentes también? Si lo miras en el depurador Chrome, está claro que hay un sistema realmente complicado debajo. –

Me hice esta pregunta recientemente y cuando la miro a través del depurador de Chrome parecería que están usando algunas técnicas que son más avanzadas que la sección de la pantalla en áreas resaltadas y no resaltadas.

Lo primero que se debe tener en cuenta es que google usa 5 iframes para lograr su sistema de comentarios.

google-feedback-mask-frame : Esto se usa solo para la máscara, cubre toda la pantalla. No estoy seguro de por qué eligieron usar un iframe completo para esto. Pero sirve para asegurarse de no hacer clic en ningún enlace de página en el modo de retroalimentación

google-feedback-screenshot-frame : aquí es donde la magia real sucede, sospecho. Contiene una copia de la página que estaba viendo, pero con algunas etiquetas HTML propietarias (<gft></gft>) para que la secuencia de comandos sepa dónde se encuentra el contenido resaltable (imágenes, texto, enlaces, etc.)

google-feedback-feedback-frame : Esto contiene los controles para las áreas resaltadas, así como también el botón X para todo el widget.

Para lograr el efecto, Google en realidad usa varias secciones como sugiere @Jani Hartikainen. En la captura de pantalla siguiente puede ver que cuando tiene varias selecciones hay bastantes div que deben crearse para acomodar el efecto.

enter image description here

estoy seguro de que hay un algoritmo muy complicado para averiguar dónde de todos los div van, pero eso es lo que hace que la diversión dev software adecuado ??

google-feedback-proxy-frame : tiene los controles que se ven en la parte inferior derecha.

google-feedback-render-frame : Este es un poco más misterioso, todo lo que contiene es un script llamado render_frame.js que es obviamente ofuscado e ilegible.

En conclusión, usar secciones ES es la forma en que Google lo hace, pero hay mucha más magia que les permite resaltar automáticamente enlaces e imágenes. Si descubres más, también estoy realmente interesado, ¡házmelo saber!

Fuente

2011-07-19 20:34:02

La forma más sencilla de hacerlo es, probablemente, tener sólo un div que se crea cuando se arrastra el puntero del ratón sobre la página.

sospecho Google hace uso de algo como esto:

Dibuje un div ligeramente atenuado ("dimmer") en la parte superior de la página entera
Cuando el usuario hace clic y arrastra en el atenuador, se separaron en múltiples divs como esto:
```
### | ## | ### 
----+----+---- 
### | | ### 
----+----+---- 
### | ## | ### 
```
en lo anterior, el área central es la zona que el usuario estaba arrastrando sobre
El área central ahora está vacía, y puede ver el sitio a través de ella, porque el atenuador se dividió en 8 divisores más pequeños.
Mientras el usuario mantiene presionado el botón del mouse, la secuencia de comandos sigue cambiando el tamaño de los divisores de división para acomodar el área rectangular que el usuario ha arrastrado.

(También podría omitir los divs extra que incluye en el diagrama, de modo que sólo tiene un div más arriba, y uno div continuación, el rectángulo ya que funcionaría sin ellos también) código

Fuente

2011-07-08 10:14:40

:-D, Excelente lógica. Gracias. –

pero la pregunta es ... ¿cómo se toma la instantánea? – TheBrain

@TheBrain Aunque no está familiarizado con la forma en que Google lo hace, la manera más fácil de hacerlo es proporcionar algún tipo de vista de administrador en la página. Luego, cuando se encuentra en la página, se utiliza una secuencia de comandos para representar los rectángulos en las posiciones en las que los usuarios los dibujaron. Alternativamente, pueden tomar una instantánea de la página usando alguna herramienta del lado del servidor. Vi una herramienta útil de línea de comandos para esto, pero lamentablemente olvidé el nombre. @ A.P.S debe aceptar la respuesta si está contento con ella. De lo contrario, especifique si realmente deseaba algo más :) –

Muestra trabajar en todos los navegadores, simplemente dibujar rectángulo con un clic del ratón, pero dar un poco más destacado chasquear en cromo, no encuentra ninguna solución a ella: -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:[email protected]$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> 
&nbsp; 
</body> 
</html>

Fuente

2011-07-13 11:55:19

+1 ¡Gracias, trabajo increíble! –

también puede hacer esto con el lienzo elemento.

Fuente

2011-07-15 08:54:54 RobotRock

Gracias, lo he logrado usando Canvas y JavaScript. Obtuve ayuda de varios enlaces. http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/ y http://diveintohtml5.org/canvas.html y https://developer.mozilla.org/Special:Tags ? tag = Canvas + tutorial. Solo lo hago para IE usando http://code.google.com/chrome/chromeframe/. :-P –

En IE puede usar SVG, creo que hay una biblioteca que hace el lienzo para la conversión de SVG, recuerdo haber usado algo así una vez. Sin embargo, tendrás que buscarlo, ya que no pude encontrarlo. – RobotRock

jQuery Tools tiene una pequeña herramienta llamada "Expose", la utilicé hace unos meses y funcionó muy bien para mí ... simple, extensible, y simplemente funciona.

Fuente

2011-07-15 20:09:58 ar3

Cómo dibujar un rectángulo en el sitio web para resaltar?

Respuesta

Cuestiones relacionadas