極意(2)回り込み画像にリンクを張る方法

今回、あるお客さまから、下記の例3のような画像編集を求められましたが、一見、何んてこともない易しい処理のような感じですが、これが中々の曲者で苦労した結果となりました。
その苦労話の披露になりますが、先ずは処理の概略を説明します。
<処理概要>
1.先ず、ボックスを設定します。
2.ボックス内の左側にオンマウス画像を挿入します。
3.その画像の右側にテキスト文章を回り込ませます。
4.オンマウス画像にリンクを張ります。

要は、回り込み画像にリンクを張ること自体が、QHMの標準おまじないではできないと筆者は勘違いしていましたが、実はできるのです。(例3)


例1. ボックス内に画像の回り込み設定

先ずは、ボックス内に画像の回り込みを設定する例です。

画像の説明



操作手順
1.ボックスを設定する
2.そのボックスの左側に画像を入れる
3.ボックスの右側にテキスト文を入れる

[check]上記のおまじないです。

#box(green,4px,double,#efe,90%){{
#show(image13.jpg,aroundl,画像の説明)
&br;
操作手順
1.ボックスを設定する
2.そのボックスの左側に画像を入れる
3.ボックスの右側にテキスト文を入れる
#clear
}}


例2.前記の回り込み画像をオンマウス化

次に、ボックス内にオンマウス画像の回り込みを設定する例です。
画像の上にマウスカーソルを持って行くとオンマウス画像になっていることが確認できます。

画像の説明



操作手順
1.ボックスを設定する
2.そのボックスの左側に画像を入れる
3.その画像をオンマウス画像にする
4.ボックスの右側にテキスト文を入れる

[check]上記のおまじないです。

#box(green,4px,double,#efe,90%){{
#show(image13.jpg,change,aroundl,画像の説明)
&br;
操作手順
1.ボックスを設定する
2.そのボックスの左側に画像を入れる
3.その画像をオンマウス画像にする
4.ボックスの右側にテキスト文を入れる
#clear
}}


例3.前記のオンマウス画像にリンクを張る

最後に、オンマウス画像にリンクを張った例です。
画像をクリックすると FrontPage にリンクします。

画像の説明



操作手順
1.ボックスを設定する
2.そのボックスの左側に画像を入れる
3.その画像をオンマウス画像にする
4.そのオンマウス画像にリンクを張る
5.ボックスの右側にテキスト文を入れる

[check]上記のおまじないです。

#box(green,4px,double,#efe,90%){{
#show(image13.jpg,change,aroundl,linkurl=FrontPage,画像の説明)
&br;
操作手順
1.ボックスを設定する
2.そのボックスの左側に画像を入れる
3.その画像をオンマウス画像にする
4.そのオンマウス画像にリンクを張る
5.ボックスの右側にテキスト文を入れる
#clear
}}


例4.HTMLタグを使ったもう一つの例

前記3.の例があることを知らなかった筆者は、ユーザーフォーラムでいろいろ調べた結果、HTMLタグで同じことができることが分かりました。画像をクリックすると FrontPage の見出し「トピックス」にリンクします。

画像の説明



操作手順
1.ボックスを設定する
2.そのボックスの左側に画像を入れる
3.その画像をオンマウス画像にする
4.そのオンマウス画像にリンクを張る
5.ボックスの右側にテキスト文を入れる

[check]上記のおまじないです。

#box(green,4px,double,#efe,90%){{
#html2(<div class="img_margin_left" style="float:left;">)
[[&show(image13.jpg,change,画像の説明);>FrontPage#l9c4381f]]
#html2(</div>)
&br;
操作手順
1.ボックスを設定する
2.そのボックスの左側に画像を入れる
3.その画像をオンマウス画像にする
4.そのオンマウス画像にリンクを張る
5.ボックスの右側にテキスト文を入れる
#clear
}}


余談ですが・・・・

例3と例4の違いは、QHMの標準おまじないとHTMLタグの違いで、結果は同じ画像表現となりますが、後で分かったことですが、一つだけ大きな違いがありました。それは、画像に張ったリンク先の仕様です。
例3の linkurl=FrontPage によるリンクは、ページの先頭にしかリンクできないと言うことです。それに対して、例4では >FrontPage#l9c4381f のようにアンカーが指定できることで、ページの途中にリンクできることが決定的な違いとなりました。今回、お客さまの要求仕様は、結果的には、例4の仕様となりました。そこまで行くのに四苦八苦した結果となりました。


上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 6  
    役に立たなかった 0  


    戻る

コメント入力欄