マウスオーバーで文字スペースを表示させたい

質問

以下のサイトにあるような、画像の上に半透明のスペースがあり
プラスマークにマウスオーバーすると隠れている部分がスライドアニメーションで表示され
隠れている部分が出ている間は、プラスマークが消えるようなものを
作りたいのですが。。。

【イメージサイト】
http://mb.mercedes-benz.com/en/category/72/Mixed+Tape+Music

また参考サイトを元にいろいろ試行錯誤はしているのですが
プラスマークの表示非表示の部分がうまくいかず。。。

【参考サイト】
http://www.buildinternet.com/project/mosaic/

どなたかその方法をご教授いただけませんでしょうか。

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

回答No.1

Gletscher · ベストアンサー

スライドアニメーションで・・・とかは出し方の問題なので自分で工夫してもらうとして、マウスオーバーした時だけ別のウィンドウを出して文字を表示させたいなら次のやりかたでできますよ。
まず、別ファイルで「mouseroll.js」を用意してヘッダーでインクルードします。

【mouseroll.jp】の内容
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}

MM_reloadPage(true);

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
//function MM_findObj(n, d) { //v3.0
// var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
// d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
// if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
// for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->

ロールオーバーさせたいところで、以下の文を書きます。

<a href=リンク先URL>
<SPAN onMouseOver="MM_showHideLayers('prepare','','show')" onMouseOut="MM_showHideLayers('prepare','','hide')">＋</a></span>

補足

Gletscherさま

早速のご教授ありがとうございます！

で、ご回答いただいてからチャレンジしているのですが。。。
どうにもうまく行かずでして。。

こちらで設定したタグです。

<div class="img_hv-area clearfix"><ul>
<li><div class="mosaic-block"><div class="hv-tx"><a href="" class="mosaic-overlay" title=""><div class="hv-tx-details"><h2>リンクタイトル文字デフォルト表示</h2><p>文字スライド表示部分文字スライド表示部分文字スライド表示部分文字スライド表示部分</p></div></a><div class="mosaic-backdrop"><a href="" title=""><img src="は背景になる写真.jpg" width="250" height="250" /></a></div></div></div></li>
<li><div class="mosaic-block"><div class="hv-tx"><a href="" class="mosaic-overlay" title=""><div class="hv-tx-details"><h2>リンクタイトル文字デフォルト表示</h2><p>文字スライド表示部分文字スライド表示部分文字スライド表示部分文字スライド表示部分</p></div></a><div class="mosaic-backdrop"><a href="" title=""><img src="は背景になる写真2.jpg" width="250" height="250" /></a></div></div></div></li></ul>
</div>

【CSS】

.img_hv-area{
width: 510px;
margin:35px 0px 0px;
}
.img_hv-area ul{
margin: 0 -10px 0 0;
overflow: hidden;
zoom: 1;
}
.img_hv-area ul li{
float: left;
margin: 5px 10px 0px 0;
width: 250px;
display: inline;
padding:0px;
}
.hv-tx-details{
margin:15px 15px 18px;
}
.hv-tx-details h2{
line-height:135%;
color:#fff;
margin:0px 0px 0px;
}
.hv-tx-details p{
color:#fff;
margin:14px 0px 0px;
line-height:165%;
font-size:95%;
}
.mosaic-block {
position:relative;
overflow:hidden;
width:250px;
height:250px;
margin:0px;
}
.mosaic-backdrop {
display:none;
position:absolute;
top:0;
height:100%;
width:100%;
}
.mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:100%;
height:100%;
background:#111;
}
.hv-tx .mosaic-overlay {
bottom:-50px;
height:100px;
opacity:0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter:alpha(opacity=90);
}
.hv-tx .mosaic-overlay:hover {
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
padding-bottom:5px;
background:#111;
}
.mosaic-backdrop{
background:#111;
}
.mosaic-backdrop:hover {
background:#111;
}

【javascript】
(function(a){if(!a.omr){a.omr=new Object()}a.omr.mosaic=function(c,b){var d=this;d.$el=a(c);d.el=c;d.$el.data("omr.mosaic",d);d.init=function(){d.options=a.extend({},a.omr.mosaic.defaultOptions,b);d.load_box()};d.load_box=function(){if(d.options.preload){a(d.options.backdrop,d.el).hide();a(d.options.overlay,d.el).hide();a(window).load(function(){if(d.options.options.animation=="fade"&&a(d.options.overlay,d.el).css("opacity")==0){a(d.options.overlay,d.el).css("filter","alpha(opacity=0)")}a(d.options.overlay,d.el).fadeIn(200,function(){a(d.options.backdrop,d.el).fadeIn(200)});d.allow_hover()})}else{a(d.options.backdrop,d.el).show();a(d.options.overlay,d.el).show();d.allow_hover()}};d.allow_hover=function(){switch(d.options.animation){case"fade":a(d.el).hover(function(){a(d.options.overlay,d.el).stop().fadeTo(d.options.speed,d.options.opacity)},function(){a(d.options.overlay,d.el).stop().fadeTo(d.options.speed,0)});break;case"slide":startX=a(d.options.overlay,d.el).css(d.options.anchor_x)!="auto"?a(d.options.overlay,d.el).css(d.options.anchor_x):"0px";startY=a(d.options.overlay,d.el).css(d.options.anchor_y)!="auto"?a(d.options.overlay,d.el).css(d.options.anchor_y):"0px";var f={};f[d.options.anchor_x]=d.options.hover_x;f[d.options.anchor_y]=d.options.hover_y;var e={};e[d.options.anchor_x]=startX;e[d.options.anchor_y]=startY;a(d.el).hover(function(){a(d.options.overlay,d.el).stop().animate(f,d.options.speed)},function(){a(d.options.overlay,d.el).stop().animate(e,d.options.speed)});break}};d.init()};a.omr.mosaic.defaultOptions={animation:"fade",speed:250,opacity:1,preload:0,anchor_x:"left",anchor_y:"bottom",hover_x:"0px",hover_y:"0px",overlay:".mosaic-overlay",backdrop:".mosaic-backdrop"};a.fn.mosaic=function(b){return this.each(function(){(new a.omr.mosaic(this,b))})}})(jQuery);

$(document).ready(function($){
$('.hv-tx').mosaic({
animation : 'slide' //fade or slide
});
});

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

回答No.3

fujillin

回答ではありませんが…

まずは、マークアップを修正することからはじめましょう。リンクタグの中にブロック要素を入れるのは文法違反のはずです。
HTMLが変われば、CSSもスクリプトも変わってしまうでしょうから。

あと、スクリプトなどを提示するのは良いのですが、質問に関連ない部分は省いてコンパクトにしたり、読みやすい形で提示したほうが回答がつきやすいと思いますよ。
（失礼ながら、ご提示の例では読む気になりません。）

回答No.2

tracer

要望されていることは特段難しいことではありません。
ただ、javascript/html/cssを理解していることが前提です。
つまり、ご自身がどこまでjavascriptをご存知なのかが鍵ですが、仮にまったく書けないのであれば、教えようがありません。コピペでどうぞというものではないので。

補足

tracerさま
ありがとうございます！
仰るとおりです。。。。

JavaScriptはかけません。。。

困りました