0

リンク付きのボタン画像で2つの（プレビュー）div要素を変更しようとしています。mouseover

プレビューdivの1つに、特定のサイトにリンクしたい画像が表示されます

button-imageには、mouseoverCSSの関数クラスもあります。

この関数を使用する複数の画像があり、それぞれが独自のdivとクラスで区切られていることを付け加えるかもしれません。これは、使用済みリストを使用する場合のように意味的に正しくないと思います（ただし、後で心配します）。

また、私はスクリプトを初めて使用しますが、学びたいと思っています。

オンmouseoutまたはclick重要ではない場合、現在の（プレビュー）コンテンツは前回のままである可​​能性がありますmouseover。

現在、プレビューdivコンテンツの変更は、次の厄介なコードで説明されているように、アンカーにdocument.getElementByIdを追加し、各ボタンにimgを個別に追加することで機能しますが、javascriptやjqueryを使用し、varsとプレビュー画像をクリック可能にしてプレビューサイトにリンクする [編集：]このコードは、プレビュー画像をリンクにするために機能します[/編集]

外部ファイルから各プレビュー画像とテキストをロードできれば本当に素晴らしいです

<div class="btn">

 <a href="http://www.previewed_site.com" target="_blank"
 onmouseover="document.getElementById('preview_text_content')
 .innerHTML = 'a short preview description here';">

  <img onmouseover="document.getElementById('preview_img_content')
  .innerHTML = '<a href=\'http://www.previewed_site.com\'>
  <img src=\'preview.jpg\' /></a>';" src="btn.png" width="100px"
  height="40px" alt="mysite.com" /> 

 </a>
</div>

btnマウスオーバーのCSS（これは私が望むように機能しますが、参照用にここに追加されています）：

.btn {
    position relative;
    overflow: hidden;
    z-index: 1;
    top: 5px;
    width: 100px;
    height:40px;
}
.btn a { 
    display:block; 
    width:100px; 
    height:40px; 
    z-index: 100;
}
.btn a:hover { 
    background: url(btn_hover.png);
}

アドバイスの言葉やサンプルコードへのリンクをいただければ幸いです。

4

1 に答える 1

0

ここに行きます..jqueryを使用して...

HTML

<div class="btn">
   <a href="http://www.previewed_site.com" target="_blank" >
     <img src="btn.png" width="100px" height="40px" alt="mysite.com" /> 
   </a>
</div>

jqueryを使用すると、選択した要素でマウスオーバー関数を使用できます。セレクターのjqueryドキュメントはこちらです

JQUERY

$(document).ready(function(){   //recommened you to use script inside document.ready always
$(".btn  a").mouseover(function(){  //selecting element with "<a>" tag inside an element of class "btn"
     $('#preview_text_content') .html('a short preview description here'); //getting an element with an id "preview_text_content" and repalcing its html with jquery html() ;
})

$(".btn  img").mouseover(function(){
  $('#preview_img_content').html('<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>'); //similar as above

});
});

更新しました

画像nテキストの動的読み込み...データ属性を使用

HTML

//first image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here">
   <img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview.jpg"/>
</a>
//second image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here 2">
   <img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview2.jpg"/>
</a>

JQUERY

$(document).ready(function(){   
  $(".btn  a").mouseover(function(){  
   $('#preview_text_content') .html($(this).data('text_content')); 
 })

$(".btn  img").mouseover(function(){ 
   var imgContent='<a href=\'http://www.previewed_site.com\'><img src=\''+$(this).data('img_content') +'\' /></a>';
   $('#preview_img_content').html(imgContent); 

 });
});

また

いつでも関数を使用してコードをクリアし、理解しやすくすることができます。

HTML

<div class="btn">

 <a href="http://www.previewed_site.com" target="_blank" onmouseover="linkMouseoverFunction()">

  <img onmouseover="imgMouseoverFunction()" src="btn.png" width="100px" height="40px" alt="mysite.com" />

JAVASCRIPT

 function linkMouseoverFunction()
 {
    document.getElementById('preview_text_content').innerHTML = 'a short preview description here';
 }

function imgMouseoverFunction()
{
   document.getElementById('preview_img_content').innerHTML = '<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>';
}
于 2012-12-31T07:30:39.127 に答える