• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:HP 画像の一部にリンクでその部分のみ画像変化)

HP 画像の一部にリンクでその部分のみ画像変化

kichi4182の回答

  • kichi4182
  • ベストアンサー率21% (12/57)
回答No.5

基本的には出来ません。私が知らないだけかもしれませんが....(^▽^笑) 私は画像上の文字だけを変えるという事をやっていますが、画像を細切れにしてtableで配置しています。table指定しなくても可能だとは思いますが... http://ikasitai.info/

参考URL:
http://ikasitai.info/

関連するQ&A

  • クリッカブルマップで切り替えた先の画像に部分リンク

    javaスクリプトを使ってクリッカブルマップで画像差し替えをしています。(下記コード) イメージでいうとボタン(1)(2)(3)とエリアAで成る一枚の画像の、ボタン(1)(2)(3)の箇所にマウスオンをすると画像が切り替わり、エリアAにそれぞれ違う説明が表示される(ように見える)・・・というものをJavaスクリプトを使って作りました。 この、切り替わった後のエリアAに表示された説明内に、更にクリッカブルマップを設定しリンクを貼りたいのですが、方法がわかりません。 詳しい方、教えてください。 <script type="text/javascript"> function button1_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像1'; } function button2_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像2'; } function button3_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像3'; } <figure> <img src="元画像" alt="○" usemap="#image_map" id="map" /> <map id="image_map" name="image_map"> <area shape="poly" coords="省略1" onmouseover="button1_over()" href="#" alt="~~~" /> <area shape="poly" coords="省略2" onmouseover="button2_over()" href="#" alt="~~~" />    <area shape="poly" coords="省略3" onmouseover="button3_over()" href="#" alt="~~~" /> </map> </figure>

  • mapでロールオーバー

    以下のようにmapでロールオーバーをしようとしたのですが、機能しません。 <div align="center"><img src="images/main.png" alt="" usemap="#map1" border="0" /></div> <map name="map1"> <area href="taku.html" alt="" shape="rect" coords="766,0,996,69" onmouseover="this.src='images/mainleft1_on.png'" onmouseout="this.src='images/mainleft1.png'" src="images/mainleft1.png" alt="" border="0" /> <area href="taku2.html" alt="" shape="rect" coords="766,70,996,137" onmouseover="this.src='images/mainleft2_on.png'" onmouseout="this.src='images/mainleft2.png'" src="images/mainleft2.png" alt="" border="0"/></map> 全体の画像main.png の上にボタンmainleft1.png mainleft2.png がロールオーバーするようにしたいんですができないんでしょうか?

    • ベストアンサー
    • HTML
  • background-imageが表示されない

    ヘッダーの部分の背景画像が表示されません。 CSS #header { height: auto; display:block; margin:0px;padding:0px;width:100%; background-image: url(../images/mainback.png); } HTML <div id="header"> <div><img src="images/topbar2.gif" alt="" usemap="#map2" border="0" /></div> <map name="map2"> <area href="s.html" alt=""shape="rect"coords="394,57,495,68" /> <area href="t.html" alt=""shape="rect"coords="510,57,605,68"/></map> <div><img src="images/main.png" alt="" usemap="#map1" border="0" /></div> </div> 上記のようにヘッダー画像の下に背景画像をつけたいのですが、画像がある場合背景画像は重ならないんでしょうか?

    • ベストアンサー
    • HTML
  • 背景が透明なリンクボタンで、透明部分からリンクをさせない方法

    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"/> -------------------------------------------------- ボタンの周囲にアクティブを示す点線の枠を表示させたくないため、リンクにはあえてホットスポットや通常のリンクを使用していません。 よろしくお願いします。

  • 作ったHPを開くと「アクティブコンテンツを許可するか?」と忠告がでてしまう・・

    大学の研究室のHpを作っているのですが、作ったHPをIE6で開くとセキュリティーに引っかかってしまうのか、必ず写真のように「アクティブコンテンツを許可するか?」と忠告がでます。 おそらく、マウスポインタをのせると画像が変わるようにするタグ <img src="img.png" onMouseOver="this.src=img2.png'" onMouseOut="this.src='img.png'" border=0 alt="サイトマップ"> が原因だと思うのですが、デザイン的にこれは使いたいなと思っています。 どうしたらこの表示を出さないようにできるでしょうか? ちなみに、素人なので簡単なHTMLしかできません。 難しいものは基本的に素材屋さんより配布されているスクリプトをコピー&ペーストするなどして利用しています。 どなたか教えていただければと思うので、よろしくお願いしますm(_ _)m

    • ベストアンサー
    • HTML
  • クリックでクリッカブルマップの色が変化する処理

    クリッカブルマップを使用して、特定の場所をクリックしたら色と場所が変化するようなものを作成したいと思っております。 過去の質問も参考にさせて頂いたのですが、思うように作動してくれないので、質問を立てさせて頂きました。 HTML JQueryコードを下記に記します。 <HTML> <div id="click"> <img src="../../Images/kousi2-0.png" usemap="#sikaku" width="400px" height="400px" alt="map" class="metermap"/> <map name="sikaku"> <area shape="rect" coords="19,22,89,91" alt="map1" id="clickmap1" /> <area shape="rect" coords="94,22,161,91" alt="map1" id="clickmap2" /> <area shape="rect" coords="166,22,235,91" alt="map1" id="clickmap3" /> </map> </div> <JQuery> //クリッカブルマップの切り替え処理 $(document).ready( function () { $("#clickmap1").click(function () {; var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-1.png"); $("#click img").attr("src",onsrc); }); }); $(document).ready( function () { $("#clickmap1").click(function () {; var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-2.png"); $("#click img").attr("src",onsrc); }); }); $(document).ready( function () { $("#clickmap1").click(function () {; var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-3.png"); $("#click img").attr("src",onsrc); }); }); これで画像は切り替わるのですが、所定の場所に画像が移動してくれません。 今使用している格子の画像で説明すると、クリックで出現する赤の四角が、格子の左上から右下に移動してくれないといった感じです。 replaceで置き換えているだけなので、その場所しか切り替わらないのは当然ですが、 解決策が見えてきません。 有効なJQueryのライブラリなどございましたら、ご紹介頂けると幸いです。 よろしくお願いいたします。 ご教授のほど、よろしくお願いいたします。

  • クリッカブル・マップのリンクが効かない

    下記のコードでpngの画像上でリンクをつけましたが、カーソルをかざしても反応が有りません。どこが間違っているのでしょうか? 皆様、ご教授お願いします <table width="750" align="center"> <tbody> <tr><td> <img src="top2.png" usemap="#top2"> <map name="top2"> <area shape="rect" coords="20,197,63,206" href="http://------.html" alt="A"> <area shape="rect" coords="78,198,121,206" href="http://------.html" alt="b"> <area shape="rect" coords="137,198,181,206" href="http://------.html" alt="c"> <area shape="rect" coords="196,198,239,206" href="http://------.html" alt="d"> <area shape="rect" coords="19,163,63,272" href="http://------.html" alt="e"> <area shape="rect" coords="77,264,121,272" href="http://------.html" alt="f"> </map> </td> </tr> </tbody> </table>

    • 締切済み
    • XML
  • マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。

    マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。 <img src="images/aaa.jpg" usemap="#map" /> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> </map> kan.html <div align="center" id="3"><img src="images/bar_3.jpg"></div> 以上のようにマップを使ってリンクページの更にページ内リンク先に飛ばそうとしても そのページに飛ぶだけで、飛ばしたい位置まで行きません。 <a name="3"><img src="images/bar_3.jpg"></a> でもダメです。 どうしてでしょうか?

    • ベストアンサー
    • HTML
  • onClickで指定した以外の画像も変わってしまう

    Youtubeの動画をボタンを使って切り替えるように設定しています。 ========== Youtube動画表示 ========== ボタン1 ボタン2 ボタン3 という感じで配列しています。 ボタン1~3は、それぞれ同じ画像で表示しています。 btn.png:OFF時 btn_on.png:ON時 Javascriptは下記のように書いています。 ================ function change(obj){ var orgimg="img/btn.png"; var newimg="img/btn_on.png"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } }; ================ ボタン部分はそれぞれ下記のようにしています。 ================ <a href="http://www.youtube.com/watch?v=1111111" onclick="return Obj.replaceObject(this.href);"><img src="img/btn_on.png" width="16" height="15" border="0" alt="movie 1" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=2222222" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 2" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=3333333" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 3" onClick="change(this)"></a> ================ これでちゃんとクリックしたボタンのみがON時の画像になり、それ以外はOFF時の画像に戻るのですが 同ページ上に表示している全く関係ない画像(例えばタイトル画像やバナー等)が 何故かOFF時の画像が拡大された状態のもの(タイトルやバナーで指定してあるサイズ)に切り替わってしまいます。 CSSで背景に指定してある画像やボタン設定してある画像は大丈夫なのですが 普通にHTML上に指定してあるJPGやPNG画像が変わってしまいます。。。 どこかおかしな部分があると思うのですがわからず途方にくれております。 何方か教えて下さい。どうぞ宜しくお願いします。

  • 画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化

    画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化が現れるようにしたいのですが方法がわかりません。どなた様かご指導のほどよろしくお願いいたします。 今回画像を以下に掲載させて頂きました。よろしければ見てみてください。 http://desktop10.web.fc2.com/11.gif 上記を見て頂くと、HOMEの下に赤い線が入っています。マウスポインタを合わせたときに上記のようにしたいと考えております。よってマウスポインタをあわせないときは、赤い線が表示されないようにしたいと考えております。このような場合はどのような記述が必要なのでしょうか? 私はhtmlには以下のような記述をしました。 <a href="http://index.html"><img src="img/test.gif" alt="ボタン" width="115" height="48" /></a> どなた様か、ご指導のほどよろしくお願いします。

    • ベストアンサー
    • HTML