オンマウスで画像が差し変わるタグ教えてください！
- オンマウスまたはクリックで画像が差し変わるタグをDreamweaverで設定したい。
- 画像の差し変わりは、マウスオーバーで画像2が表示される仕組み。
- JavaScriptやスタイルシートは使用できないため、Dreamweaverでタグ埋め込みで設定したい。
- ベストアンサー
オンマウスで画像が差し変わるタグ教えてください！
Web制作初心者です。 Dreamweaverを使用しています。 オンマウス又はクリックで、下記のようなイメージで画像が差し変わるように 設定したいと思っています。 画像1 画像2 メイン画像（画像1表示デフォルト） 画像3 ↓画像2をクリックまたはオンマウスで 画像1 画像2 メイン画像（画像2が表示） 画像3 イメージとしては、下記サイトの各作品ページ内のような設定です。 http://book.nihonvogue.co.jp/magazine/keitodama_web/148/works.html わかりますでしょうか？ ジャバスクリプトとかスタイルシートとか、使えないため、 Dreamweaverでタグ埋め込みなどで設定したいと思っています。 でもそれができるのかどうかも不明です。 マウスオーバーの方法はわかるのですが、これとは少し違うの思い やり方が全くわからず、質問させていただきました。 どうぞよろしくお願いいたします。
- lamo
- お礼率51% (84/164)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
タグという意味合いが微妙ですが、クリックで画像を変えたいなら、 javascriptを使って <img src="画像1" onclick="this.src='画像2';" alt="メイン画像だよ"> ですが、もう一回クリックしても戻りませんよ。 オンマウスなら、 <img src="画像1" onmouseover="this.src='画像2';" onmouseout="this.src='画像1';" alt="メイン画像だよ"> それからご提示サイトは、「Lightview」というスライドショ－用のjavascriptライブラリ ですね。（prototype.jsベースです）
その他の回答 (2)
- metametamu
- ベストアンサー率51% (153/295)
dreamwaverはよくわかりませんが、ここのスクリプトはいいんじゃないでしょうか。 http://www.twospy.com/galleriffic/index.html jqueryも読み込まないといけませんが、そんなに難しくないはずです。
- yambejp
- ベストアンサー率51% (3827/7415)
＞ジャバスクリプトとかスタイルシートとか、使えないため、 使えないのは「使ってはいけない」のか「使うスキルがない」のかによります。 前者なら、方法はありません。HTMLは静的な技術ですからインタラクティブな 処理はできません。 後者で、場合によってはつかっていいならいくらでもやりようがあります。 まずはご確認ください
関連するQ&A
- オンマウスでクリック後の画像を変化させたままにする方法
たびたびお世話になります。 以前にも同じような質問をしたのですが・・ 状況が変わり、それとHP作成を進めて行くうちに色々解って来た事もあるので、もう一度質問させて下さい。 フレームで、上／左／右に区切っています。 上と左のフレームにメニューがあり、右のフレームにメインコンテンツがあります。 上のメニューも左のメニューもtarget属性のリンクで右フレームに 表示させるようにしたいと思っています。 まだページを作っているところなのでリンクは飛ばしてないですが。 メニューは文字ではなく、上も左も画像を作ってボタンにしました。 JAVAではなく、HTMLで、オンマウスにより画像を変化させるようにもしてあります。 それを、リンクを張り、クリックした後もオンマウスで変化したままの画像にしたいのです。リンク先を表示している間だけ、です。 タグはこうなっています。 <img alt="" src="image/MENU1.jpg" onmouseover="this.src='image/MENU1_1.jpg'" onmouseout="this.src='image/MENU1.jpg'" style="width: 119px; height: 33px;"> やり方はありますでしょうか？ それと、上のフレームからメニューをクリックした後、 左のフレームの中身も変化させる、というのはJAVAですか？ また、やり方はあるのでしょうか。 こんな風にやりたいのですが↓ http://www.dreampower-jp.com/index.html
- 締切済み
- HTML
- fc2 オンマウスで画像を見せる方法は？
オンマウスで2枚の画像を表示させたいのですがうまくいかないのでご教授願います。 因みに今やっていてうまくいっていない手順ですが、 オンマウスさせたい写真をファイル管理画面で2枚アップし、 どちらか1枚の写真の『この画像で記事を書く』をクリックして新しく記事を書く欄を出し、そこに <imgsrc="●"onmouseover="this.src='◇';"onmouseout="this.src='●';"> （●と◇は載せたい画像） と貼っているのですが、選んだ1枚の写真しか表示されません（当たり前といえば当たり前なのですが）。 試しに『この画像で記事を書く』を選ばず、ただの記事にそのタグ？を書くだけというのも試してみたのですが、 fireFoxではプレビューが全く出ず、IEはファイルに×がついたような感じで表示されていました。 画像は作ったのですが、オンマウスをどういうプロセスをふんで、どういう指定をかけばいいのかを教えていただけると助かります。 よろしくお願いします。
- ベストアンサー
- ブログ
- リンク画像をオンマウスで変えたい
今、ホームページを作成しています。 それで、以下のようなことをしたいのですが、可能でしょうか？ １ 最初の画面に、ＥＮＴＥＲの画像を表示する ２ 『１』の画像をオンマウスすると、画像が変わる ３ 『２』の画像からマウスを放すと、画像が『１』に戻る ４ 『２』の画像をクリックすると、別のページに飛ぶ なんだか説明下手ですいません・・・ 一応自分で調べてみたのですが、それらしい物が見つからず、失敗してばかりなので、質問させていただきました。よろしくお願いします！
- ベストアンサー
- その他（インターネット・Webサービス）
- オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。
オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。 右側にメニューボタン（１～４）があり 各ボタンにオンマウスすると左側に画像を表示、 クリックすると別ページにリンクさせたいのです。 フレームは使っていません。 初心者なので具体的なタグを教えていただくと助かります。
- ベストアンサー
- ホームページ作成ソフト
- オンマウスで画像を別の場所に表示する
過去ログで似たようなのがあったのですが、 全然わからなかったので、質問しました。 文字オンマウスで、画像を別の場所に表示したいのですが・・ (java～を使わなくてもよいやり方が知りたいです。 java～は使ったことがない初心者ですので。) ちなみに、画像オンマウスで文字を別の場所に表示するのは、 ↓このやり方(html)でできたんですが・・・ <span ID="msg">ここに表示される</span> <a href="ページＵＲＬ"onMouseOver="msg.innerHTML='表示される文字'"onMouseOut="msg.innerHTML=''"><img src="画像ＵＲＬ" border="0"></a>
- ベストアンサー
- HTML
- 初心者です。画像の奇麗に切り替わるサイトが作りたいです。
初心者です。画像の奇麗に切り替わるサイトが作りたいです。 dreamweaverで自力でサイトを作っています。 オンマウスでpng画像が切り替わらるのはできたのですが、 メイン画像などが自動に切り替わるようにするにはどうしたらよいかわかりません。 メイン画像は、今のところ、背景画像の上に重なっており、角丸で、PNG形式です、 フラッシュも、javaもまるで初心者の私にはまだ無理でしょうか？ また、長方形で美しくフェードアウトしながら切り替わるJPEGは、 どのようにしたらよいでしょうか？ 参考サイト、書籍などあれば教えていただきたいです。
- ベストアンサー
- JavaScript
- オンマウスで画像表示＋表示した画像にリンク
オンマウスで画像表示＋表示した画像にリンク はじめまして。 今サイトを作っています。 ↓このサイトの中央部分に大きな画像とその上に タブが並んでいるのがお分かりになりますでしょうか？（参考サイト） http://www.rakuten.ne.jp/gold/han-world/ タブにふれると大きな画像が変わり、なおかつ大きな画像にもリンクが貼られるというものです。 こういうものとジャバスクリプトで同じ風にしたいです。 （参考サイトはフラッシュで作成されています） タブに触れると大きな画像が変わり、タブにリンクを貼ることはできたのですが 大きな画像にリンクさせるほうほうがよくわかりませんでした。 どこかのタグ素材サイトさんのソースをいじってなんとか触れるようなジャバの超初心者です。 どうぞお力をお貸しください 宜しくお願いいたします！
- ベストアンサー
- JavaScript
- オンマウス効果の動画制作
下記参考URLの上部メニューバーのようなオンマウス効果の動画を制作したいと思っております。 １．このような動画の制作方法をご教授いただけないでしょうか。 ２．動画制作に適したソフトも併せてご紹介いただけないでしょうか。 私は、動画関連については一切無知です。 ただし、CSSと静的画像を用いたオンマウス効果メニューバーを制作したことはあります。 宜しくお願いいたします。 参考URL＞＞http://www.synergy-marketing.co.jp/
- 締切済み
- Flash
- それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- 画像をオンマウスで変えるスクリプトについて教えてください。
お世話になります。 以下のJavaScriptを外部のjsファイルにしたいです。 「その１」にオンマウスすると、default.gifがaaa.gifに、 「その２」にオンマウスすると、default.gifがbbb.gifに 表示が変わります。 HTMLを極力綺麗にしたいのですが、外部にすることは可能でしょうか？ これとまったく同じ動作ができるスクリプトでも構いません。 ご存知の方がいらっしゃったら、教えていただきたいです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>ロールオーバー</title> <SCRIPT language="JavaScript"> <!-- image = new Array(); image[0] = new Image(); image[0].src = "default.gif"; image[1] = new Image(); image[1].src = "aaa.gif"; image[2] = new Image(); image[2].src = "bbb.gif"; function Img_2(n){ if(document.images){ document.first.src=image[n-1].src; } } --> </SCRIPT> </head> <body> <img src="default.gif" name="first" /> <ul> <li><a href="#" onMouseOver="JavaScript:Img_2(2);document.myFORM.myMSG.value=''" onMouseOut="JavaScript:Img_2(2);document.myFORM.myMSG.value=''">その1</a></li> <li><a href="#" onMouseOver="JavaScript:Img_2(3);document.myFORM.myMSG.value=''" onMouseOut="JavaScript:Img_2(3);document.myFORM.myMSG.value=''">その2</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
