0

私はすでに JavaScript でこれを開始しているので、jquery を使用したくありませんが、JavaScript の専門家が私のコードを見て、私が間違っていることや正しいことを教えてくれますか? ここで私が達成しようとしていることをお話ししましょう。4 つのボタンで構成されるメニューがあり、それらにカーソルを合わせると色が変わり、見出しの上にカーソルを合わせると見出し画像の下に表示され、ボタンは元の色に戻り、見出しの下に表示されますテキストを含む別の画像。ほとんどの場合、コードは正常に動作しますが、Firefox では見出しが時々移動します。これは、テキスト画像が表示されていないときに見出しがテキストがある場所に落ちるためだと思います。 IEでこの問題。最大の問題は onmouseout です。私はしません

コードは次のとおりです。

window.onload = rollover;
function rollover()
var images = document.getElementsByTagName("img"); // Get all the images in the document
var roll = new RegExp("roll");
var preload = [];
var fileLoc = "images/rollovers/";
for ( var i=0; i<images.length; i++) 
{
    if (images[i].id.match(roll)) // Loop through all the images in document and look for match on 'roll'
    {
        preload[i] = new Image();
        preload[i].src = fileLoc + images[i].id + "_over.gif"; // Preload the _overs into an array.
        images[i].onmouseover = function()  // Add a mouseover event to image
        {
            this.src = fileLoc + this.id + "_over.gif"; // When rolled over, this file now equals the _over image
            var currentButton = this.id; // Grab the id of the current image
            var imageHeader = document.getElementById("current_title"); //Grab all images that are titled 'current_title'
            var newHeaderImage = new Image();
            newHeaderImage.src = fileLoc + currentButton + "_header.gif"; // Create new image and store _Header image inside
            newHeaderImage.id = currentButton + "_header"; //New id for new image is file + headerId
            imageHeader.src = newHeaderImage.src;
            imageHeader.height = newHeaderImage.height; // Assign header image id to currect location
            imageHeader.width = newHeaderImage.width;
            imageHeader.style.visibility = "visible";
            imageHeader.onmouseover = function() // Attach mouse event for header image
            {
                var imageText = document.getElementById("button_text");
                var newTextImage = new Image();
                newTextImage.src = fileLoc + currentButton + "_text.gif";
                imageText.src = newTextImage.src;
                imageText.height = newTextImage.height;
                imageText.width = newTextImage.width;
                imageText.style.visibility = "visible";

            }


        }
        //images[i].onmouseout = setTimeout(mouseOut(fileLoc, this.id),3000);
    }
    }

}

/*function mouseOut(fileLoc, curButton)

{

var titleImg = document.getElementById("current_title");
var imgButton = curButton;
this.src = fileLoc + imgButton + "_org.gif";

titleImg.style.visibility = "hidden";

}*/

4

2 に答える 2

4

さて、弾丸を噛んで、これが私の担当者をどのように混乱させるか見てみましょう:-)。

これはあなたが望む答えではありませんが、やめてください。

バックアップします。JSライブラリ（jQueryなど）をダウンロードして、再起動します。

あなたの人生はより簡単になり、家族や友人と過ごす時間が増え、ここでもっと質問をしなければならないときはいつでも不機嫌になることが少なくなります（そして私を信じてください、それはそれほど頻繁ではありません:-)。

JSの専門家にアドバイスを求めなければならないという事実は、それが間違った方向に進んでいることを示しているはずです。私を信じてください。すべてのJSエキスパートは、クロスブラウザーの互換性やその他のそのような厄介な問題などのすべての問題にすでに直面しているため、すでにJSライブラリを使用しています。

于 2009-01-27T00:41:10.990 に答える
0

わかりました、ライブラリを使用しない (少なくとも ie と firefox で) 動作するスクリプトを次に示します。
ライブラリを使用すると、明らかにこのコードがより簡潔になります。

window.onload = createRollover;

function createRollover() {
    var button;
    var imgPath = 'img/';
    var container = document.getElementById( 'ro_container' );
    var buttonContainer = document.getElementById( 'ro_buttons' );
    var headerContainer = document.getElementById( 'ro_header' );
    var textContainer = document.getElementById( 'ro_text' );
    var buttons = buttonContainer.getElementsByTagName( 'img' );

    container.onmouseout = rollOut;

    // set up the element hierarchy
    for( var i = 0; i < buttons.length; i++ ) {
        button = buttons[i];
        button.onmouseover = buttonRollover;
        button.up =  document.createElement( 'img' );
        button.up.src = imgPath+button.id+'.gif';
        button.over =  document.createElement( 'img' );
        button.over.src = imgPath+button.id+'_over.gif';
        button.header = document.createElement( 'img' );
        button.header.src = imgPath+button.id+'_header.gif';
        button.header.onmouseover = headerRollover;
        button.header.text =  document.createElement( 'img' );
        button.header.text.src = imgPath+button.id+'_text.gif';
    }

    function buttonRollover() {

        //do nothing if this button is already active
        if( this.src == this.over.src ) return;

        //reset all the buttons and set this one to over
        for( var i = 0; i < buttons.length; i++ ) {
            buttons[i].src = buttons[i].up.src;
        }
        this.src = this.over.src;

        //see what's in the header div and do the header thing
        var h = headerContainer.getElementsByTagName( 'img' );
        if( h.length > 0 ) {
            headerContainer.replaceChild( this.header, h[0] );
        } else {
            headerContainer.appendChild( this.header );
        }
        //clear the text div
        textContainer.innerHTML = '';
    }

    function headerRollover() {
        //see what's in the text div and do the thing
        var t = textContainer.getElementsByTagName( 'img' );
        if( t.length > 0 ) {
            textContainer.replaceChild( this.text, t[0] );
        } else {
            textContainer.appendChild( this.text );
        }
    }

    function rollOut( e ) {
        //mouseouts take a bit of work
        //that's one of the reasons why we like libraries
        e = e || window.event;
        var onto = e.relatedTarget || e.toElement;
        // we'll cancel this event if we've rolled on to an element
        // that is a child of this one.
        // traverse up the tree looking for 'this' or the document
        while( onto != this && onto != document ) {
            onto = onto.parentNode;
        }
        if( onto == this ) {
            //false alarm, it was a child of 'this'
            return; 
        }
        // reset
        for( var i = 0; i < buttons.length; i++ ) {
            buttons[i].src = buttons[i].up.src;
        }
        headerContainer.innerHTML = '';
        textContainer.innerHTML = '';
    }
}

そして、マークアップ

<div id="ro_container">
    <div id="ro_buttons">
        <img src="img/but1.gif" id="but1"/>
        <img src="img/but2.gif" id="but2"/>
        <img src="img/but3.gif" id="but3"/>
    </div>
    <div id="ro_header"></div>
    <div id="ro_text"></div>
</div>

私はあなたがしたのと同じ画像命名システムを使用しました（私は思う）：

but1.gif, but1_over.gif, but1_header.gif, but1_text.gif  
but2.gif....

お役に立てれば

于 2009-01-27T12:50:35.807 に答える