ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

CSSテクニックコミュのcssとJavascript

  • mixiチェック
  • このエントリーをはてなブックマークに追加
こんにちは。
今cssとJavascriptを絡めた
ものを作っています。
Javaでリロードするたびに画像が変わる…というもので、
その画像の上にテキストを
表示させています。

winのIE、FFではうまく行っているのですが
NNではリロードするとテキストがずれてしまいます。
またFFではテキストにくっつけているリンクも
消えてしまうようです。

もともと無理があるのでしょうか?
どなたかわかる方がいらっしゃいましたら
お力添えお願いいたします。

html
<body>
<div id="nakajima">

<h1><a href="sample2.html">詳細はコチラ</a></h1>
<h2>なんたらかんたらなんたらかんたらなんたらかんたらなんたらかんたらなんたらかんたら</h2>
<script language="JavaScript">
<!--
imgURL = new Array();
imgURL[0] = "img/nakajima1.jpg";
imgURL[1] = "img/nakajima2.jpg";
imgURL[2] = "img/nakajima3.jpg";
n = Math.floor(Math.random()*imgURL.length);
document.write("<img src='"+imgURL[n]+"' border='0'>");
// -->
</script>
</div>

css

#nakajima{
height:198px;
}
#nakajima h1 {
position:absolute;
width:510px;
margin-left:250px;
padding-top: 70px;
text-decoration: none;
}
#nakajima h2{
position:absolute;
width:510px;
padding-top: 160px;
margin-left:250px;
left: 249px;
top: -35px;
}

コメント(8)

店主さん

ありがとうございます!
今更気づいたのですが
positionを使うとブラウザの大きさによって
(画像をmargin:autoなどでcenter指定しているので)
見え方が変わってしまうことに気づきました…orz

backgroundに指定してそのタグをJavaで書く…
というのはcssにJavaを組み込むと言うことですか??
よかったら教えていただけますか?

Takenさんへ

ありがとうございます。
こちら、超初心者ゆえ、#DOMがわかりません…
backgroundを使った方法ってどんなのがあるんでしょうか?
教えていただけると助かります。
2: Takenさんのおっしゃるのは、nakajima1.jpgなどの画像をimg要素ではなくて、スタイルシートのbackgroundプロパティで、ということではないかと。
そうしたら絶対配置でテキストを画像に重ねる必要もなくなるからです。

以下の例ははいささか冗長だとは思いますがご参考までに。

HTMLは、
------------------------------------
<body onload="randomImg()">
(※↑functionを実行させます)

<div id="任意のID名" style="background: url(img/nakajima1.jpg) left top no-repeat;">
(※↑要素を取得するためにIDを与えています。またstyle属性に記述したbackgroundはJavascriptがオフの環境の場合採用されます)

<h1><a href="**">リンク</a></h1>
<p>テキストテキストテキスト</p>
</div>
------------------------------------

javascriptは、
------------------------------------
var setonNum = Math.floor(Math.random() * 3);
(※↑ランダムで0から2までの数字をセット)

function randomImg(){
if (setonNum == 0) {
document.getElementById("任意のID名").style.background = "url(img/nakajima1.jpg) left top no-repeat";
}

else if (setonNum == 1) {
document.getElementById("任意のID名").style.background = "url(img/nakajima2.jpg) left top no-repeat";
}

else if (setonNum == 2) {
document.getElementById("任意のID名").style.background = "url(img/nakajima3.jpg) left top no-repeat";
}
}
------------------------------------
>かわち丸さん

おぉ!なるほど!!
ありがとうございます!
そうゆうことだったのですね。
しかもサンプルまでありがとうございます!!

>Takenさん

いえいえ、私が未熟者なので
理解できなかっただけです。
わざわざありがとうございます!

皆さんの意見を元にがんばってやってみます!!
忙しい中ありがとうございましたm(*^_^*)m
>5: Takenさん

シンプルにまとめてくださって、ありがとうございます。
こちらも勉強になりました。

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング