ママのスキンケアのお悩みにおすすめアイテム

はじめまして。

サムネイル画像をマウスオーバーすると、特定の場所に画像が表示される方法を教えて頂きたいです。
以下がイメージに近いです。が、サムネイル画像は自分で別に用意したいです。
http://mizuame.sakura.ne.jp/jquery.tgImageChange …

これを実現させる為には、どのjqueryを利用すれば良いのでしょうか?
色々とググってみたのですが、ぴったりと希望のものが見つからなく…。
あまり知識も無いので、丁寧に説明されているものですと助かります…(すみません。)

わかりやすい説明画像も添付しました。
ぜひ教えて頂きたいです。緊急で困っています。よろしくお願い致します!

「サムネイルをマウスオーバーすると画像を表」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ご自身で挙げているサイトのjQueryでいいと思いますが、


何故それを使わないのでしょう…?
http://wataame.sumomo.ne.jp/archives/1841

そのサイトで紹介しているのも、
サムネイルは拡大画像の縮小版ではなく、別の画像ですよ。
    • good
    • 0

普通にCSSでよいのでは??HTMLさえちゃんと書いてあったらどのようにでも・・


<div id="album">
 <ul>
  <li><img src="./images/thumbnail/1.jpg" width="80" height="60" alt="なんたら">
    <p><img src="./images/photo/1.jpg" width="480" height="360" alt=""></p>
  </li>
  <li><img src="./images/thumbnail/2.jpg" width="80" height="60" alt="なんたら">
    <p><img src="./images/photo/2.jpg" width="480" height="360" alt=""></p>
  </li>
  <li><img src="./images/thumbnail/3.jpg" width="80" height="60" alt="なんたら">
    <p><img src="./images/photo/3.jpg" width="480" height="360" alt=""></p>
  </li>
・・だったら、下記サンプルのように・・

参考)
 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
 でブラウザの表示メニュー(Chromeを除く)でスタイルシート⇒{画像下}を選択した形かと思います。

全体
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
 のDATA入力でチェック済みのWeb標準です。HTML4.01strict+CSS2.1
★画像は./photoと./tumbnail/にそれぞれ保存する。
★印刷時は全部印刷されるようにしてます。
★タブは_に置換してあるので戻す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css" media="screen">
<!--
#album{/* アルバムの表示位置 */
width:480px;height:420px;
margin:0 auto;
position:relative;
}
#album ul,#album ul li{
list-style:none;
margin:0;padding:0;
}
#album ul{/* リストの表示位置 */
height:60px;
position:absolute;bottom:0;left:0;
}
#album ul li{/* リスト項目を並べて */
display:block;
float:left;
width:80px;
}
#album ul li p{
position:absolute;/* 画像の表意位置 */
top:-380px;left:0;
display:none;/* 普段は隠す */
}
#album ul li:hover p{/* liに載ると見せる */
display:block;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<div id="album">
___<ul>
____<li><img src="./images/thumbnail/01.jpg" width="80" height="60" alt="なんたら">
______<p><img src="./images/photo/01.jpg" width="480" height="360" alt=""></p>
____</li>
____<li><img src="./images/thumbnail/04.jpg" width="80" height="60" alt="なんたら">
______<p><img src="./images/photo/04.jpg" width="480" height="360" alt=""></p>
____</li>
____<li><img src="./images/thumbnail/05.jpg" width="80" height="60" alt="なんたら">
______<p><img src="./images/photo/05.jpg" width="480" height="360" alt=""></p>
____</li>
____<li><img src="./images/thumbnail/01.jpg" width="80" height="60" alt="なんたら">
______<p><img src="./images/photo/01.jpg" width="480" height="360" alt=""></p>
____</li>
___</ul>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2012-08-10 12:00:00 (JST)</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qサムネイル画像をマウスオーバーすると写真が切り替わる方法

htmlでホームページを作っているのですが、大きな写真の横に小さなサムネイル画像(前面、背面など角度の違う写真)を載せて、サムネイルをマウスオーバーすると同一のページで大きな写真が切り替わる仕組みを作りたいのですが、やり方がわかりません。
比較的簡単な方法での作り方を教えてください。宜しくお願いします。

Aベストアンサー

大きな写真に名前を付けておいて,小さな写真のonMouseOverハンドラで,その名前のソースに,その小さな写真に対応する大きな写真のURLを代入するようにするのはどうでしょう。簡単です。
<center>
<img src="large/1.jpg" name="img">
<hr>
<img src="small/1.jpg" onMouseOver="document.img.src='large/1.jpg'">
<img src="small/2.jpg" onMouseOver="document.img.src='large/2.jpg'">
</center>

Q[JS or CSS]マウスオーバーで画像切り替え

初めまして。

ホームページを作成中なのですが、
メインビジュアル部分の画像表示で悩んでおります。

求めている動作としては以下の通りです。
・グローバルナビにマウスオーバーすると、
 すぐ下のボックス(どこでも)に画像が表示される。
・マウスが離れると画像が消える。
・画像の表示(切り替え)はフェードで行う。


簡単なソースを書くとこんな感じです。
<ul class="global_navi">/* グローバルナビ */
 <li><a href="a.html"><img src="hoge01.png" /></a></li>
 <li><a href="b.html"><img src="hoge02.png" /></a></li>
 <li><a href="c.html"><img src="hoge03.png" /></a></li>
</ul>
<div class="main_graphic">
 /* ここに画像がフェードイン&フェードアウトする */
</div>


近い動作をするjsを見つけたのですが、下記2点のjsを足して2で割った様なイメージです。
■画像のマウスオーバーで、離れた位置に拡大画像を表示する
http://css-eblog.com/csstechnique/css-remote-rollover.html
■メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」
http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/

動作イメージでは前者ですが、フェードができません。
ビジュアルイメージでは後者ですが、マウスを離しても画像が消えません。


近い動作をするjs、もしくはcssテクニックをご存知であればご教授頂けないでしょうか。
お手数ですが、よろしくお願い申し上げます。

初めまして。

ホームページを作成中なのですが、
メインビジュアル部分の画像表示で悩んでおります。

求めている動作としては以下の通りです。
・グローバルナビにマウスオーバーすると、
 すぐ下のボックス(どこでも)に画像が表示される。
・マウスが離れると画像が消える。
・画像の表示(切り替え)はフェードで行う。


簡単なソースを書くとこんな感じです。
<ul class="global_navi">/* グローバルナビ */
 <li><a href="a.html"><img src="hoge01.png" /></a></li>
 <li><a href="b.html"><img src=...続きを読む

Aベストアンサー

CSSでの対策はNo.1さんがお答え済みだったので、JSの場合。

http://tenderfeel.xsrv.jp/javascript/271/
こちらの下のほうにある
複数設置+クロスフェード版
jQuery版
MooTools版
はフェード効果ありですね。

ライブラリの好みもあるでしょうから、お好きなものをどうぞ。

ところで、質問のサンプルコードでPNGを使っておいでですが、IEのバージョンによってはPNGにフェード効果をかけると黒っぽいジャギーが出る場合があります。
できればPNG以外の形式にしたほうがおすすめですよ。

Qオンマウスで、画像切り替え+別箇所の画像も同時に切り替えられのでしょうか?

お世話になっております。
もしJavascriptのカテゴリーと違うものでしたらすみません。

オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、
オンマウス時にそのような画像切り替えをすると同時に
別部分にある画像エリアの画像、(もしくはHTML)も切り替える事は可能なのでしょうか。
別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。

何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。

Aベストアンサー

やり方はいろいろ考えられます。
手っ取り早いのはidを振ってsrcを変えてしまうことでしょう。
その他グルーピングしたり、スタイルシートを併用したり
いろいろありそうですが、まぁフロー的にはそんなに変わりません

<img src="1.jpg" onmouseover="this.src='3.jpg';document.getElementById('another').src='4.jpg'" onmouseout="this.src='1.jpg';document.getElementById('another').src='2.jpg'" ><img src="2.jpg" id="another">

QCSSだけでサムネイルから拡大画像チェンジ

1ヶ所の指定場所に拡大画像が表示された状態で、下段にいくつかのサムネイルを設置し、マウスをそのサムネイルに乗せると拡大画像がチェンジして、マウスを外すと元画像に戻るみたいな事をCSSだけで表現したいのですが可能でしょうか?感じとしては http://curucuru-select.com/?pid=7429014 のCSS版みたいなものをのぞんでいるのですが・・・多分このサイトはjavascriptでやってるみたいなんですけど・・できたら、サンプルソースをいただけるとありがたいのですが・・どうかよろしくお願いします。

Aベストアンサー

> 自分の質問で言う「拡大画像が表示された状態で」と言うのは、このサイトで言う#gallery {background:ってところですかね。ここに画像を指定すればマウスoff時や別の場所をクリックすることでここの画像に戻るんですかね?

そう思われたのであれば、まずは実際に試してみてはいかがでしょう?
背景色ではなく背景画像を指定する場合は、位置やリピートの指定も追加しなければなりませんが。

> このサイトはサムネイルが拡大画像の左側縦指定してあるのですけど、それを拡大画像の下横並びに指定するにはタグ上どうすればよいのでしょうか?
> 下横並びのサムネイルの行数を増やすにはどう指定すればよいのでしょうか?

このサイトのソースには、CSSのそれぞれのプロパティが「どの様な働きをしているか」が具体的にコメントされていますので、それらを読み解けば応用はできる筈です。サムネイルを横並びにする事自体はfloatを定義に組み込めば簡単にできますが、このサンプルではサムネイルと拡大画像は同じ一枚の画像を使用(拡大画像に見えているのが実寸、サムネイルは同じ画像をCSS上で幅・高さを指定して縮小して見せている)している事もありますので、サムネイル(左)+拡大画像右→拡大画像(上)+サムネイル(下)というレイアウトに変更し、かつサムネイルの行数を増やす為には、関連する幅・高さ・位置関係等の定義を全て辻褄に合う様に変更しなければなりません。
上記がヒントです。もし、これらを読んでもピンと来ない、わからない、という事であればレイアウト変更は現在の質問者様には手に余る作業という事になるかと思いますので、サンプルのレイアウト・パターンをそのまま使用される事をお奨めします。レイアウトのパターンを変更しなければ、現在の縦並びのサムネイル画像を増やて行くのはかなり簡単な作業だと思いますので。

ちなみに、Nine-nine様と同様、こちらのサンプルでも編集次第で質問者様の仰る様なレイアウトは実現可能です。

> 自分の質問で言う「拡大画像が表示された状態で」と言うのは、このサイトで言う#gallery {background:ってところですかね。ここに画像を指定すればマウスoff時や別の場所をクリックすることでここの画像に戻るんですかね?

そう思われたのであれば、まずは実際に試してみてはいかがでしょう?
背景色ではなく背景画像を指定する場合は、位置やリピートの指定も追加しなければなりませんが。

> このサイトはサムネイルが拡大画像の左側縦指定してあるのですけど、それを拡大画像の下横並びに指定するには...続きを読む

Qhtml,cssでサムネイルにマウスオーバーすると、離れた位置に拡大画像を表示する仕組みを作りたい。

初めまして、ホームページ制作勉強中の初心者です。

■サムネイルにマウスオーバーすると、離れた位置に拡大画像を表示する
■サムネイルからのマウスアウトで、最初の拡大画像に戻す。

http://bitd.webcrow.jp/rollover/DW/rollover.html
といった上記のようなトップイメージを作ったのですが
拡大画像はカチッと切り替わるのではなく、ふわっと切り替えたいです。
しかし、思うようにhtml,cssが組めず悩んでおります。

(切り替わりの感じとしては↓下記サイト↓のようなイメージです。)
http://blog.net-king.com/downloads/imagenavigation/

最下位が提案したhtml,cssですが、どこをどのように、触ればいいのか
ご教授いただければ幸いです。

(あるいはjsを使って
http://blog.net-king.com/2010/10/06/%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%99%e3%82%8b%e3%81%a8%e3%83%a1%e3%82%a4%e3%83%b3%e7%94%bb%e5%83%8f%e3%81%8c%e5%88%87/

http://tenderfeel.xsrv.jp/javascript/271/
の下のほうにある「複数設置+クロスフェード」
を改変して同じようなものを作る。でもOKです。)

どうか、よろしくお願い致します。


■html

<head>
<title>サムネイルにマウスオーバーしたら画像を切り替える</title>
<link rel="stylesheet" href="css/rollover.css" type="text/css" media="all" />
</head>
<body>
<div id="container">
<ul>
<li><img src="images/B2.jpg" width="316" height="45" alt="01"
onMouseOver="document.mainImg.src='images/B1.jpg'"
onMouseOut="document.mainImg.src='images/A1.jpg'"></li>

<li><img src="images/C2.jpg" width="316" height="45" alt="02"
onMouseOver="document.mainImg.src='images/C1.jpg'"
onMouseOut="document.mainImg.src='images/A1.jpg'"></li>

<li><img src="images/D2.jpg" width="316" height="45" alt="03"
onMouseOver="document.mainImg.src='images/D1.jpg'"
onMouseOut="document.mainImg.src='images/A1.jpg'"></li>

</ul>

<p class="main"><img src="images/A1.jpg" width="950" height="auto" alt="01" name="mainImg"></p>
</div>
</body>
</html>




■css

@charset "UTF-8";
/* CSS Document */

body, div, ul, li, img, a {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
#container {
width: 950px;
margin: 0 auto;
}
p.main {
width: 950px;
height: auto;
padding: 0;
}
ul {
width: 950px;
margin: 0;
}
ul li {
float: left;
width: 316px;
height: 45px;
margin-left: 0;
}
img {
cursor: pointer;
border: none;
vertical-align: bottom;
}

初めまして、ホームページ制作勉強中の初心者です。

■サムネイルにマウスオーバーすると、離れた位置に拡大画像を表示する
■サムネイルからのマウスアウトで、最初の拡大画像に戻す。

http://bitd.webcrow.jp/rollover/DW/rollover.html
といった上記のようなトップイメージを作ったのですが
拡大画像はカチッと切り替わるのではなく、ふわっと切り替えたいです。
しかし、思うようにhtml,cssが組めず悩んでおります。

(切り替わりの感じとしては↓下記サイト↓のようなイメージです。)
http://blog...続きを読む

Aベストアンサー

一応確認した手前、サンプルだけあげておきます

<style>
#mainImg img{position:absolute;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
var org_src="1.jpg";
var list=['2.jpg','3.jpg','4.jpg'];
var speed=1000;
$('ul.menu li').on('mouseover mouseout',function(e){
var num=$('ul.menu li').index(this);
var img_src=(e.type=="mouseover")?list[num]:org_src;

$('#mainImg img').first().css('z-index',1);
$.when(
$('<img src="'+img_src+'">').insertBefore($('#mainImg img').first()).css('z-index',2).hide().fadeIn(speed)
).done(function(){
$('#mainImg img').each(function(){
if($('#mainImg img').index(this)!=0) $(this).remove()
})
});
});
});
</script>
<ul class="menu">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p id="mainImg">
<img src="1.jpg">
</p>

※liに対応するlistを設定しておきます
考え方はリストのmouseoverしたときに所定のimgの前に画像を差し込み深度を調整。
一度けして徐々に表示し、表示が終わった時点で元の画像を削除します
mouseoutの際にはorg画像を表示します

一応確認した手前、サンプルだけあげておきます

<style>
#mainImg img{position:absolute;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
var org_src="1.jpg";
var list=['2.jpg','3.jpg','4.jpg'];
var speed=1000;
$('ul.menu li').on('mouseover mouseout',function(e){
var num=$('ul.menu li').index(this);
var img_src=(e.type=="mouseover")?list[num]:org_src;

$('#mainImg img').first().css('z-index',1);
$.when(
$('<img src="'+img_src+'...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qサムネイルクリックで、画像をチェンジさせたい

初心者です。よろしくお願いします。

いくつか並んだ小さなサムネイル画像をクリックすることで、少し離れた大きめ画像をそれぞれのサムネイル画像の拡大に変えたいです。

下記のページの答えを参考にしてやってみました。http://oshiete1.goo.ne.jp/qa1192554.html

その時は上手にできました。

ただ、それが同一ページの中に画像違いで、下にあと2つ必要なのです。
原理は同じかと思い、上手にできたものをコピーペーストしてあとの2つを作りました。
しかし、あとで作った2つの画像群の中、サムネイルをクリックすると画像が切り替わって欲しい所ではなく、別のセクションのほうの画像が切り替わってしまいます。
どうすれば思った場所の画像を切り替えられますでしょうか?
もしくは、同一ページ内で3枚という複数にターゲット画像を分けることはムリなんでしょうか?

文章が解りづらくて申し訳ございません。

Aベストアンサー

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function change(imgname, fname){
document.images[imgname].src=fname;
}
//-->
</script>
</head>
<body>
<img name="IMAGE1" src="A1.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<hr>
<img name="IMAGE2" src="A2.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<hr>
<img name="IMAGE3" src="A3.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<hr>
</body>
</html>


まず、そのURLのサンプルは、変更する指定場所がCHANGEの一箇所である為、
function change(fname)
という関数から、場所も指定できるように
function change(imgname, fname)
というimgnameが設定できるように変更します。

それで、IMAGE1~IMAGE3の場所の画像を変更できるようになります。
場所が指定でき照るので、何箇所にも対応できます。

また、マウスが離れた時に戻る画像も参考URLでは、同じ場所で同じ画像を指定してたので、これも場所と、元に戻る画像を指定できるようにします。
ただそれだと上で作ったchangeと同じなのでrestore()はなくしちゃって、changeを使えばいいことがわかります。

それで、
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
上記のサムネイル画像の上にマウスが乗ったら、
change('IMAGE1', 'big1.jpg')を実行しろ
マウスが離れたらchange('IMAGE1', 'A1.jpg')を実行しろとなり
離れたイメージの画像が置き換わります。

おっと、質問者様の指定ではマウスが乗ったら出はなくてクリックでしたね。
その場合、onmouseoverではなく、onclick="change('IMAGE1', 'big1.jpg')"
とすることで、実行できます。

ついでなので、change関数の中身の説明をしますと

document.images[imgname].src=fname;

となっています。
これは、ドキュメント(ホームページ全体ですね)のイメージの[imgname]変数の中に入ってる名前の画像をfname変数の中に入っているURLに変えなさい。という命令です。

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function change(imgname, fname){
document.images[imgname].src=fname;
}
//-->
</script>
</head>
<body>
<img name="IMAGE1" src="A1.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE...続きを読む

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qnth-childが効かない…。原因はなんでしょうか?

特定の要素にCSSを設定したく思い、nth-childを使って定義したのですが、一向に反映されません。
この記述のどこが間違っているのでしょうか?ご指摘お願いいたします。

■HTML
<div id="hogehoge">
<ul>
<li><a href="リンク">文章…………</a><br /></li>
<li><a href="リンク">文章…………</a><br /></li>
<li><a href="リンク">文章…………</a><br /></li>
<li><a href="リンク">文章…………</a><br /></li>
<li><a href="リンク">文章…………</a><br /></li>


</ul>
</div>

■CSS
#hogehoge li:nth-child(3n) {
margin:10px!important;
color:#fff!important;
}

指定したとおり、ID hogehogeの中のリストの3の倍数に対してCSSで設定を行ってみるのですがビクともしないのです…。nth-childの使い方が間違っていますでしょうか?
リンク<a href>や<br />は訳あってこのように定義しています。

どなたかお分かりになる方いらっしゃいましたらアドバイス頂けますと幸いです。
よろしくお願い致します。
※確認はクロームとFFで現在行っています。

特定の要素にCSSを設定したく思い、nth-childを使って定義したのですが、一向に反映されません。
この記述のどこが間違っているのでしょうか?ご指摘お願いいたします。

■HTML
<div id="hogehoge">
<ul>
<li><a href="リンク">文章…………</a><br /></li>
<li><a href="リンク">文章…………</a><br /></li>
<li><a href="リンク">文章…………</a><br /></li>
<li><a href="リンク">文章…………</a><br /></li>
<li><a href="リンク">文章…………</a><br /></li>


</ul>
</div>

■CSS
#hogehoge li:nth-child...続きを読む

Aベストアンサー

>CSSで設定を行ってみるのですがビクともしない

>※確認はクロームとFFで現在行っています。

chromeでもfirefoxでも想定通り表示されますが?
要素を最低限にしぼってテストしてみてください


人気Q&Aランキング