外部からの指定で・・・
- 0 名前： ポン太 ： 2005/01/30 21:06 ［URL］
- <div onmouseover="this.style.backgroundColor='#dfefff'" onmouseout="this.style.backgroundColor='#eaf4ff'" class="td1">
<a href=○○>------</a></div>
という、触れると背景色がかわるテキストでこの長い記述を外部から指定することはできないでしょうか？
ちなみに、クラス指定している"td1"は
.td1{border-left:8px solid #3059A5;
font-size:10pt;
text-align:left;
padding:3px;
padding-left:8px;
margin-top:9px;
background-color:#eaf4ff;}
と記述しています。
「背景色をポイントで変える」のを紹介しているサイトはだいたい見たと思うんですが見たサイトすべてが↑のように記述していました。
どなたか助言お願いします。
- 1 名前： phpinfo() ： 2005/01/30 22:25 ［URL］
- リストを外部ファイルに追いやることは出来ますが、こういった物は無理でしょう
（いや、CGI(PHP?)なら出来そうな気が・・・）
＃あと、
font-size:10pt;
はおすすめしません。一部のユーザにとっては不便です。
http://www.mars.dti.ne.jp/~fuming/contents/sizefix.htm
- 2 名前： Sinryow ： 2005/01/30 23:25 ［URL］
- これ以上縮めることは出来ないです。
ただ，「同じような処理がたくさんあって記述が長すぎる」というのであれば
色を変える処理を関数化するという方法もあります。
<head>〜</head>内に
<script type="text/javascript"><!--
function changeCol(plate){
document.all.item(plate).style.backgroundColor='#dfefff';
}
function returnCol(plate){
document.all.item(plate).style.backgroundColor='#eaf4ff'
}
//--></script>
<body>〜</body>側には
<div onmouseover="changeCol(p1)" onmouseout="returnCol(p1)" id="p1" class="td1">
<a href=○○>------</a></div>
<div onmouseover="changeCol(p2)" onmouseout="returnCol(p2)" id="p2" class="td1">
<a href=○○>------</a></div>
<div onmouseover="changeCol(p3)" onmouseout="returnCol(p3)" id="p3" class="td1">
<a href=○○>------</a></div>
・
・
・
とすれば，表記を簡略化できます。
※実験していないので，動かなかったらすみません
- 3 名前： みや ： 2005/01/31 01:50
- > 0
それでしたら、onmouseover/out 属性を使わなくても、CSS で
.td1 a { display: block; width: 100%; height: 100%; background-color: #eaf4ff; }
.td1 a:hover { background-color: #dfefff; }
とするだけで良いような気がします。どうしてもスクリプトを使うのであれば、以下のような形にするのが楽でしょうか。
<script type="text/javascript">
window.onload = function() {
if (!document.getElementsByTagName) return;
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; ++i) {
if (!divs[i].className || divs[i].className != 'td1') continue;
divs[i].onmouseover = function() { this.style.backgroundColor = '#dfefff'; }
divs[i].onmouseout = function() { this.style.backgroundColor = '#eaf4ff; }
}
}
</script>
<div class="td1"><a href=○○>------</a></div>
<div class="td1"><a href=○○>------</a></div>
<div class="td1"><a href=○○>------</a></div>
# 全角スペースでインデントしています。
- 4 名前： ポン太 ： 2005/02/02 18:39 ［URL］
- 返信ありがとうございます。
CSSのがわかりやすかったのでそちらを使用しました。
ありがとうございましたｗ
