背景ではなく、img srcをCSSで実装するには

質問

背景ではなく、img srcタグをCSSで実装したいです。
どうやればいいでしょうか？

回答No.5

DrFell · ベストアンサー

ロールオーバー目的でしたら、なおさら背景が簡単だと思います。メニューですと、文章構造的には箇条書きリストになると思います。
html
<ul class="nav">
<li><a href="test.html">test</a></li><li><a href="test2.html">test2</a></li><li><a href="test3.html" class="only">test3</a></li><li><a href="test4.html">test4</a></li>
</ul>

ｃｓｓ
.nav li{width:100px;line-height:30px;list-style:none;}
.nav li a{display:block;text-align:center;text-decoration: none;color:#ffffff;}
.nav li a:link{background:url(http://okg.ifdef.jp/b/b/B7.gif);text-decoration: none;}
.nav li a:hover{background:url(http://okg.ifdef.jp/b/b/B77.gif);}
.nav a.only:link{background:url(http://okg.ifdef.jp/b/d/D7.gif);}
.nav a.only:hover{background:url(http://okg.ifdef.jp/b/c/C7.gif);}

お嫌いでしょうが、背景を使います。また、文字も含めた画像の場合は、文字を非表示にしたり、テキストインデントのマイナス値を使って見えない場所に飛ばします。が基本は背景をチェンジすることですので、これの考え方を身につけてください。マウスが乗ったときは疑似要素のhoverを使います。

test3で個別性を高めています。classを使って局所化しております。

今後のアドバイスですが、ロールオーバーがしたいなら、ロールオーバーの手法を調べる。（ロールオーバーで検索すれば、まず検索にひっかかるのはｃｓｓでの背景を使用したロールオーバーだと思います。）わからなければロールオーバーの手法を聞くことです。「背景を使わずにimg srcタグをCSSで実装」などという回りくどい聞き方は答えが返ってきにくくなります。

わからなければ、「ｃｓｓ　ロールオーバー　説明」などで検索してみてください。

お礼

回答ありがとうございました。

＞お嫌いでしょうが、背景を使います
別に嫌いじゃないです(笑)

参考になりましたー

回答No.6

ORUKA1951

＞・共通画像メニューを利用(PHP等でinclude)
＞・現在閲覧しているページに応じて、メニュー部分に、それ用の画像を表示させたい
＞・マウスオーバーで、メニュー毎のロールオーバー画像を表示させたい
　具体的なHTMLが解らないのですが、共通画像メニューがメニュー(ナビゲーション)を画像に置き換えたもの「テキストを画像に置き換えて表現する。」でしたら、そもそもHTML的におかしいです。[14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )より]

　単純にPHPで、ナビゲーションリンクを書き出しましょう。
(例)
<div class="nav">
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
</div>
　もし現在位置を他と区別したいなら
<div class="nav">
　<li><a href="">A</a></li>
　<li>B</li>
　<li><a href="">C</a></li>
　<li><a href="">D</a></li>
</div>
でも良いでしょう。同じものしかincludeできなければ、上のものでよいが、HTMLごとに書き直す必要がある。

その上で、ロールオーバーのスタイルシートを書く。スタイルシートや画像を読み込まない(検索エンジンや点字端末・読み上げソフトなどの)ユーザーエージェントにもＯＫ(ウェブ標準)ですし、CSSも極めて簡単です。

お礼

回答ありがとうございました。

＞ロールオーバーのスタイルシートを書く
スタイルシートで、ロールオーバーって出来たんですね。

参考になりましたー

回答No.4

ORUKA1951

h2:before{content:url();}などで、h2見出しの前に画像を置くとかはできますが・・・
具体的な内容が書かれていないので、これは回答ではないような気がします。

HTMLでIMGは、その文書を構成する要素(Element)です。もしIMGを使いたくないということでしたら、その画像は、そのHTML文書の構成要素ではないわけですから、背景以外はとりえないことになります。
　ですので質問自体が矛盾しています。

「何のために」そうしたいか、あるいはHTMLにとって画像がどういう位置付けなのかを詳しく書いてください。
　そうしないと回答が出来ません。できても正解でないでしょう。

補足

回答ありがとうございました。

＞「何のために」そうしたいか、あるいはHTMLにとって画像がどういう位置付けなのかを詳しく書いてください。
失礼しました。
要件的にはこんな感じです。
・共通画像メニューを利用(PHP等でinclude)
・現在閲覧しているページに応じて、メニュー部分に、それ用の画像を表示させたい
・マウスオーバーで、メニュー毎のロールオーバー画像を表示させたい

CSSでsrc属性を直接変更できないことが分かったため、
下記を参考にjsで試してみました。
(CSSで背景画像を利用しない理由は、SRCを利用せずに画像をロールオーバーさせる方法が分からないためです)
http://okwave.jp/qa/q290847.html

試したことは、普通にメニューをincludeさせて、
ページ毎に、
document.getElementById("ID名").src= "画像のパス";
で、現在閲覧しているページ用の画像を上書きする、というもの。

ただ、これだとページ毎に、記述が必要になるのですが、

初めに挙げた要件について、
普通は、どうやるのでしょうか？

回答No.3

DrFell

なぜ背景が嫌なのでしょうか？ということにもよるのですが

あえて背景で、ｃｓｓのヒント
背景画像をリピートせずに左に表示させる。
左の背景の部分だけpadding-leftで空ける。

背景を使わずに挿入する方法もありますが、最近のブラウザしか対応しておらず、あまり現実的とはいえません。
それでも、知りたいのであれば、ヒント
contentというプロパティで要素の前や後ろに文字やイメージ画像を追加することができます。

お礼

回答ありがとうございました。

＞contentというプロパティで要素の前や後ろに文字やイメージ画像を追加することができます。
早速調べてみました。これは、HTML5でしょうか？

＞最近のブラウザしか対応しておらず、あまり現実的とはいえません。
そうですね、IE7とかには対応したいです。

回答No.2

yambejp

冷静に考えれば自明ですが、背景以外のimgは「構造」になるわけですから
cssでは定義できないですよね？

お礼

回答ありがとうございました。

＞自明ですが、背景以外のimgは「構造」になるわけですから
＞cssでは定義できないですよね？
もしかして、何か裏技みたいなのがあるかな、と思って質問してみました。

回答No.1

hunter_999

おそらくcssのみではimg srcを実装するのは不可能かと思われます。

やりたい事をもっと具体的に記載していただければ、
他の方法で実現できるかもしれません。

お礼

回答ありがとうございました。

＞おそらくcssのみではimg srcを実装するのは不可能かと思われます。
やはり、不可能ですか…