« イーストアイ新幹線の迎撃に向うも撃沈した(´;ω;`)ウウ・・・ | トップページ | マイナーな存在だったけど普段の走る姿を存分に撮ったからね »

2011年5月28日 (土曜日)

「マウスオーバーで写真を拡大表示する」第2回

前回の「マウスオーバーで写真を拡大表示する」では
写真をクリックするとリンクページに
移動するになっていたけれど

参照ページはココログ広場での質問スレッド

試してみたい事はこんなの
■ハイパーリンクの設定をしない
単に写真を拡大させたい

■縮小状態の写真を見栄え良く表示する
参照ページに記述されていた
縮小状態の写真サイズの縦横80pxだったものを
元の写真サイズの縦横比に近い値にしてみる
横320px 縦190pxに変更


↓ハイパーリンク設定のそのまま
縮小サイズの指定はうまく出来たみたい

↓HTMLのハイパーリンク記述部分を取っ払うと
どうなるのか?

うーん・・
拡大表示にならない(;´д`)トホホ

うーん・・・HTMLのハイパーリンクの記述部分を
取っ払うだけじゃ駄目みたいだ

縮小状態のサイズ指定が出来ただけでも一歩前進か

今度、参照ページのYAHOO!知恵袋に質問してみよう

■今後やってみたい事
縮小状態の写真表示の横に
数行のテキストを綺麗に配置するにはどうすればいいのか?

また次回頑張ろう

|

« イーストアイ新幹線の迎撃に向うも撃沈した(´;ω;`)ウウ・・・ | トップページ | マイナーな存在だったけど普段の走る姿を存分に撮ったからね »

ココログ・ブログカスタマイズ・編集」カテゴリの記事

コメント

こんにちは、助け合い掲示板で拝見したときはよく意味が分からなかったのですが、こちらの記事を読んで意図が分かりました。
質問のスレッドは“解決”となっていてレスできないので、ブログにコメントします。
方法をこちらの↓webページにまとめてあります。(アドレスにリンクも貼ってあります。)
ご参考まで。

『画像をオンマウスで拡大するCSSとhtmlタグ』
http://daishi100.cocolog-nifty.com/blog/test_CSS01.html

補足:
サムネイルの画像がある段落(...)の次の段落がうまく改行できないので、苦肉の策(?)で、下のようにを入れています。
これで横10px、縦50pxのスペースが空きます。

投稿: 大師小ブログ主 | 2011年6月 1日 (水曜日) 午前 11時28分

あらら
コメント欄にhtmlタグを直接記述すると無視されるというか削除されてしまうのですね。(テキストとして表示されるのかと思っていました。)
タグを書いた部分が見事に消えてしまいました。spacerタグの件は、webページにあらためて書いておきます。

投稿: 大師小ブログ主 | 2011年6月 1日 (水曜日) 午前 11時32分

>大師小ブログ主さんへ
ありがとうこございます

早速見に行って来ました

いいですね♪
参考にさせていたただきます(/ ^^)/

これで写真と文字の見た目の大きさという要素の
バランスを取れるようになりますね

投稿: ユウぱぱ | 2011年6月 1日 (水曜日) 午後 07時03分

いえいえ、どう致しまして。
オンマウスで画像を切り替えるというのは知っていましたが、それを利用して拡大画像(オリジナルサイズの画像)を表示させるというのは思いつきませんでした。

こちらも勉強になりました。ありがとうございます。

投稿: 大師小ブログ主 | 2011年6月 1日 (水曜日) 午後 08時40分

大師小ブログ主さんへ


ありがとうございます
また『こんなんやってみたい』って提案しますので教えてくださいね

投稿: ユウぱぱ | 2011年6月 4日 (土曜日) 午後 12時13分

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: 「マウスオーバーで写真を拡大表示する」第2回:

« イーストアイ新幹線の迎撃に向うも撃沈した(´;ω;`)ウウ・・・ | トップページ | マイナーな存在だったけど普段の走る姿を存分に撮ったからね »