3

私はこれの専門家ではないので、これが非常に基本的なものである場合はすみませんが、答えを見つけることができませんでした。

そのため、ページの左側にカテゴリのあるナビゲーションセクションが必要です。カテゴリごとにサイトが異なり、サイトごとに独自のイメージがあります。元。category1.htmにはdefaultpic1.jpgがあり、category2.htmにはdefaultpic2.jpgがあります...。

ナビゲーションセクションのcategory2へのリンクにカーソルを合わせると、現在のサイトのデフォルトの画像をcategory2のデフォルトの画像に変更してから、onmouseoutでデフォルトの画像に戻します。

また、私の画像はさまざまな寸法、さまざまな高さの値を持っていることに注意してください。

基本的に、すべてのページでdefaultpicソースを変更できることはわかっていますが、すべてのカテゴリの行を変更することなく、デフォルトのパスを探してそれを使用することを常に認識している同じスクリプトを使用したいと思います。

よくわからない場合は申し訳ありませんが、最善を尽くします。

私はこれを持っています（他のすべてを削除したので、助けが必要なものを貼り付けるだけです）：

<html>
<head>
<script type="text/javascript">
          function mouseOverImage2()
{
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}  function mouseOverImage3()
{
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage()
{
    document.getElementById("catPic").src='???'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
          <ul>
              <li><a href="subcategory2.htm" onmouseover="mouseOverImage2()"
    onmouseout="mouseOutImage()">Subcategory One</a></li>
              <li><a href="subcategory3.htm" onmouseover="mouseOverImage3()"
    onmouseout="mouseOutImage()">Subcategory 2</a></li></ul>
</div>
<div>
              <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
            </div>
</body>
</html>
4

4 に答える 4

2

古い画像のsrcを一時変数に保存するか、グローバルを使用して要素をどこかに保存する必要があります。

var originalImage;
function mouseOverImage2()
{
    originalImage = document.getElementById("catPic").src; 
    ...

そして、それをマウスで復元します。

document.getElementById("catPic").src=originalImage;

編集

他のプロパティ（高さ、幅）もほぼ同じ方法でキャッシュできます。注意すべきことの1つは、古い学校のhtmlheightとwidth属性をスタイルの高さと幅と混在させないことです。これは混乱を招きます。

ここでフィドルを更新しました

于 2012-11-22T12:18:04.813 に答える
2

data- *属性のすべての値を非表示にして、同じ関数を再利用できるようにします。例えば、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Cats</title>
        <script type="text/javascript">
function mouseOverImage(elm) {
    var img = document.getElementById("catPic");
    img.src = elm.getAttribute('data-cat-image');
    img.style.width = elm.getAttribute('data-cat-width');
    img.style.height = elm.getAttribute('data-cat-height');
}
function mouseOutImage() {
    var img = document.getElementById("catPic");
    img.src = img.getAttribute('data-default-image');
    img.style.width = img.getAttribute('data-default-width');
    img.style.height = img.getAttribute('data-default-height');
}
        </script>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="subcategory2.htm"
                       data-cat-image="images/defaultpic2.jpg" data-cat-width="280px" data-cat-height="420px"
                       onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
                      >Subcategory One</a></li>
                <li><a href="subcategory3.htm"
                       data-cat-image="images/defaultpic3.jpg" data-cat-width="280px" data-cat-height="226px"
                       onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
                      >Subcategory 2</a></li>
            </ul>
        </div>
        <div>
            <img id="catPic" src="images/defaultpic1.jpg" alt=""
                 data-default-image="images/defaultpic1.jpg" data-default-width="280px" data-default-height="420px"
                 width="280" height="420"
                />
        </div>
    </body>
</html>

また、 on *属性を使用するのではなく、JavaScriptでリスナーをアタッチすることを検討する必要があります。これは、JavaScriptをHTMLから完全に分離できることを意味します。

于 2012-11-22T12:37:37.437 に答える
1

マウスインでデフォルトの画像ソースを隠してから、マウスアウトで復元することができます

<script type="text/javascript">
function mouseOverImage2()
{
    if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
        document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}  
function mouseOverImage3()
{
    if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
        document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage(e)
{
    if(typeof(document.getElementById("catPic").defaultSrc) != "undefined")
        document.getElementById("catPic").src= document.getElementById("catPic").defaultSrc;
}
</script>
于 2012-11-22T12:15:51.010 に答える
1

上記に加えて、長期的には、1つの関数を使用し、要素noをパラメーターとして渡す方が簡単な場合があります。これらの線に沿って

<html>
    <head>
    <script type="text/javascript">
        function mouseOverImage(elementNo){
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg';document.images['catPic'].style.width='280px';     document.images['catPic'].style.height='420px';;
    }  

    function mouseOutImage(elementNo){
        document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg'; //here's what I don't know what to put
    }
</script>
</head>
<body>
<div class="nav">
          <ul>
              <li><a href="subcategory2.htm" onmouseover="mouseOverImage(2)"
onmouseout="mouseOutImage(1)">Subcategory One</a></li>
              <li><a href="subcategory3.htm" onmouseover="mouseOverImage(3)"
onmouseout="mouseOutImage(1)">Subcategory 2</a></li></ul>
</div>
<div>
       <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
        </div>

 </body>
 </html>
于 2012-11-22T12:22:04.197 に答える