
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
- 回答日時:
htmlソースだけではなくJavaScriptのコードも載せてアドバイスを募ってはいかがでしょうか?
意図しない動きはhtmlではなくJavaScriptの記述に因るもののように感じます。
この回答への補足
では、お言葉に甘えて、ソース全体をコピペします。
実際には同様の動作をさせたいボタンが複数あるのですが、
長いので1個分だけに減らしました。質問当時からまた少し変わっていますが、やりたいことは、“四角い透明ボタンのうち、透明でない部分にマウスが乗ったときだけ、リンク・画像変化・BGM再生を行う”ということです。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>
----------------------------------------------------------------
よろしくお願いたします。
No.5
- 回答日時:
リンク用のボタンに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つを入れ込むことができませんでした.
どちらも拾ってきたソースなので、何が原因か皆目分からず…、ほぼあきらめ状態です.
とはいえ、色々勉強になりました.
ありがとうございました.
ありがとうございます.なるほど、CSSですか.知りませんで、勉強になりました.
色々調べてみましたが、あまり時間をかけられず、分かりやすい解説ページを発見することができませんでしたが….
また、同じ画像のonMouseOver状態で、BGMを再生させるscriptも走らせているので、どうも上手く行きませんでした.
透明部分では反応しないようにしたいというのは質問で一番重要な部分でした.透明な部分で画像が入れ替わり、BGMも再生され始めるというのがどうしても許せなかったもので.
色々試してみましたが、クリッカブルマップ中に画像変換とBGM再生の二つのスクリプトを埋め込むことができませんでした….
枠はblur()で非表示にしましたので、あまり問題では無くなりました.
No.4
- 回答日時:
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>
No.3
- 回答日時:
まず、リンクに以下のように記述すれば点線の枠は出ません。
クリッカブルマップ(ホットスポット?)についても同様です。
<!-- 通常リンク -->
<a href="#" onfocus="this.blur()">テスト</a>
<!-- クリッカブルマップ -->
<img src="" alt="" width="" height="" usemap="" />
<map name="">
<area shape="" coords="" href="#" alt="" onfocus="this.blur()" />
</map>
透明部分の件についてはクリッカブルマップを使うしか方法が浮かびません。
No.2
- 回答日時:
>javascriptの実行も同一範囲
http://www.google.com/search?lr=lang_ja&q=a%E3%8 …
hrefに 希望のjsを呼び、終わりにhtmlに移動する ってjsを起動するように書いたら良いのでは?
No.1
- 回答日時:
単純に画像に対しての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>
--------------------------------------------------
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 角丸画像の背景色を透明にしたいです 1 2023/06/23 23:15
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- Photoshop(フォトショップ) 【至急】 ウェブサイトやアプリとかでよく見かける、添付画像のように背景にあるものをぼかしつつ透過する 2 2023/07/17 10:57
- Illustrator(イラストレーター) Illustratorで白い部分のみを透過させたいです。 2 2022/10/10 22:27
- DIY・エクステリア 黒電話(600型A2)のダイヤルプレートを外したい・・・ 4 2022/12/05 06:21
- その他(ソフトウェア) ペイントで切り抜いた画像の背景を透明に 2 2022/09/15 10:20
- Photoshop(フォトショップ) フォトショップで切り抜いた画像を透明にするには 3 2022/09/15 11:50
- 画像編集・動画編集・音楽編集 画質を落とさず切り取って透過したいです 2 2022/06/08 12:28
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Word(ワード) Word のマクロについての質問です。 ボタンを押すと登録したブックマーク先にジャンプする機能(リン 3 2023/08/16 12:17
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
perlで画像表示
-
c.gif とは一体なんでしょうか?
-
該当ファイルが無いときに別の...
-
ボタンを押したままにする。
-
特定の動作時フレームの背景色...
-
p target とは
-
クリックしても、リンクに飛ば...
-
HPでの画像(写真)添付について
-
カメラで撮影した画像をOpenGL...
-
[twip]から[pixel]への変換
-
リンクバナーの貼り付け方
-
画像クリックで別の画像
-
リンクの仕方
-
サムネイルの画像を同ページ内...
-
画像の高さを指定するタグについて
-
タグで画像加工
-
CSSなどでHTML全体の表示を拡大...
-
windowsは画像にマウスオンで画...
-
背景が透明なリンクボタンで、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スライドショーの上にロゴマー...
-
クリックしても、リンクに飛ば...
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
バナーの貼り方とバナーにリン...
-
form以外でのpostってできますか?
-
背景が透明なリンクボタンで、...
-
クリッカブルMAP領域が分かる様...
-
イメージマップを貼った画像の...
-
タイトルバーに画像を入れるHTM...
-
WEBサイトの一部コンテンツがス...
-
期間ごとに画像表示を切り替え...
-
<area></area> 部分にボーダー...
-
thickboxでcloseボタン右上配置...
-
複数のボタンで1つのエリアに...
-
HTMLだけで画像をクリックして...
-
windowsは画像にマウスオンで画...
-
onmouseoverに複数の命令を書き...
-
マウスオンの画像の切り替え
-
携帯用HPのダウンロードページ...
おすすめ情報