OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

ホームページで、右下に固定されるロゴにハイパーリンクをつける方法

  • 困ってます
  • 質問No.144713
  • 閲覧数814
  • ありがとう数6
  • 気になる数0
  • 回答数6
  • コメント数0

お礼率 100% (7/7)

スタイルシートで、常に画面の右下にロゴなどの画像を表示させる方法(スクロールしても、ウインドウの大きさを変えても)がありますが、この画像にハイパーリンクを張ることはできるのでしょうか?
できるとしたらその方法について教えてください。

このやり方については、下記をご参照ください:
 http://www.hotwired.co.jp/webmonkey/98/24/stuff4a/logo.html
通報する
  • 回答数6
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.6
レベル11

ベストアンサー率 53% (199/370)

こんにちは。No.2、No.5、みたびです。

>実際にそういうページ存在するので、不可能なはずはないですから、がんばってください。

って書きましたけど、さすがにちょっと無責任な気がしたので、サンプルスクリプトのページをご紹介します。

画面右下にロゴイメージを表示する(DHTML)
http://www.oitaweb.ne.jp/hp/tatsuya/java/banner.htm

クロスブラウザを制する Part 2 2-7 位置固定
http://allabout.co.jp/computer/javascript/closeup/CU20010713/index.htm?FM=ct

ご参考になさってください。
お礼コメント
ami_j

お礼率 100% (7/7)

すばらしい!
まさに、こういうことです。
>>はじめからJavascriptでやれって!?

本当にありがとうございました、多謝。
投稿日時 - 2001-10-03 12:44:11
-PR-
-PR-

その他の回答 (全5件)

  • 回答No.1
レベル9

ベストアンサー率 37% (12/32)

バックグラウンド指定をしてあるので、リンクを貼ることは出来ません。 右下に固定したものにしたい場合、JAVAで指定しましょう。 ...続きを読む
バックグラウンド指定をしてあるので、リンクを貼ることは出来ません。
右下に固定したものにしたい場合、JAVAで指定しましょう。
お礼コメント
ami_j

お礼率 100% (7/7)

早速のご回答ありがとうございます。
JAVAというのは、Javascriptですね?
スタイルシートもようやく少しわかりかけた(といえるのやら...?)ところですので、Javascriptにはまだまだ手が回りません...。
上にご紹介いただいた「とほほ...」は、ブックマークに入れているのですが、なかなかじっくりと読めないまま今日まできています。
もっと勉強しないといかんなあとは思うのですが。
いずれにしろ、ありがとうございました。
投稿日時 - 2001-10-02 18:52:49
  • 回答No.2
レベル11

ベストアンサー率 53% (199/370)

>このやり方については、下記をご参照ください: >http://www.hotwired.co.jp/webmonkey/98/24/stuff4a/logo.html 拝見しましたが、できないと思います。 というより、これを「常に画面の右下にロゴなどの画像を表示させるテクニック」というのはどうかなぁ?と思います。 これって、ただ単に壁紙を固定位置に貼るだけのテクニックでしかない ...続きを読む
>このやり方については、下記をご参照ください:
>http://www.hotwired.co.jp/webmonkey/98/24/stuff4a/logo.html

拝見しましたが、できないと思います。
というより、これを「常に画面の右下にロゴなどの画像を表示させるテクニック」というのはどうかなぁ?と思います。
これって、ただ単に壁紙を固定位置に貼るだけのテクニックでしかないですよね。壁紙の代わりにロゴを貼っているだけであって。
壁紙は、backgroundのプロパティの一つだと思いますから無理でしょう。

スタイルシートを使った「常に画面の右下にロゴなどの画像を表示させるテクニック」と言うならば、おそらく、positionなどを使って画像を含むブロック要素をフローティング要素にして、ブラウザの特定の場所に配置しておくようにするべきじゃないかと思います。この場合でしたら、普通にリンクなども張れますし。
補足コメント
ami_j

お礼率 100% (7/7)

「ただ単に壁紙を固定位置に貼るだけのテクニックでしかない...」というのは、誤解されていると思うのですが、わたしの理解が誤っていますか?
「固定位置に貼」られた画像の場合、スクロールするとページ全体といっしょに上下(または横スクロールの場合は左右)して、視界からやがて消えていきますよね。
ここ(http://www.hotwired.co.jp/webmonkey/98/24/stuff4a/logo.html)で示されている右下のロゴは、スクロールしてもウインドウの大きさを変えてもブラウザウインドウの右端についてきます(ウインドウサイズを変えてみてください)。

さて、
「positionなどを使って画像を含むブロック要素をフローティング要素にして、ブラウザの指定の場所に配置しておくようにする」
とのことでしたので、
なるほどと思い、floatプロパティを使って下記のように指定してみました。

  img.float {float: right }

画像に、"float"というクラスを指定しました。

ところが、これだと確かに画像が右下に表示されるのですが、スクロールすると隠れてしまいます(つまり、ページの中で位置が固定されているわけです)。
教えていただいた方法とは違うことをしてますでしょうか?

これを隠れないように、ページの中の位置として指定するのではなく、ブラウザのウインドウ上の位置として画像の配置指定をすることができるのでしょうか?


理解不足や誤解によって誤ったことをしている/書いている場合は、何卒ご容赦ください。
投稿日時 - 2001-10-02 19:23:28
お礼コメント
ami_j

お礼率 100% (7/7)

基本的には皆さんからのご回答をみると、バックグランド指定の画像にリンクをつけることはできないということで理解しました。
ありがとうございました。
投稿日時 - 2001-10-02 18:54:07
  • 回答No.3
レベル10

ベストアンサー率 26% (32/120)

URLに書いてあるのは、画像固定ではなく、 「背景画像を固定させる」やり方ですので、リンクを貼るのは無理だと思います。 スタイルシートで画像を固定させ、さらにリンクを貼るには スタイル内に img{ margin-top:固定させる数値+単位。以下同じ; margin-bottom:; margin-left:; margin-right:; } <body>内に < ...続きを読む
URLに書いてあるのは、画像固定ではなく、
「背景画像を固定させる」やり方ですので、リンクを貼るのは無理だと思います。
スタイルシートで画像を固定させ、さらにリンクを貼るには
スタイル内に
img{
margin-top:固定させる数値+単位。以下同じ;
margin-bottom:;
margin-left:;
margin-right:;
}
<body>内に
<a href="リンク先アドレス"><img src="画像のアドレス"></a>
と、するといいでしょう。
補足コメント
ami_j

お礼率 100% (7/7)

上記方法で試してみましたが、うまく書けてないのかもわかりませんが、
img{
margin-top:固定させる数値+単位;
margin-bottom:(上に同じ、以下同じ);
margin-left:;
margin-right:;
}

では、画像の位置は固定されませんか?
ウインドウの大きさによって可動な配置指定というのはできるのでしょうか?
投稿日時 - 2001-10-02 19:27:02
お礼コメント
ami_j

お礼率 100% (7/7)

ありがとうございました。
皆さんからのアドバイスは、非常に参考になります。

...でも、意図するようなことはうまくできません。これはそもそもできないことをやろうとしているのでしょうか。
上記の方法も試してみましたが、どうもうまくいきません。それは私の書き方が間違っているのでしょうか、それとも本来的にできないことなのでしょうか...?
投稿日時 - 2001-10-02 19:23:22
  • 回答No.4
レベル10

ベストアンサー率 26% (32/120)

なるほどねー私も少し意図するところを誤解していました。 固定画像にリンクを貼る方法はわかれど、スクロールしても消えないとなると ちょっとわかりかねます。ごめんなさい。 そもそも例のURLのは、属性がbackgroundとなっている以上 これをいじってリンクをってのは不可能だと思います。 下の方がおっしゃっているようにスクリプトでなんとかなるかもしれませんが (画像固定ではなく常にロゴマークの小 ...続きを読む
なるほどねー私も少し意図するところを誤解していました。
固定画像にリンクを貼る方法はわかれど、スクロールしても消えないとなると
ちょっとわかりかねます。ごめんなさい。
そもそも例のURLのは、属性がbackgroundとなっている以上
これをいじってリンクをってのは不可能だと思います。
下の方がおっしゃっているようにスクリプトでなんとかなるかもしれませんが
(画像固定ではなく常にロゴマークの小さなウインドウを手前に出すようにし、
そこにリンク貼るとか)
当方スクリプトは詳しくないので…(^^;)
現時点では無理でも、将来出来る様になるかも。位しか言い様がないですね。
アドバイスにならずにごめんなさいね。
お礼コメント
ami_j

お礼率 100% (7/7)

ありがとうございます。
今後ともよろしくお願い申し上げます。
投稿日時 - 2001-10-03 12:31:15
  • 回答No.5
レベル11

ベストアンサー率 53% (199/370)

>「ただ単に壁紙を固定位置に貼るだけのテクニックでしかない...」というのは、誤解されていると思うのですが いえ、誤解はしていないと思っていますけれども。 もうちょっと正確に書くと、 「ただ単に壁紙を(連続媒体としてではなく)閲覧領域の固定位置に貼るテクニック」 ということです。 閲覧領域に対してですのでスクロールしてもウィンドウサイズを変えても常に定位置にあるのは確かです。 で、こ ...続きを読む
>「ただ単に壁紙を固定位置に貼るだけのテクニックでしかない...」というのは、誤解されていると思うのですが
いえ、誤解はしていないと思っていますけれども。
もうちょっと正確に書くと、
「ただ単に壁紙を(連続媒体としてではなく)閲覧領域の固定位置に貼るテクニック」
ということです。
閲覧領域に対してですのでスクロールしてもウィンドウサイズを変えても常に定位置にあるのは確かです。

で、これ(閲覧領域に対して固定する)を(通常の要素に対して)実現するスタイルが、CSS2にはあるので、スタイルシートだけでできるんじゃないか??と思っていたんですよ。
position:fixed  で。

でも、申し訳ありません!!
確認していなかったんですが、CSS2なんてサポートされていないですね。
少なくてもIE5.01では使えなかったですし、ie6.0も完全対応を謳っているのはCSS1のレベル。
すみませんでした。
#ちなみに、floatは文章の流れ込みが可能になるのであって、周りの文章から独立したポジションをとれるわけではありません。周りの文章はfloat設定された要素の存在に影響されます。影響されないようにレイヤー状態にしてやる必要があります。

なので、現状ではDynamicHTMLやJavaScriptをつかって、(もちろんブラウザごとに場合分け処理もして)実現するしかないと思います。
実際にそういうページ存在するので、不可能なはずはないですから、がんばってください。
#たぶん、CSS1,JavaScript,IEとNNそれぞれの独自スタイルなDynamicHTMLすべてを駆使する必要があると思います
お礼コメント
ami_j

お礼率 100% (7/7)

>> で、これ(閲覧領域に対して固定する)を(通常の要素に対して)実現
>> するスタイルが、CSS2にはあるので、スタイルシートだけでできるん
>> じゃないか??と思っていたんですよ。
>> position:fixed  で。

スタイルシートってすごいですね(というか、コンピューター技術そのものがすごいのかもしれないけど)。
わたしは最近その使い方を(ほんの少しだけ)理解して、虜にされてしまいました...。あまり懲りすぎるときりがないので程々にしたいと思いつつ、のめりこんでます(おかげで本来の仕事が手につかない!)。

でも、JavascriptやDHTMLなどとの使い分けなどについては実はよくわかってないので、まだまだ勉強不足は自覚してますが。


いろいろとありがとうございます。どういう方法にしろできることがわかったので、張り合いがもてました。
投稿日時 - 2001-10-03 12:41:12
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
このQ&Aにこう思った!同じようなことあった!感想や体験を書こう
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ