Skip to content

Commit 9ea3b9b

Browse files
jgthmsjgthms
committed
Add custom, Add swf
1 parent 8577b36 commit 9ea3b9b

12 files changed

Lines changed: 71 additions & 1615 deletions

File tree

‎_includes/lists/main-list.html‎

Lines changed: 57 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<section id="img" class="element">
1+
<section id="object" class="element">
22
<header class="element-header">
33
<nav class="element-links">
44
<span>
@@ -7,291 +7,176 @@
77
No
88
</strong>
99
</span>
10-
<a class="element-links-direct" href="{{site.url}}/element/img/" data-element-name="img" data-tooltip="Single page for this element">Permalink</a>
11-
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="img">Share</a>
12-
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/img" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
10+
<a class="element-links-direct" href="{{site.url}}/element/object/" data-element-name="object" data-tooltip="Single page for this element">Permalink</a>
11+
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="object">Share</a>
12+
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/object" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
1313
</nav>
1414
<h2 class="element-name">
15-
<a href="{{site.url}}/#img">
15+
<a href="{{site.url}}/#object">
1616
<span>#</span>
17-
img
17+
object
1818
</a>
1919
</h2>
2020
<div class="element-description">
21-
<p>Defines an <strong>image</strong> inserted in the web page.</p>
21+
<p>Defines a container for <strong>external resource</strong>.</p>
2222

2323
</div>
2424
</header>
2525

26-
<div class="example">
26+
<div id="object-example-0" class="example">
2727
<p class="example-label">
2828
<strong>Example:</strong>
29-
<a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#img-example-0">Copy</a>
29+
<a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#">Copy</a>
3030
</p>
3131
<article class="example-preview">
32-
<div class="example-output"><img src="/images/sunset-360.jpg" alt="Picture of a Ha Long Bay sunset"></div>
33-
<div id="img-example-0" class="example-code">{% highlight html %}<img src="/images/sunset-360.jpg" alt="Picture of a Ha Long Bay sunset">{% endhighlight %}</div>
34-
</article>
35-
</div>
36-
<div class="example">
37-
<p class="example-label">
38-
<strong>Example:</strong>
39-
<a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#img-example-1">Copy</a>
40-
</p>
41-
<article class="example-preview">
42-
<div class="example-output"><!-- For responsive images, use srcset and sizes -->
43-
44-
<img src="/images/sunset-360.jpg"
45-
alt="Picture of a Ha Long Bay sunset"
46-
srcset="/images/sunset-360.jpg 360w,
47-
/images/sunset-720.jpg 720w,
48-
/images/sunset-1440.jpg 1440w>"
49-
sizes="(min-width: 800px) 720px, 360px"></div>
50-
<div id="img-example-1" class="example-code">{% highlight html %}<!-- For responsive images, use srcset and sizes -->
51-
52-
<img src="/images/sunset-360.jpg"
53-
alt="Picture of a Ha Long Bay sunset"
54-
srcset="/images/sunset-360.jpg 360w,
55-
/images/sunset-720.jpg 720w,
56-
/images/sunset-1440.jpg 1440w>"
57-
sizes="(min-width: 800px) 720px, 360px">{% endhighlight %}</div>
32+
<div class="example-output"></div>
33+
<div id="" class="example-code">{% highlight html %}{% endhighlight %}</div>
5834
</article>
5935
</div>
6036

61-
<article class="attribute attribute--required">
37+
<article id="object-data" class="attribute">
6238
<header class="attribute-header">
6339
<h3 class="attribute-name">
64-
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="src">
65-
src
40+
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="data">
41+
data
6642
</code>
6743
</h3>
6844
<div class="attribute-description">
69-
<p>The URL where the image is hosted.</p>
45+
<p>The URL of the object data.</p>
7046

71-
<strong class="attribute-is-required">Required.</strong>
7247
</div>
7348
</header>
7449

7550
<div class="attribute-values">
76-
<article class="value">
51+
<article id="object-data-assetsgolfswf" class="value">
7752
<header class="value-header">
7853
<h4 class="value-name">
79-
<code class="tag" data-tooltip="Click to copy src=&quot;/images/tiramisu.jpg&quot;" data-clipboard-text="src=&quot;/images/tiramisu.jpg&quot;">
80-
"/images/tiramisu.jpg"
54+
<code class="tag" data-tooltip="Click to copy data=&quot;/assets/golf.swf&quot;" data-clipboard-text="data=&quot;/assets/golf.swf&quot;">
55+
"/assets/golf.swf"
8156
</code>
8257
</h4>
8358
<div class="value-description">
84-
<p>You can use a <strong>relative</strong> URL.</p>
59+
<p>The value must be a valid URL.</p>
8560

8661
</div>
8762
</header>
8863
<aside class="value-preview">
8964
<div class="value-output">
90-
<img src="/images/tiramisu.jpg">
65+
<object data="/assets/golf.swf" type="application/x-shockwave-flash">
9166

92-
</img>
93-
</div>
94-
</aside>
95-
</article>
96-
<article class="value">
97-
<header class="value-header">
98-
<h4 class="value-name">
99-
<code class="tag" data-tooltip="Click to copy src=&quot;{{site.url}}/images/traffic.jpg&quot;" data-clipboard-text="src=&quot;{{site.url}}/images/traffic.jpg&quot;">
100-
"{{site.url}}/images/traffic.jpg"
101-
</code>
102-
</h4>
103-
<div class="value-description">
104-
<p>You can use an <strong>absolute</strong> URL.</p>
105-
106-
</div>
107-
</header>
108-
<aside class="value-preview">
109-
<div class="value-output">
110-
<img src="{{site.url}}/images/traffic.jpg">
111-
112-
</img>
67+
</object>
11368
</div>
11469
</aside>
11570
</article>
11671
</div>
11772
</article>
118-
<article class="attribute attribute--required">
73+
<article id="object-type" class="attribute">
11974
<header class="attribute-header">
12075
<h3 class="attribute-name">
121-
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="alt">
122-
alt
76+
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="type">
77+
type
12378
</code>
12479
</h3>
12580
<div class="attribute-description">
126-
<p>Alternative text to describe the image if it&#39;s not available. Used by screen readers.</p>
81+
<p>Defines the type of the application.</p>
12782

128-
<strong class="attribute-is-required">Required.</strong>
12983
</div>
13084
</header>
13185

13286
<div class="attribute-values">
133-
<article class="value">
87+
<article id="object-type-applicationx-shockwave-flash" class="value">
13488
<header class="value-header">
13589
<h4 class="value-name">
136-
<code class="tag" data-tooltip="Click to copy alt=&quot;Picture of a man standing in front of the Dragon&#x27;s Pearl boat&quot;" data-clipboard-text="alt=&quot;Picture of a man standing in front of the Dragon&#x27;s Pearl boat&quot;">
137-
"Picture of a man standing in front of the Dragon&#x27;s Pearl boat"
90+
<code class="tag" data-tooltip="Click to copy type=&quot;application/x-shockwave-flash&quot;" data-clipboard-text="type=&quot;application/x-shockwave-flash&quot;">
91+
"application/x-shockwave-flash"
13892
</code>
13993
</h4>
14094
<div class="value-description">
141-
<p>Describe the image as if it was not present.</p>
95+
<p>The value must be a valid <a href="https://developer.mozilla.org/en-US/docs/Glossary/MIME_type">content type</a>.</p>
14296

14397
</div>
14498
</header>
14599
<aside class="value-preview">
146100
<div class="value-output">
147-
<img src="/images/boat.jpg" alt="Picture of a man standing in front of the Dragon's Pearl boat">
101+
<object data="/assets/golf.swf" type="application/x-shockwave-flash">
148102

149-
</img>
103+
</object>
150104
</div>
151105
</aside>
152106
</article>
153107
</div>
154108
</article>
155-
<article class="attribute">
109+
<article id="object-height" class="attribute">
156110
<header class="attribute-header">
157111
<h3 class="attribute-name">
158-
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="srcset">
159-
srcset
112+
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="height">
113+
height
160114
</code>
161115
</h3>
162116
<div class="attribute-description">
163-
164-
</div>
165-
</header>
117+
<p>Defines the height of the object.</p>
166118

167-
<div class="attribute-values">
168-
<article class="value">
169-
<header class="value-header">
170-
<div class="value-description">
171-
172-
</div>
173-
</header>
174-
<aside class="value-preview">
175-
<div class="value-output">
176-
<img srcset>
177-
178-
</img>
179-
</div>
180-
</aside>
181-
</article>
182-
</div>
183-
</article>
184-
<article class="attribute">
185-
<header class="attribute-header">
186-
<h3 class="attribute-name">
187-
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="sizes">
188-
sizes
189-
</code>
190-
</h3>
191-
<div class="attribute-description">
192-
193119
</div>
194120
</header>
195121

196122
<div class="attribute-values">
197-
<article class="value">
123+
<article id="object-height-50" class="value">
198124
<header class="value-header">
125+
<h4 class="value-name">
126+
<code class="tag" data-tooltip="Click to copy height=&quot;50&quot;" data-clipboard-text="height=&quot;50&quot;">
127+
"50"
128+
</code>
129+
</h4>
199130
<div class="value-description">
200-
131+
<p>The height in pixels.</p>
132+
201133
</div>
202134
</header>
203135
<aside class="value-preview">
204136
<div class="value-output">
205-
<img sizes>
137+
<object data="/assets/golf.swf" type="application/x-shockwave-flash" height="50">
206138

207-
</img>
139+
</object>
208140
</div>
209141
</aside>
210142
</article>
211143
</div>
212144
</article>
213-
<article class="attribute">
145+
<article id="object-width" class="attribute">
214146
<header class="attribute-header">
215147
<h3 class="attribute-name">
216-
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="crossorigin">
217-
crossorigin
148+
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="width">
149+
width
218150
</code>
219151
</h3>
220152
<div class="attribute-description">
221-
153+
<p>Defines the width of the object.</p>
154+
222155
</div>
223156
</header>
224157

225158
<div class="attribute-values">
226-
<article class="value">
159+
<article id="object-width-150" class="value">
227160
<header class="value-header">
228161
<h4 class="value-name">
229-
<code class="tag" data-tooltip="Click to copy crossorigin=&quot;anonymous&quot;" data-clipboard-text="crossorigin=&quot;anonymous&quot;">
230-
"anonymous"
162+
<code class="tag" data-tooltip="Click to copy width=&quot;150&quot;" data-clipboard-text="width=&quot;150&quot;">
163+
"150"
231164
</code>
232165
</h4>
233166
<div class="value-description">
234-
235-
</div>
236-
</header>
237-
<aside class="value-preview">
238-
<div class="value-output">
239-
<img crossorigin="anonymous">
240-
241-
</img>
242-
</div>
243-
</aside>
244-
</article>
245-
<article class="value">
246-
<header class="value-header">
247-
<h4 class="value-name">
248-
<code class="tag" data-tooltip="Click to copy crossorigin=&quot;use-credentials&quot;" data-clipboard-text="crossorigin=&quot;use-credentials&quot;">
249-
"use-credentials"
250-
</code>
251-
</h4>
252-
<div class="value-description">
253-
167+
<p>The width in pixels.</p>
168+
254169
</div>
255170
</header>
256171
<aside class="value-preview">
257172
<div class="value-output">
258-
<img crossorigin="use-credentials">
173+
<object data="/assets/golf.swf" type="application/x-shockwave-flash" height="50" width="150">
259174

260-
</img>
175+
</object>
261176
</div>
262177
</aside>
263178
</article>
264179
</div>
265180
</article>
266-
<article class="attribute">
267-
<header class="attribute-header">
268-
<h3 class="attribute-name">
269-
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="height">
270-
height
271-
</code>
272-
</h3>
273-
<div class="attribute-description">
274-
275-
</div>
276-
</header>
277-
278-
<div class="attribute-values">
279-
</div>
280-
</article>
281-
<article class="attribute">
282-
<header class="attribute-header">
283-
<h3 class="attribute-name">
284-
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="width">
285-
width
286-
</code>
287-
</h3>
288-
<div class="attribute-description">
289-
290-
</div>
291-
</header>
292-
293-
<div class="attribute-values">
294-
</div>
295-
</article>
296181
</section>
297182

‎_includes/lists/menu-list.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎assets/golf.swf‎

140 KB
Binary file not shown.

0 commit comments

Comments
 (0)