![[関西]WEBデザイン 交流会[大阪]](https://logo-imagecluster.img.mixi.jp/photo/comm/94/64/4999464_227s.gif){kind=logo}
こんにちは。
今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;
}
今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)
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";
}
}
------------------------------------
そうしたら絶対配置でテキストを画像に重ねる必要もなくなるからです。
以下の例ははいささか冗長だとは思いますがご参考までに。
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";
}
}
------------------------------------
- mixiユーザー
- ログインしてコメントしよう！
|
|
|
|
