這篇文章的重點,是補充 另篇文章【 行內 js 寫法 】的部分,十分簡單:
以下「假尺」原圖 width=586 height=18,但可「隨手」看到另兩種尺寸。 試試看吧∼∼無論如何,在上列「假尺」任何位置 click 滑鼠左鍵一次!
OK!如果你就這樣 click 一次了;當然,還可以那樣 click 連續兩次!
現在,這把「假尺」出現過三種尺寸; 但是,以下「字/行」沒變過!
一二三四五六七八九1一二三四五六七八九2一二三四五六七八九3一二三四五六七八九4一二三四五六七八九5一二三四五六七八九6一二三四五六七八九7一二三四五六七八九8一二三四五六七八九9一二三四五六七八九百
或許依稀記得:開檔時,那「假尺」就沒有把「字/行」撐寬的現象!
如果還想再度看到 586px 寬度的 20cm 假尺,請按 reflesh 重新整理。
上述,是示例:貼圖可以「超大沒問題」字行不會被大圖撐寬!醬ㄗ寫:
<div style="width: 535px; padding: 0em">
<img alt=" change width 586 to 520 & 745 " style="float: left; position: relative; z-index: 2" src="圖檔全址" onclick="this.style.width='520px'" ondblclick="this.style.width='745px'">
</div>
如果,想試試;須以《改用純文字編輯》貼圖編文。█ Wish you would like to click & enjoy it !
這辦法也可用來使文字改變顏色 ↑ 同樣 click 滑鼠左鍵一次或兩次就行。
再試一試 click & dbclick 在照片上,保證:愈看愈開心!── 謝謝【 秋日小語∼飛揚的心情 】同意取用《 蓮荷心事 》照片增益範例。 <div style="width: 535px; padding: 0em">
<img alt=" onclick to big/ondbclick to small " style="float: left; position: relative; z-index: 2" width="150" src="圖檔全址" onclick="this.style.width='745px'" ondblclick="this.style.width=''">
</div>
*ps -- 這個行內 js 程式的特性:
1)設定圖寬以 width="150" 載入,毋需設定 ondblclick 的 width 變數,
雙擊後呈現的照片,就恢復設定的 150 寬度。
2)若是 style="……" 裡加 width: 150px; 的寫法,就須設定 ondblclick 參數;
不然,雙擊後呈現的照片,就與原檔同寬。
3)增補一點 html 小技巧 ── 使放大的圖片「跳」到視窗「上端」呈現出來:<a name="expN"></a>
<div style="width: 535px; padding: 0em">
<a href="#expN"><img alt=" onclick to big/ondbclick to small " style="float: left; position: relative; z-index: 2" width="150" border="0" src="圖檔全址" onclick="this.style.width='745px'" ondblclick="this.style.width=''"></a>
</div>
不想「變大/變小」的話,參考【 更簡潔的寫法 】看看。 這篇文章提供用戶端可以自行控制的兩個經驗:
(1)作者貼圖寬「超大的」而不至於撐開 blog 預設 535px 文字篇幅。
(2)訪客看照片「可變大」也不至於撐寬文章而增加每行的字數。
再說個 HTML 小技巧,當作 hint 好了:
(3)頁內「錨+鏈」標籤 <a name="nnn"></a> 和 <a href="#nnn">插題</a> 的寫法和效果。注意:須在 《改用純文字編輯》 編輯器裡鍵入才可以寫得這麼簡單。而且:一旦 因為「鏈」的作用或 js 滑鼠指令而用了它,那麼:每次為這篇文章開啟編輯器都要用它──作個一本初衷的忠誠使用者!
切記:如果,想試試;須以《改用純文字編輯》貼圖編文。
關於 <a name="nnn">錨</a> 和 <a href="#nnn">鏈</a>
其他幾篇文章和技術關鍵 ──
比較漂亮的例子:文章本身【layout 】加右選單
比較複雜的例子:頁內錨【 highShow 】滑動鏈
比較麻煩的例子:不同文章【A/B】互文相鏈
這些是寫在 《改用HTML版編輯》< >「改用HTML原始檔」編輯器裡的。
尤其後者的兩篇,是分階段寫入 <a href="#nnn"> 並刻意在 <base href="全址"> 處「改寫」不同網址,利用軟體自動處理的特性,讓電腦依「人為改寫」的程序,自行在「鏈」內分別填入 # 前面所需的不同全址。當時我還以為 《改用純文字編輯》 是單純鍵貼文章用的(後來發現 《改用HTML版編輯》 才是 );所以,直到今年三月初以前所寫的文章,都是用 < > 來寫那些實驗品,這個「切換」功能跡近預覽,但是編輯器的「自動化」功能則帶給我兩個困擾:
a)它的頁內鏈結需要全址,而只自動填寫到 /v1 並不填到文章檔號。
b)它會自動把行內 js 控制 onclick 之類滑鼠指令的語句用 function anonymous(){} 包起來變成無效。因為 《改用HTML版編輯》 的 < >「切換HTML原始檔」編輯器,則有軟體「自動化」控制的部分,碰到就知道了──避開它或善用它。例如:已作了很多頁內鏈結,本來都是鍵入 《改用純文字編輯》 裡的簡式 <a href="#nnn"> 寫法,如果換用 《改用HTML版編輯》 的 < > 切換原始檔來修改文章,會發現每個 # 前面都「自動變多」跑出不完整的網址來,那會辛苦很多──必須刪掉它們。所以要記得:編輯器 《改用純文字編輯》 大概是 user 自主性比較高的吧?某篇文章既然用它寫作,就要一本初衷是忠誠使用者,修改時也須用它;這篇文章若用了錨鏈或滑鼠技巧,就更不要換用其他編輯器修改!或許,還有 java 版本升級課題,行家才懂得。
有的電腦上,即使選用 《改用純文字編輯》 也有同樣問題;如果只見 function anonymous(){} 跑出來,看了甭楞住,先按「取消,回上一頁」再試試,有可能就此使電腦裡預設的 java 版本更新了。
以上,是我不知其所以然,百試而知其然的幾件小事情。