「お昼の放送」の思い出

背景が透明なリンクボタンで、透明部分からリンクをさせない方法

締切済

  • 質問者：kato-haru
  • 質問日時：
  • 回答数：6件

1.pngという背景透明なボタンを作り、そこからonmouseでリンクを含む3種類のjavascriptが走るようにしてありますが、それだけだと、画像の透明部分でもリンクとjavascriptが有効になってしまいます。
画像の透明部分にマウスがあるときは何も起こらず、透明でない部分にマウスが乗った時だけにリンクとjavascriptを実行させることはできませんか？

よろしくお願いします。
実際使用しているソースは次の通りです。
--------------------------------------------------
<img border="0" alt="1" src="images/1.png" onclick="location.href='1.htm'" onmousedown="bdown()" onmouseup="bup()" onmouseover="bover(); PP(1)" onmouseout="bout(); PC(1)" id="bimage"/>
--------------------------------------------------
ボタンの周囲にアクティブを示す点線の枠を表示させたくないため、リンクにはあえてホットスポットや通常のリンクを使用していません。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6

  • 回答者： shimiham
  • 回答日時：

htmlソースだけではなくJavaScriptのコードも載せてアドバイスを募ってはいかがでしょうか？



意図しない動きはhtmlではなくJavaScriptの記述に因るもののように感じます。

この回答への補足

では、お言葉に甘えて、ソース全体をコピペします。
実際には同様の動作をさせたいボタンが複数あるのですが、
長いので1個分だけに減らしました。質問当時からまた少し変わっていますが、やりたいことは、“四角い透明ボタンのうち、透明でない部分にマウスが乗ったときだけ、リンク・画像変化・ＢＧＭ再生を行う”ということです。javascriptにこだわるつもりはありません。
---------------------------------------------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var preloadFlag = false;

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src =
changeImages.arguments[i+1];
}
}
}

function preloadImages() {
if (document.images) {

menu1_over = newImage("images/2.png");
preloadFlag = true;
}
}
// -->
</SCRIPT>

<script LANGUAGE="JavaScript">
<!--
var akoMM = new Array();
akoMM[1] = "musicfiles/1.mid";

document.write('<BGSOUND ID="akoMIEC">')
MIE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NN = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = MIE||NN? 1:0;
onload=akoRL;

function akoRL() {
if (!ver4) return;
if (NN) akoEmbed = new Layer(0,window);
else {
akoST = "<div id='akoEmbed' STYLE='position:absolute;'></div>";
document.body.insertAdjacentHTML("BeforeEnd",akoST);
}
var akoST = '';
for (suu=0;suu<akoMM.length;suu++)
akoST += "<embed src='"+akoMM[suu]+"' autostart='false' hidden='true'>"
if (MIE) akoEmbed.innerHTML = akoST;
else {
akoEmbed.document.open();
akoEmbed.document.write(akoST);
akoEmbed.document.close();
}
auCon = MIE? document.all.akoMIEC:akoEmbed;
auCon.control = akoCont;
}
function akoCont(donoM,Kaishi) {
if (MIE) this.src = Kaishi? akoMM[donoM]:'';
else eval("this.document.embeds[donoM]." + (Kaishi? "Kaishi()":"Teishi()"))
}
function plakoMM(donoM) { if (window.auCon) auCon.control(donoM,true); }
function TeishiakoMC(donoM) { if (window.auCon) auCon.control(donoM,false); }
//-->
</script>
</HEAD>

<BODY bgcolor="#CCFF99" onLoad="preloadImages();">

<IMG NAME="menu1" SRC="images/1.png"
BORDER="0" ALT="1"
USEMAP="#map1">
<MAP NAME="map1">
<AREA SHAPE="circle" COORDS="32,32,33" border="0" onFocus="blur()"
HREF="hymn1.htm" ALT="Menu 01"
onMouseOver="changeImages('menu1', 'images/2.png'); plakoMM(1);"
onMouseOut="changeImages('menu1', 'images/1.png'); TeishiakoMC(1);"
onMouseDown="changeImages('menu1', 'images/3.png'); return true;"
onMouseUp="changeImages('menu1', 'images/2.png'); return true;">
</MAP>
</BODY>
----------------------------------------------------------------
よろしくお願いたします。

補足日時：2009/06/09 17:35
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： shimiham
  • 回答日時：

リンク用のボタンにJavaScriptを使うのははっきり言って時代遅れです。

理由はユーザビリティの面から言って難点があり好ましくないとされているからです。

一つはカーソルを重ねた状態やクリックした状態などそれぞれが別の画像になっていると、そのタイミングで初めて画像を読み込もうとするため一瞬画像が消え、ユーザが戸惑います。
また検索ロボットは画像やスクリプトを理解できませんので、そこにリンクはないと判断されてしまいます。その先のページ巡回が行われませんので検索エンジンに引っかからなくなってしまいます。
そもそもJavaScriptをOFFにしている場合はリンクがまったく意味をなしません。

HTML+CSSだけで記述できるので覚えておけば作業効率が格段にアップします。リンクはテキストで記述しその背景に画像を使いテキストは見えなくするという方法です。以下はその一例です。


まずボタンの画像ですが、通常の状態、マウスを重ねた状態、押した状態それぞれの画像を横または縦一列に並べて一つの画像として作成します。

<a>XXXXX</a>
というリンクをボタンで表現する場合、
ボタン画像は100x100の画像3種類通常、マウスを重ねた状態、クリックした状態の順で横一列に並べて作ったとします。
a{
display:block;（a要素を幅と高さを持ったブロックにする）
width:100px;(幅を設定）
height:100px;（高さを設定）
background:url(background.png) no-repeat 0 0;（背景の設定）
text-indent:-9999px;（a要素の中のテキストを見えなくする）
}
a:hover{
background-position: -100px 0;（カーソルを重ねた時は背景を左に100pxずらす）
}
a:active{
background-position: -200px 0;（クリック時は背景を左に200pxずらす）
}

「CSS 画像ボタン」で検索すると詳しく解説しているサイトに出会えると思います。

質問では丸い部分だけにリンクを張りたいということですが、リンク部分は四角いままで良いと思います。
それはその画像の周辺でもリンクが反応することで、カーソルを動かすというユーザの負担をいくらかでも和らげることができるからです。おそらくは

＞ボタンの周囲にアクティブを示す点線の枠を表示させたくないため、リンクにはあえてホットスポットや通常のリンクを使用していません

ここで四角い点線が丸いボタン画像の周りにできてしまうのが気になっていらっしゃるのだろうと思います。FIrefoxではリンクに点線が出ますね。これはCSSでaタグにoutline:0;を設定するとリンク部分の点線は表示されなくなります。

イメージマップをお考えなら、それもCSSと画像のちょっとした工夫で表現できますので「CSSイメージマップ」で検索してみてください。

この回答への補足

皆さん、手伝ってくれてどうもありがとうございました．
結局、よく分からず仕舞いでした．
一番知りたかった、透明部分には反応させない、というのはどうもクリッカブルマップしかなさそうで、それはやってみました．しかし、1枚の透明画像に対して、画像変換とBGM再生（mouseOutで停止）の2つのjavascriptを掛け持ちしたかったのですが、クリッカブルマップの<area>内には自分のできる範囲ではどうしても2つを入れ込むことができませんでした．
どちらも拾ってきたソースなので、何が原因か皆目分からず…、ほぼあきらめ状態です．

とはいえ、色々勉強になりました．
ありがとうございました．

補足日時：2009/06/08 18:00
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます．なるほど、CSSですか．知りませんで、勉強になりました.
色々調べてみましたが、あまり時間をかけられず、分かりやすい解説ページを発見することができませんでしたが…．
また、同じ画像のonMouseOver状態で、BGMを再生させるscriptも走らせているので、どうも上手く行きませんでした.

透明部分では反応しないようにしたいというのは質問で一番重要な部分でした．透明な部分で画像が入れ替わり、BGMも再生され始めるというのがどうしても許せなかったもので．
色々試してみましたが、クリッカブルマップ中に画像変換とBGM再生の二つのスクリプトを埋め込むことができませんでした…．

枠はblur()で非表示にしましたので、あまり問題では無くなりました．

通報する
お礼日時：2009/06/08 18:10

No.4

  • 回答者： fujillin
  • 回答日時：

No1です。



単純化して、例えば以下のような実験をしてみれば、イベントがどのタイミングで発生しているか確認できると思いますが？
（例では、80pxの四角の左上1/4内の円形がmapでの対象になるはず）

複数のイベント処理を行う場合、発生順がどのようになるかなどを確認しておいたほうがよろしいかと思います。

<html>
<head>
<script type="text/javascript">
function d(w) {document.getElementById('s').innerHTML = w;}
</script>
</head>
<body>
<div id="s">*</div>
<p>
<img border="1" alt="" src="" style="width:80px; height:80px;" usemap="#Map1" />
<map name="Map1">
<area shape="circle" coords="20, 20, 20" href="" onmouseover="d('over')" onmouseout="d('out')" >
</map>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： x_lady007
  • 回答日時：

まず、リンクに以下のように記述すれば点線の枠は出ません。


クリッカブルマップ（ホットスポット?）についても同様です。

<!-- 通常リンク -->
<a href="#" onfocus="this.blur()">テスト</a>

<!-- クリッカブルマップ -->
<img src="" alt="" width="" height="" usemap="" />
<map name="">
<area shape="" coords="" href="#" alt="" onfocus="this.blur()" />
</map>

透明部分の件についてはクリッカブルマップを使うしか方法が浮かびません。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： SAYKA
  • 回答日時：

>javascriptの実行も同一範囲



http://www.google.com/search?lr=lang_ja&q=a%E3%8 …

hrefに　希望のjsを呼び、終わりにhtmlに移動する　ってjsを起動するように書いたら良いのでは？
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

単純に画像に対してのonclickなどだと透明/不透明に関わらずその要素の範囲に対してイベントが発生します。



画像で、範囲を限定したいのであれば、クリッカブルマップなどを利用されてはどうでしょうか。
　http://www008.upp.so-net.ne.jp/netbegin/tetori/h …
　http://homepage3.nifty.com/f-page/hp/html2/cmap0 …


＞枠を表示させたくないため～
通常のリンクタグを用いても、CSSなどで枠線を非表示にすることも可能だと思いますが。

この回答への補足

ありがとうございます！

ただ、クリッカブルマップを使用する場合、リンクは範囲指定できますが、javascriptの実行も同一範囲に限定することはできますか？
色々試してみましたが、どうしてもうまくいきませんでした。

動かなかったソースですが、使ったソースは以下です。手直しなど可能でしたらお願いします。
-------------------------------------------------
<img border="0" alt="1" src="images/1.png" usemap="#Map1"/>

<map name="Map1">
<area shape="circle" coords="40, 40, 40" href="1.htm" onFocus="blur()" onmousedown="this.src='images/2.png'" onmouseup="this.src='images/3.png'" onmouseover="this.src='images/4.png'; PP(1)" onmouseout="this.src='images/1.png'; PC(1)">
</map>
--------------------------------------------------

補足日時：2009/06/05 17:23
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報