-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmake_selection.php
165 lines (162 loc) · 8.42 KB
/
make_selection.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<?php header("Content-Type: text/html; charset=utf-8") ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Text + Image + CSS3 = Crazy Delicious</title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
body {
font: small "Helvetica", "Trebuchet MS", Verdana, sans-serif;
}
#form textarea {
width: 300px;
height: 30px;
margin-left: 20px;
margin-bottom: 10px;
}
#form select {
margin-left: 20px;
}
#form label {
display: block;
}
#form input[type="submit"], #form input[type="text"] {
width: 300px;
}
#form input {
margin-left: 20px;
margin-bottom: 10px;
}
span::selection {
color: white;
background: white
}
span::-moz-selection {
color: white;
background: white
}
#beg {
float: right;
width: 15em;
margin-right: 4em;
padding: 0.5em;
border: 4px double #999;
background: #efefef;
}
#code {
width: 300px;
height: 40px;
}
</style>
</head>
<body id="color">
<h1>Hide an image in html</h1>
<h2>Highlight the text with your mouse.</h2>
<div id="beg">
<p>
Like this or my other projects like <a href="http://metaatem.net/words/spell+with+flickr" alt="Spell with Flickr">Spell with Flickr</a> and <a href="http://befuddlr.com/" alt="Befuddlr!">Befuddlr</a>? Help me cover the cost of EC2:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form>
</p>
<p>Created by <a href="mailto:[email protected]">Erik Kastner</a> at 2am</p>
<p>Want the code? Grab it on <a href="http://github.com/kastner/highlite/">GitHub</a></p>
</div>
<h3>How it works:</h3>
<p>Safari and Firefox support <a href="http://www.w3.org/TR/css3-selectors/#UIfragments" title="Selectors">CSS3's ::selection pseudo-element</a>. Using that and PHP, this toy hides an image in plain view.</p>
<form id="form">
<div>
<label for="text">Text:</label>
<textarea id="text" name="text"><?php echo stripslashes($_REQUEST["text"]) ?></textarea>
</div>
<div>
<label for="image">Image URL:</label>
<input type="text" id="image" name="image" value="<?php echo $_REQUEST["image"] ?>">
<?php if ($_REQUEST["image"]) { echo "<a href='$_REQUEST[image]' target='_new'>view image</a>"; } ?>
</div>
<div>
<label for="colors">Number of colors:</label>
<input type="hidden" id="h-colors" value="<?php echo $_REQUEST["colors"]; ?>"/>
<select id="colors" name="colors">
<option>2</option>
<option>4</option>
<option>16</option>
<option>32</option>
<option selected>128</option>
<option>256</option>
</select>
</div>
<div>
<label for="width">Width of output:</label>
<input type="hidden" id="h-width" value="<?php echo $_REQUEST["width"]; ?>"/>
<select id="width" name="width">
<option>40</option>
<option>80</option>
<option selected>120</option>
<option>160</option>
<option>220</option>
</select>
</div>
<div>
<label for="reverse">Reverse it <span>(see the image, highlight for text)</span>:</label>
<input type="hidden" id="h-reverse" value="<?php echo $_REQUEST[reverse] ?>" />
<input type="checkbox" id="reverse" value="true" name="reverse" />
</div>
<input type="submit" value="generate"/>
</form>
<div id="output-code" style="display:none;">
<div>
<a href="#" onclick="$('#code').toggle(); return false;">Get code</a>
</div>
<textarea id="code" style="display:none;" onfocus="this.select();"></textarea>
</div>
<div id="output"><?php if ($_REQUEST["image"]) echo "Loading..." ?></div>
<script type="text/javascript" charset="utf-8">
function go() {
if (!$("#image").val().match(/^http:\/\//)) {
alert("You must supply a url for an image");
return false;
}
$("#output").load("make_selection_ajax.php", {
text: $("#text").val(),
image: $("#image").val(),
colors: $("#colors").val(),
width: $("#width").val(),
reverse: $("#reverse").attr("checked")
}, function(responseText) {
$("#output-code").show();
$("#code").val(responseText);
new_css = responseText.match(/\/\*--\*\/(\n|.)+\/\*/);
if (new_css) {
$("#injectedCss").html(new_css[0]);
}
});
}
$(document).ready(function() {
$('head').append('<style id="injectedCss" type="text/css">.bob{border:0}</style>');
if ($("#h-colors").val() != "") { $("#colors").val($("#h-colors").val()); }
if ($("#h-colors").val() != "") { $("#colors").val($("#h-colors").val()); }
if ($("#h-width").val() != "") { $("#width").val($("#h-width").val()); }
if ($("#h-reverse").val() == "true") { $("#reverse").attr("checked", true); }
if ($("#image").val() != "") {
go();
}
});
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-70669-14");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>