網路城邦▼
上一篇 回創作列表 下一篇   字體:
點小圖變大看(CSS+js)不撐寬文字行
2006/05/11 23:37:26 瀏覽3325|回應9|推薦15

這篇文章的重點,是補充 另篇文章【 行內 js 寫法 】的部分,十分簡單:
以下「假尺」原圖 width=586 height=18,但可「隨手」看到另兩種尺寸。

 change width 586 to 520 & 745

試試看吧∼∼無論如何,在上列「假尺」任何位置 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 在照片上,保證:愈看愈開心!
 onclick to big/ondbclick to small [ inline JS from: msdn/library | workshop/dhtml ]
── 謝謝【 秋日小語∼飛揚的心情 】同意取用《 蓮荷心事 》照片增益範例。
<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 滑鼠指令而用了它,那麼:每次為這篇文章開啟編輯器都要用它──作個一本初衷的忠誠使用者!

切記:如果,想試試;須以《改用純文字編輯》貼圖編文。

文本所列「語法」使用目的 】【 選用寫入「編輯器」相關追補

( 網路資訊網頁設計 )
回應 推薦文章 轉寄 列印 加入我的文摘
上一篇 回創作列表 下一篇  

引用
引用網址:http://blog.udn.com/article/trackback.jsp?uid=jannwu&aid=269749
 引用者清單(5)  
2006/06/12 13:21 【jannWu】 點圖換圖 ── try for Grace
2006/06/10 01:04 【jannWu】 貼圖超寬【避開】廣告欄高
2006/06/05 00:18 【jannWu】 測知【寬度】簡易辦法
2006/06/04 18:28 【jannWu】 要使圖寬超過文寬,怎麼貼?
2006/06/04 18:27 【jannWu】 圖寬超過預設文寬,且不撐開文字篇幅!

 回應文章

jannwu
等級:7
留言加入好友
Re: 放多張相片,然後用點的方式換圖……
2006/06/18 17:58
可以放多張相片,然後用點的方式換圖嗎?
看這問題,我才想到要試試;結果:可以!
居然 …… 可以這麼簡單 ── 只要 HTML & CSS 就可以。
毋需 js 也毋需 software 的辦法:點圖換圖
@( ^ j ^ )@

jannwu
等級:7
留言加入好友
reply to: 幸福綠光 & Lea
2006/05/20 18:22

文章裡的中文敍述極盡簡單,可能語意不詳吧?
黃底裡的 HTML 標籤,沒學過就會看不懂,例如:
圖檔全址 ── 有以下一連串符號的檔名
        http://網站/資料夾/圖檔.副檔名
        1)用滑鼠右鍵點擊要用的照片,選「內容」就看到全址。
        2)用滑鼠左鍵從網址頭滑到尾,那「全址」就變藍底了。
        3)在藍底的網址上,按滑鼠右鍵選「複製」就拷貝到了。
        4)回到要貼上圖檔全址的地方,選「貼上」就用到它了。
以上是 msIE 的辦法,我以前向玩電腦的先進朋友學來的。
我試過:要引用城邦部落格自己相簿裡的照片,點出大圖,照作就行。

如果想從頭學 HTML 相關本領可向【 網頁研習室 】請益。
他寫的教材很棒,我還是 白癡 時候,就靠他看懂了、學會了。


@( ^ j ^ )@

幸福綠光
等級:8
留言加入好友
真好玩
2006/05/20 00:04
不過有看沒有懂 > < "

Lea
等級:7
留言加入好友
好有趣喔~
2006/05/19 21:54
可是老實說,我看不太懂說明,對這方面不太行~但還是試著弄弄看好了~

jannwu
等級:7
留言加入好友
reply to: 秋日小語
2006/05/19 15:59
1)上面這篇文本所列「語法」的作用是:
  不讓「超過 535px 寬度」的圖片把文字區塊的「預設 535px 寬幅」撐開。
  在使用人這端,可使文章的「管理/導覽」使用工具保持在原來的位置。
  這篇文章【要使圖寬超過文寬,怎麼貼?】可看到那些工具「位移」的現象。
2)嘗試並貼出這語法,本來的目的是要使圖片「超大」貼出來:
  使用人寫入 <img> 跨越編輯器的預設 width=520 限制貼上「超寬」圖片。
  這篇文章【圖寬超過預設文寬,且不撐開文字篇幅!】可看到:
  圖寬超過文寬,但文章工具位置不變!
3)這篇文章「借幀好圖」來「作個範例」是為了:
  點點看「大/小」圖片和文章「字/行」脫勾的現象 ── 字行寬度不跟著圖片寬度變。
  主要目的是使圖片貼得「超大」而不是為「變小」所作的嘗試。

4)滑鼠控制的「動態」效果,是便於:經驗到「變」而看到「不變」部分。

5)稱「語法老師」不敢當啦∼∼我只是百試知其然而已啦……

6)放多張相片,然後用點的方式換圖 ── ?這個嘛∼∼大概有點難?
  試試別的好不?我想推薦【這篇】看如何?原來你看到了呀!

@( ^ j ^ )@

cease
等級:7
留言加入好友
把這個語法放在首頁試玩了一下,
2006/05/18 11:32

哈哈…真好玩呢!!放了兩張圖玩!好有趣唷…

對了,語法老師,能夠放多張相片,然後用點的方式換圖嗎??

有這種語法可以直接貼而不必用到軟體製作嗎??

麻煩老師釋疑…無限感激唷…^^




等級:
留言加入好友
網路詐騙研究站
2006/05/14 19:23

提供網路詐騙的相關預防方法
可以參考看看喔!

【網路詐騙研究站】
http://www.ooommm.com/staff/jim/cpu/161/


jannwu
等級:7
留言加入好友
回應:秋日小語
2006/05/13 18:08
謝謝讚賞∼∼本來擔心您嫌我把照片變小了。
有這麼精美的照片增益文章一定會變棒的啦!

如果您嘗試貼起來有發現難題或什麼的……
請告訴我,再來改進或請教行家想辦法囉。


@( ^ j ^ )@

cease
等級:7
留言加入好友
這一篇真的很棒…
2006/05/12 07:33

我就挺想學起來的…以後放相片也可以玩一下這個手法…

不但不佔空間…還能讓人看大圖…真不錯唷…

謝謝你教這個超棒的語法…太好用了…

更感激你用到我的相片呢!!

哈哈…真開心…^0^