重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

おしえて

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

解決済

  • 質問者：ヒビノ
  • 質問日時：
  • 回答数：4件

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

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

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

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

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

（あるいはjsを使って
http://blog.net-king.com/2010/10/06/%e3%83%a1%e3 …
や
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;
}

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： yambejp
  • 回答日時：

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



<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画像を表示します
    • good
    • 0
    • 件
通報する
この回答へのお礼

yambejpさん

とても丁寧なご回答
ありがとうございました。

通報する
お礼日時：2016/10/11 19:55

No.3

  • 回答者： ORUKA1951
  • 回答日時：

今は基本的にはjavascript(JQuery)は使わない方向になっています。


・javascriptを停止している、あるいは利用できないユーザに意味ない
・他のデザインに変更するのが困難
・ユーザーエージェントごとにデザインを変えることが不可能(極めて困難)

単純に
<ul>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
</ul>
とマークアップして・・CSSでデザインする。
★d="container" こんな文書構造にかかわらないバカなことは書かない。
＞しかし、思うようにhtml,cssが組めず悩んでおります。
　HTML(略字ですから大文字)は文書構造しか書かないので、簡単なのでは？
<body>
　<header>
　　<h1>・・<h1>
　　<nav>
　　　<ul>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ul>
　　</nav>
どこがむつかしいかわからないです。
　なお、HTML4では文書構造を示す要素がなかったので、
<body>
　<div class="header">
　　<h1>・・<h1>
　　<div class="nav">
　　　<ul>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ul>
　　</div>
とマークアップしてきました。
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　もう20年も前に出された勧告ですから

　CSSはその文書構造に基づいてセレクタを使って要素を指定して、プレゼンテーションを指定するだけ。
★ media="all"
　はありえない。あくまでscreenのみですよ。点字端末やスクリーンリーダー、あるいは印刷には適用されてはまずい!!

とりあえず基本形を作ってみる。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATAでHTMLの文法チェックをしておく

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">
<!--
/* header の子孫の nav 要素 */
header nav{width:600px;height:320px;margin:0 auto;}
/* その子孫の ul要素 */
header nav ul{margin:0;padding:0;position:relative;border:1px gray solid;}
/* さらにその子孫の li要素 */
header nav ul li{
＿list-style:none;
＿width:200px;height:80px;
＿margin:0;padding:0;
＿line-height:80px;
＿border:1px gray solid;
＿position:relative;/* 以下の位置やサイズの基本にするため */
}
header nav ul li a{
＿display:block;
＿width:100%;height:100%;
＿text-decoration:none;
}

-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="/">トップ</a></li>
＿＿＿＿<li><a href="/products">製品</a></li>
＿＿＿＿<li><a href="/profile">会社案内</a></li>
＿＿＿＿<li><a href="/contactUs">問い合わせ</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する

参考程度に

No.2

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

こんにちは



ごく単純なサンプルです。（jQuery利用）
※ HTMLの構成はご提示の構成を利用しています
※ UL（サムネイル）内の画像に対して有効です。数は増減してもかまいません
※ サムネイル要素のdata-src属性に拡大表示する画像のURLを設定します
※ 切り替えの速度は変数speed（単位：ミリ秒）で調整可能です
※ CSSは最低限にしてありますので、サムネイルのレイアウト等はご自由に

（スクリプトのインデントは全角空白に変えてありますので、半角にしてください）
<!DOCTYPE HTML PUBLIC>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#container ul img { width:316px; height:45px; }
#container p.main { position:relative; }
#container p.main img { position:absolute; top:0; left:0; width:950px; }
</style>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …

<script type="text/javascript">
$(function(){
　var speed = 600; /* 切替え速度（msec) */
　var box = $("#container p.main"), imgs;
　var thumbs = $("#container ul img"), img0 = $("img", box);

　thumbs.each(function(){
　　img0.clone().prop("src", $(this).data("src")).appendTo(box);
　});
　img0.appendTo(box);
　imgs = $("img", box);

　thumbs.on("mouseover mouseout", function(e){
　　var index = imgs.length-1;
　　if(e.type == "mouseover") index = thumbs.index(this);
　　imgs.stop().each(function(i){
　　　if(i == index) $(this).animate({ opacity: 1 }, speed);
　　　else $(this).animate({ opacity: 0 }, speed);
　　});
　});
});
</script>
</head>
<body>

<div id="container">
<ul>
<li><img src="img/photo01.jpg" alt="01" data-src="img/photo04.jpg"></li>
<li><img src="img/photo02.jpg" alt="02" data-src="img/photo05.jpg"></li>
<li><img src="img/photo03.jpg" alt="03" data-src="img/photo06.jpg"></li>
</ul>

<p class="main">
<img src="img/photo01.jpg" alt="">
</p>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん

とても丁寧なご回答
ありがとうございました。

通報する
お礼日時：2016/10/11 19:53

No.1

  • 回答者： yambejp
  • 回答日時：

クロスフェードしたいということでしょうか？


jQueryなど利用してよいのでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

yambejpさん、回答ありがとうございます。

クロスフェードしたいということです。
jQueryを使用してもOKです。

よろしくお願い致します。

通報する
お礼日時：2016/10/11 14:34

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報