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....

希望这有帮助

Javascript帮助翻转是翻转

2 个答案: