Y a-t-il un moyen de mettre en place un retour Google comme une fonctionnalité comme indiqué ici ici ? Nous pouvons rendre le site Web légèrement black-out à l'aide de CSS, mais comment pouvons-nous dessiner un rectangle sur la présente interface particulière comme mettant en évidence du texte ou une erreur. Nous pouvons utiliser le même concept comme Sprite vache, a utilisé pour mettre en évidence le rectangle sur une image particulière lien . Tout type d'idée et de source est la bienvenue.
merci
5 Réponses :
Le moyen le plus simple de le faire est, probablement, de simplement avoir un divisé créé lorsque vous faites glisser la souris sur la page.
Je soupçonne que Google utilise quelque chose comme ceci: p>
Lorsque l'utilisateur clique sur le gradateur, ils le divisent dans plusieurs divs tels que ceci: p>
### | ## | ### ----+----+---- ### | | ### ----+----+---- ### | ## | ###
Dans ce qui précède, la zone centrale est la zone que l'utilisateur traînait sur p> li>
(il pourrait également omettre les divs supplémentaires que j'ai inclus dans le diagramme, de sorte qu'il n'en a qu'un div au-dessus et un div ci-dessous, le rectangle car il fonctionnerait sans eux aussi) P>
:-D, excellente logique. Merci.
Mais la question est ... Comment prenez-vous l'instantané?
@ Thebrain tout en ne connaissant pas comment Google le fait-il, le moyen le plus simple de le faire serait de fournir une sorte de vue administrative sur la page. Ensuite, lorsque sur la page, un script est utilisé pour rendre les rectangles dans les positions que les utilisateurs les ont dessinés. Alternativement, ils peuvent prendre un instantané de la page en utilisant un outil côté serveur. J'ai vu un outil utilisable de ligne de commande pour cela, mais j'ai malheureusement oublié le nom. @ A.P.S Vous devez accepter la réponse si vous êtes satisfait. Sinon, veuillez préciser si vous vouliez réellement autre chose :)
En fait, si nous utilisons une API miniature pour obtenir l'instantané de tout processus après le dessin rectangle, sera assez bon. Mais toute l'API rendu le HTML en mémoire et obtenez le réglage de l'instantané latéral du serveur non du côté du client. C'est le problème principal. J'ai posté le code pour dessiner rectangle sur la page Web, mais c'est assez basique, essayez de prendre instantané de celui-ci et de voir si les rectangés suivants deviennent sur une image. Merci: D
@ A.P.S L'exemple que vous avez posté semble fonctionner. Si vous stockez les détails absolus x / y / largeur / hauteur des rectangles, vous devez d'abord rendre la page sur le côté serveur à une image, puis rendu des rectangles sur l'image (par exemple en utilisant la fonctionnalité GD ou Imagick dans Php)
échantillon de code Travailler sur tous les navigateurs, dessinez simplement le rectangle avec le clic de la souris, mais donnez-vous en surbrillance en chrome, ne trouvez aucune solution à celle-ci: -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>
Vous pouvez également le faire avec l'élément de toile.
Merci, je l'ai atteint en utilisant la toile et JavaScript. A de l'aide de divers liens. Thinkvitamin.com/code/how-to-Draw-vith -HTML-5-Canvas et Diveintohtml5.org/Canvas.html et
Sur IE, vous pouvez utiliser SVG, je pense qu'il y a une bibliothèque qui fait la canvas à la conversion SVG, je me souviens d'avoir utilisé quelque chose comme elle une fois. Vous devrez le chercher cependant, comme je ne pouvais pas le trouver.
JQuery Tools a un joli petit outil appelé "Expose" , Je l'ai utilisé il y a quelques mois et ça a fonctionné très bien pour moi ... simple, extensible, et cela fonctionne simplement.
Je me suis récemment posé cette question et lorsque vous le regardez à travers le débogueur Chrome, il semblerait qu'elles utilisent certaines techniques plus avancées que la simple sectionnement de l'écran dans des zones en surbrillance et en surbrillance.
La première chose à noter est que Google utilise 5 iframes pour atteindre leur système de rétroaction.
Pour retirer l'effet Google utilise réellement un tas de sections comme @jani Hartikainen suggère.
Dans la capture d'écran ci-dessous, vous pouvez voir que lorsque vous avez plusieurs sélections, il y a de nombreuses divisées à créer pour accueillir l'effet.
Je suis sûr qu'il y a un algorithme très compliqué de déterminer où tout le div se passe, mais c'est ce qui rend logiciel dev amusant à droite ??
En conclusion, l'utilisation de sections est la façon dont Google le fait, mais il y a beaucoup plus de magie qui leur permet de mettre en évidence des liaisons et des images. Si vous en découvrez plus, je suis vraiment intéressé aussi, alors faites-le moi savoir! Google-feedback-mask-cadre
: Ceci est utilisé uniquement pour le masque, il couvre tout l'écran. Je ne sais pas pourquoi ils ont choisi d'utiliser tout un iframe pour cela. Mais cela permet de ne pas cliquer sur des liens de page en mode de rétroaction
Google-Feedback-Screenshot-cadre
: C'est là que se passe la vraie magie que je soupçonne. Il contient une copie de la page que vous visualisez, mais avec certaines balises HTML exclusives ( Google-Feedback-Feedback-Frame
: Ceci contient les commandes des zones en surbrillance ainsi que le bouton X de l'ensemble du widget.
Google-feedback-proxy-image
: a les commandes que vous voyez en bas à droite.
Google-feedback-rendu-cadre
: Celui-ci est un peu plus mystérieux, tout ce qu'il contient est un script appelé rendu_frame.js qui est évidemment obscurci et illisible.
Vous cherchez simplement à créer l'effet ou essayez-vous d'imiter certaines des fonctionnalités sous-jacentes aussi? Si vous le regardez dans le débogueur Chrome, il est clair qu'il y a un système vraiment compliqué utilisé en dessous.