- ベストアンサー
ホームページで、右下に固定されるロゴにハイパーリンクをつける方法
スタイルシートで、常に画面の右下にロゴなどの画像を表示させる方法(スクロールしても、ウインドウの大きさを変えても)がありますが、この画像にハイパーリンクを張ることはできるのでしょうか? できるとしたらその方法について教えてください。 このやり方については、下記をご参照ください: http://www.hotwired.co.jp/webmonkey/98/24/stuff4a/logo.html
- みんなの回答 (6)
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。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 ご参考になさってください。
その他の回答 (5)
- sight
- ベストアンサー率53% (199/370)
>「ただ単に壁紙を固定位置に貼るだけのテクニックでしかない...」というのは、誤解されていると思うのですが いえ、誤解はしていないと思っていますけれども。 もうちょっと正確に書くと、 「ただ単に壁紙を(連続媒体としてではなく)閲覧領域の固定位置に貼るテクニック」 ということです。 閲覧領域に対してですのでスクロールしてもウィンドウサイズを変えても常に定位置にあるのは確かです。 で、これ(閲覧領域に対して固定する)を(通常の要素に対して)実現するスタイルが、CSS2にはあるので、スタイルシートだけでできるんじゃないか??と思っていたんですよ。 position:fixed で。 でも、申し訳ありません!! 確認していなかったんですが、CSS2なんてサポートされていないですね。 少なくてもIE5.01では使えなかったですし、ie6.0も完全対応を謳っているのはCSS1のレベル。 すみませんでした。 #ちなみに、floatは文章の流れ込みが可能になるのであって、周りの文章から独立したポジションをとれるわけではありません。周りの文章はfloat設定された要素の存在に影響されます。影響されないようにレイヤー状態にしてやる必要があります。 なので、現状ではDynamicHTMLやJavaScriptをつかって、(もちろんブラウザごとに場合分け処理もして)実現するしかないと思います。 実際にそういうページ存在するので、不可能なはずはないですから、がんばってください。 #たぶん、CSS1,JavaScript,IEとNNそれぞれの独自スタイルなDynamicHTMLすべてを駆使する必要があると思います
お礼
>> で、これ(閲覧領域に対して固定する)を(通常の要素に対して)実現 >> するスタイルが、CSS2にはあるので、スタイルシートだけでできるん >> じゃないか??と思っていたんですよ。 >> position:fixed で。 スタイルシートってすごいですね(というか、コンピューター技術そのものがすごいのかもしれないけど)。 わたしは最近その使い方を(ほんの少しだけ)理解して、虜にされてしまいました...。あまり懲りすぎるときりがないので程々にしたいと思いつつ、のめりこんでます(おかげで本来の仕事が手につかない!)。 でも、JavascriptやDHTMLなどとの使い分けなどについては実はよくわかってないので、まだまだ勉強不足は自覚してますが。 いろいろとありがとうございます。どういう方法にしろできることがわかったので、張り合いがもてました。
- norizow
- ベストアンサー率26% (32/120)
なるほどねー私も少し意図するところを誤解していました。 固定画像にリンクを貼る方法はわかれど、スクロールしても消えないとなると ちょっとわかりかねます。ごめんなさい。 そもそも例のURLのは、属性がbackgroundとなっている以上 これをいじってリンクをってのは不可能だと思います。 下の方がおっしゃっているようにスクリプトでなんとかなるかもしれませんが (画像固定ではなく常にロゴマークの小さなウインドウを手前に出すようにし、 そこにリンク貼るとか) 当方スクリプトは詳しくないので…(^^;) 現時点では無理でも、将来出来る様になるかも。位しか言い様がないですね。 アドバイスにならずにごめんなさいね。
お礼
ありがとうございます。 今後ともよろしくお願い申し上げます。
- norizow
- ベストアンサー率26% (32/120)
URLに書いてあるのは、画像固定ではなく、 「背景画像を固定させる」やり方ですので、リンクを貼るのは無理だと思います。 スタイルシートで画像を固定させ、さらにリンクを貼るには スタイル内に img{ margin-top:固定させる数値+単位。以下同じ; margin-bottom:; margin-left:; margin-right:; } <body>内に <a href="リンク先アドレス"><img src="画像のアドレス"></a> と、するといいでしょう。
お礼
ありがとうございました。 皆さんからのアドバイスは、非常に参考になります。 ...でも、意図するようなことはうまくできません。これはそもそもできないことをやろうとしているのでしょうか。 上記の方法も試してみましたが、どうもうまくいきません。それは私の書き方が間違っているのでしょうか、それとも本来的にできないことなのでしょうか...?
補足
上記方法で試してみましたが、うまく書けてないのかもわかりませんが、 img{ margin-top:固定させる数値+単位; margin-bottom:(上に同じ、以下同じ); margin-left:; margin-right:; } では、画像の位置は固定されませんか? ウインドウの大きさによって可動な配置指定というのはできるのでしょうか?
- sight
- ベストアンサー率53% (199/370)
>このやり方については、下記をご参照ください: >http://www.hotwired.co.jp/webmonkey/98/24/stuff4a/logo.html 拝見しましたが、できないと思います。 というより、これを「常に画面の右下にロゴなどの画像を表示させるテクニック」というのはどうかなぁ?と思います。 これって、ただ単に壁紙を固定位置に貼るだけのテクニックでしかないですよね。壁紙の代わりにロゴを貼っているだけであって。 壁紙は、backgroundのプロパティの一つだと思いますから無理でしょう。 スタイルシートを使った「常に画面の右下にロゴなどの画像を表示させるテクニック」と言うならば、おそらく、positionなどを使って画像を含むブロック要素をフローティング要素にして、ブラウザの特定の場所に配置しておくようにするべきじゃないかと思います。この場合でしたら、普通にリンクなども張れますし。
お礼
基本的には皆さんからのご回答をみると、バックグランド指定の画像にリンクをつけることはできないということで理解しました。 ありがとうございました。
補足
「ただ単に壁紙を固定位置に貼るだけのテクニックでしかない...」というのは、誤解されていると思うのですが、わたしの理解が誤っていますか? 「固定位置に貼」られた画像の場合、スクロールするとページ全体といっしょに上下(または横スクロールの場合は左右)して、視界からやがて消えていきますよね。 ここ(http://www.hotwired.co.jp/webmonkey/98/24/stuff4a/logo.html)で示されている右下のロゴは、スクロールしてもウインドウの大きさを変えてもブラウザウインドウの右端についてきます(ウインドウサイズを変えてみてください)。 さて、 「positionなどを使って画像を含むブロック要素をフローティング要素にして、ブラウザの指定の場所に配置しておくようにする」 とのことでしたので、 なるほどと思い、floatプロパティを使って下記のように指定してみました。 img.float {float: right } 画像に、"float"というクラスを指定しました。 ところが、これだと確かに画像が右下に表示されるのですが、スクロールすると隠れてしまいます(つまり、ページの中で位置が固定されているわけです)。 教えていただいた方法とは違うことをしてますでしょうか? これを隠れないように、ページの中の位置として指定するのではなく、ブラウザのウインドウ上の位置として画像の配置指定をすることができるのでしょうか? 理解不足や誤解によって誤ったことをしている/書いている場合は、何卒ご容赦ください。
- popon1
- ベストアンサー率37% (12/32)
バックグラウンド指定をしてあるので、リンクを貼ることは出来ません。 右下に固定したものにしたい場合、JAVAで指定しましょう。
- 参考URL:
- http://tohoho.wakusei.ne.jp/
お礼
早速のご回答ありがとうございます。 JAVAというのは、Javascriptですね? スタイルシートもようやく少しわかりかけた(といえるのやら...?)ところですので、Javascriptにはまだまだ手が回りません...。 上にご紹介いただいた「とほほ...」は、ブックマークに入れているのですが、なかなかじっくりと読めないまま今日まできています。 もっと勉強しないといかんなあとは思うのですが。 いずれにしろ、ありがとうございました。
お礼
すばらしい! まさに、こういうことです。 >>はじめからJavascriptでやれって!? 本当にありがとうございました、多謝。