按一下就跑出畫面在最頂層。
這是我們常用到的互動寫作手法。
我們把更豐富的訊息「先藏起來」,讓讀者自己決定,是先要往下閱讀先求得文本的整體性概念,還是說先要在這裡把文本的部分意義先搞到某種理解上的清晰度。
意義的理解,是一種部分與整體的互動模態下而來的超越性的文本整體性掌握下的意義給出。
但部分與整體的互動模態是要如何的一種形態,互動文本,可以讓讀者自己選擇。
在理解的過程中,部分和整體之間的是辨證的發展的,並不是一種固定的模式。每個人,都有自己部分和整體如何來搭配的策略。
互動文本,是讓這種閱讀策略,可以更好的被實踐出來的文本模態。
---- 實例 -----
請按我!!
這是要呈現的內文!!
是要往下說明的解釋性內文。
✘
是要往下說明的解釋性內文。
✘
<style>
#floing0933 {
}
.floing0933 {
border: 0px solid red;
width:0px;
height: 0px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.floing0933-1 {
box-sizing: border-box;
border: 0px solid red;
z-index: 9999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(160,160,160,0.3);
padding: 1em;
}
.imgflo0944 {
height: 95%;
}
</style>
<div style="width: 15%; border: 1px solid red;" onclick="document.getElementById('floing0933').classList.add('floing0933-1')">
請按我!!<br>
</div>
<div id="floing0933" class="floing0933" onclick="document.getElementById('floing0933').classList.remove('floing0933-1')">
<div style="background-color: rgba(160,160,160,0.9); width: 100%; height: 100%; display: flex; justify-content: center;
align-items: center;">
<div style="font-size: 42px; color: red;">
這是要呈現的內文!!<br>
是要往下說明的解釋性內文。<br>
<br>
<br>
<span style="color: white; font-size: 42px;">✘<span>
</div>
</div>
</div>
#floing0933 {
}
.floing0933 {
border: 0px solid red;
width:0px;
height: 0px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.floing0933-1 {
box-sizing: border-box;
border: 0px solid red;
z-index: 9999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(160,160,160,0.3);
padding: 1em;
}
.imgflo0944 {
height: 95%;
}
</style>
<div style="width: 15%; border: 1px solid red;" onclick="document.getElementById('floing0933').classList.add('floing0933-1')">
請按我!!<br>
</div>
<div id="floing0933" class="floing0933" onclick="document.getElementById('floing0933').classList.remove('floing0933-1')">
<div style="background-color: rgba(160,160,160,0.9); width: 100%; height: 100%; display: flex; justify-content: center;
align-items: center;">
<div style="font-size: 42px; color: red;">
這是要呈現的內文!!<br>
是要往下說明的解釋性內文。<br>
<br>
<br>
<span style="color: white; font-size: 42px;">✘<span>
</div>
</div>
</div>