Javascript帮助翻车是翻车

Question

我已经在 javascript 中启动了这个，所以我不想使用 jquery，但是一些 javascript 专家可以查看我的代码并告诉我我在做什么错或对吗？让我告诉你我想在这里完成什么。我有一个由四个按钮组成的菜单，当您将鼠标悬停在它们上时，它们会改变颜色，然后当您将鼠标悬停在标题上时，会在标题图像下方显示，按钮应返回其原始颜色，然后在标题下方出现另一个包含一些文本的图像。在大多数情况下，代码工作正常，除了在 Firefox 中，有时标题会四处移动，我假设这是因为当可见时文本图像不存在，所以标题落在文本所在的位置，我没有IE中的这个问题。最大的问题是onmouseout。我不希望原始按钮立即返回颜色，因为我需要时间才能滚动标题以显示文本，所以我试图使用 setTimeout 函数暂停几秒钟，但它没用。

代码如下：

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";

}*/

Answer 1

好吧，咬紧牙关，让我们看看这如何影响我的代表:-)。

这不是你想要的答案，而是停止。

备份。下载一个JS库（如jQuery），然后重启。

您的生活会更轻松，您将有更多时间与家人和朋友共度时光，并且每当您必须在这里提出更多问题时，您的脾气就会变得不那么暴躁（相信我，这种情况会减少 :-) .

您必须咨询 JS 专家的建议这一事实应该向您表明您的做法是错误的。相信我，所有的 JS 专家都已经在使用 JS 库了，因为他们已经面临了诸如跨浏览器兼容性和其他此类痛苦问题之类的所有问题。

Answer 2

好的，这是一个不使用库的有效脚本（至少在 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....

希望对你有帮助