1

Javascriptを使用して、オンホバーで画像を変更しようとしています。サムネイル画像があり、ユーザーが上にカーソルを合わせると、カーソルを合わせたサムネイルに応じて全体像が変化します。

これは私が使用したHTMLです。

<img onmouseover="showT(0)" src="pictures/278 Edit 10-8-11 2312.jpg" 
                    height="75" width="75" >
            <a href="#" onmouseover="showT(0)">pic 1</a>
            <a href="#" onmouseover="showT(1)">pic 2</a>
            <a href="#" onmouseover="showT(2)">pic 3</a>

これは、ヘッダーに配置されたJavaスクリプトです。

    <!-- onhover mouse for thumbNail -->
<script language="JavaScript" type="text/JavaScript"> 
function showT(q){ 
document.getElementById('ima').setAttribute('src','0'+q+'.jpg') 
} 
</script>
4

2 に答える 2

3

これは機能します。画像のIDに「ima」を追加し、画像タグを閉じる必要がありました。また、インデックスではなく画像の場所を渡すので、それを変更するのは簡単です。

これがお役に立てば幸いです、乾杯。

<img id="ima" src="http://www.google.com/images/srpr/logo3w.png" height="75" width="75"/>

<a href="#" onmouseover="showT( 'http://www.google.com/logos/2012/cossington_smith-12-hp.jpg' )">pic 1</a>
<a href="#" onmouseover="showT( 'http://www.google.com/logos/2012/earthday12-hp.jpg' )">pic 2</a>
<a href="#" onmouseover="showT( 'http://www.google.com/logos/2012/Friedrich_Frobel-2012-hp.jpg' )">pic 3</a>

<script type="text/javascript">
    function showT( image )
    {
         document.getElementById( 'ima' ).setAttribute('src',image ) 
    }
</script>
​
于 2012-04-23T13:17:44.630 に答える
0

jQueryを使用してこれを行う方法は次のとおりです。

HTML：

<img src="my-initial-picture.jpg" alt="Any alternative text" id="bigpic" />
<!-- store the id of the picture that should be displayed in a data-* attribute -->
<a href="#" class="thumbnail" data-index="0">pic 1</a>
<a href="#" class="thumbnail" data-index="1">pic 2</a>
<a href="#" class="thumbnail" data-index="2">pic 3</a>

JS（in <head></head>）：

<script>
/* when mouse is over any HTML element that has a "thumbnail" class */
$(".thumbnail").mouseover(function() {
    /* change the "src" attribute of the element whose id is "bigpic" */
    /* the .data() method will get the picture id stored in the data-* attribute */
    $("#bigpic").attr("src", "0" + $(this).data("index") + ".jpg");
});
</script>

Googleのリポジトリを使用してjQueryを追加できます（in <head></head>）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-04-23T13:12:43.503 に答える