ここから質問投稿すると、最大4000ポイント当たる!!!! >>

ネット初心者です。

ブログの画像などにマウスをあてると
簡単なタイトルや文字が表示されるようにしたいのですが
どうやったらよいのでしょうか。

時々お伺いしてるブログには
ネコちゃんの写真がよく載ってて
写真の上にマウスを乗せると
ネコちゃんの気持ちが一言表示されてとても楽しいので
私もやってみたいのです。

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

すでに回答されている人の補足になりますが



<img src="画像URL" alt="ここに文字" title="ここに文字">

titleにも同じ文字を入れてた方がいいです。
IEではaltの値が表示されますが
FirefoxやSafari、Operaはtitleの値が表示されます。

参考URL:http://higash.net/20081120/alternate-2.html
    • good
    • 0
この回答へのお礼

とっても丁寧に詳しくわかりやすくありがとうございます。
解決できました!

お礼日時:2011/06/11 12:44

まず、そのブログがタグ(html)の編集ができるかどうかを確認する。


当然の事ながらできない所ではできない

画像のalt属性にその猫の説明を書き込んで編集保存する、という手順をおこないます。
    • good
    • 0
この回答へのお礼

ありがとうございます。
解決できました!

お礼日時:2011/06/11 12:43

どちらのブログをお使いかによるかもしれません。



アップロードする時に、タイトルを決められるようになっていませんか?カーソルを置いたときに出るのは、そのタイトルに入れた文章です。

それか、htmlの使えるブログなら、画像を貼る時に

<img src="画像URL" alt="ここに文字">

という風に、altの後に文字を入れるとカーソルを置いたときに表示されます。
    • good
    • 0
この回答へのお礼

ありがとうございました!
タイトルに入れてみたらできました!
詳しくありがとうございました。

お礼日時:2011/06/11 12:42

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QForbiddenってどういう意味?

昨日まであったサイトなのにそのサイトをひらこうとするとForbiddenという文字が・・・これはどういう意味なんでしょうか?そのサイトは閉鎖されたという意味なのでしょうか?

Aベストアンサー

Forbiddenは、英語で禁止って意味ですから、

その時は繋がったが、登録されていないとか、ある限定の人しか接続できないのではないでしょうか?

あと、サーバーメンテナンスとかサイトが開かれていない時にも出ることはありますが・・

Qリンク文字クリックでラジオボタン選択、テキストボックス表示したい

次のようにハイパーリンク文字列、ラジオボタン、テキストボックスが並んでいます。

<html>
<head></head>
<body>
<a href="#">りんご</a>
<a href="#">みかん</a>
<a href="#">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
</body>
</html>

ここで、各ハイパーリンク文字列をクリックした瞬間に、

(1) 該当するラジオボタンが選択される
(2) ラベルがテキストボックスに表示される

というように動作させたいのです。

また、<a href="#">とすると画面を再読み込みしてしまうようなので、
再読み込みされない書き方についてもご教示いただけますとまことに
幸いです。よろしくお願い致します。

次のようにハイパーリンク文字列、ラジオボタン、テキストボックスが並んでいます。

<html>
<head></head>
<body>
<a href="#">りんご</a>
<a href="#">みかん</a>
<a href="#">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
</body>
</html>

ここで、各ハイパーリンク文字列をクリッ...続きを読む

Aベストアンサー

とりあえず、普通に書くとこんなかんじでしょうか。

<html>
<body>
<form>
<a href="javascript:setFruit('0','りんご')">りんご</a>
<a href="javascript:setFruit('1','みかん')">みかん</a>
<a href="javascript:setFruit('2','いちご')">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
</form>
<script language="javascript">
function setFruit(num1,num2){
//alert(1);
var f=document.forms[0];
f.select[num1].checked=true;
f.label.value=num2;
}
</script>
</body>
</html>

とりあえず、普通に書くとこんなかんじでしょうか。

<html>
<body>
<form>
<a href="javascript:setFruit('0','りんご')">りんご</a>
<a href="javascript:setFruit('1','みかん')">みかん</a>
<a href="javascript:setFruit('2','いちご')">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
...続きを読む

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qhtmlでのpdf資料のリンク方法

こちらの質問方法が悪かったようです。再度質問させてください。現在建築設計事務所を営んでおり、自社サイトを自分でHTMLを使って構築しているのですが、過去のデザイン物件のページの一部に「詳しい資料はこちら」といったテキスト画像を配置して、そこをクリックするとアクロバットが立ち上がり、作成した図面等が掲載されているPDFが表示されるようにしたいと考えています。その方法を教えてください。HTMLに記載するコード、特にPDFファイルとリンクするためのコード、PDFファイルを置くべき位置、その他注意事項があれば教えてください。よろしくお願いいたします。

Aベストアンサー

>「詳しい資料はこちら」といったテキスト画像
「ペイント」などを使ってこの画像(120px×25pxの大きさとして)
を作り「img01.gif」として「data」という名前のフォルダに格納した。
>作成した図面等が掲載されているPDF
(例えば「sample1.pdf」というファイル名として)これも
「data」というフォルダに格納したとします。
「data」フォルダはこのページのhtmlファイルを
格納しているフォルダと同じフォルダ内にあるとします。

>そこをクリックすると作成した図面等が掲載されている
>PDFが表示されるようにしたい
とのことなので

「img01.gif」という画像にハイパーリンクを設定することに
なりますので

<a href="./data/sample1.pdf"><img src="./data/img01.gif" alt="詳しい資料はこちらから(PDF版)" width="120" height="25"></a>

といった形でいいでしょう。

Qマウスオーバーで文字を表示したい

ブログ内の全ての画像に マウスを重ねた時だけ

同じ文字(例”画像をダウンロード・・・・”)を表示したいのですが

どの様に記述すれば可能なのか ご教授お願いいたします。

Aベストアンサー

あまり必要ないと思いますが・・・リンク自体も。
ブラウザのコンテキストメニューに「画像に名前をつけて保存」があるはずなので、画像がほしい人は画像を右クリックして表示されるコンテキストメニューから選択してもらえばよいだけです。
 titleがワンテンポ遅れて表示されるのは、ユーザビリティの観点から、タイトルが必要ならマウスを乗せたままにしておくと、はじめて表示されるほうがやさしいからです。いきなり出てきたら周囲の何かが隠される。

 それをすぐ表示させるのは、おせっかいすぎるような気がします。--できますが---

 大きな画像へリンクしている場合は、いずれにしてもHTMLソースを書き加えなきゃならない。
 <a href="*****/abc.jpg" title="大きな画像へ"><img ***** alt="***"></a>
 

Qリンク画像をホバーアニメーションで暗くする方法

html、css、js等でリンクの設定された画像を、マウスオーバーでゆっくりと暗くなりテキストが表示される方法はありませんでしょうか。

・マウスオーバーでゆっくり画像が暗くなり、テキストが表示される
・画像を押すとリンク先へ移動する
・マウスを画像から離すと元に戻る

もし上記のものが難しければ、ゆっくりと別の画像に入れ替わる方法はありませんでしょうか。
どなたかご教授お願い致します。

Aベストアンサー

・マウスオーバーでゆっくり画像が暗くなり、テキストが表示されるは...

.fade {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}


でhtmlにclass="fade"を設定したら行けますよ(^^)

テキストはぎゃくの設定をcssですると背景画像と反対の動きになるので、そう設定すればよいです。


参考
http://e1116.blog.fc2.com/blog-entry-24.html

//////////////////////////////////////////////////////////////////////////

・画像を押すとリンク先へ移動する

<a href="URL">~</a>
です。

参考
http://www.tohoho-web.com/html/a.htm

//////////////////////////////////////////////////////////////////////////

・マウスを画像から離すと元に戻る

一番上の記載ある設定を行うと自然とホーバー時から通常時に戻るので戻ります。

//////////////////////////////////////////////////////////////////////////


このサイトの逆引きで
aタグとか基本なら何とかなりますよ(^^)
http://www.tohoho-web.com/html/index9.htm

あとはググるしかないですけど、ググるコツみたいなのもしていくと何となく分かって来ますよ(^^)

頑張ってください。

・マウスオーバーでゆっくり画像が暗くなり、テキストが表示されるは...

.fade {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}


でhtmlにclass="fade"を設定したら行けますよ(^^)

テキストはぎゃくの設定をcssですると背景画像と反対の動きになるので、そう設定すればよいです。


参考
http://e1116.blog.fc2.com/blog-entry-24.html

///////////////////////...続きを読む


人気Q&Aランキング