应用onClick（），onMouseOver（）和onMouseOut（）来更改img的问题

时间：2014-12-18 11:30:50

标签： javascript jquery html

我已尝试过这篇文章评论的所有内容 - ＆gt; onClick(), onMouseOver() and onMouseOut() with image但没有运气。

我希望在src和onmouseover()时将图片更改为另一张图片（基本上为onclick()）。此外，当onmouseout()使img回归原始版本时。

我的代码：

<nav class="nav nav-tabs nav-justified" role="banner">
    <div class="collapse navbar-collapse navbar-right">
                <ul class="nav nav-tabs">
                    <li onclick="cambioSeccion('especialistas');" onmouseover="changeImgToWhite('img1');" onmouseout="changeImgToOriginal('img1');">
                        <a href="#" id="especialistasBoton"><i class="fa">&nbsp;<img id="img1" src="images/icons/Stethoscope.png" alt="logo"></i>&nbsp;NUESTROS ESPECIALISTAS</a></li>
                    <li onclick="cambioSeccion('servicios');" onmouseover="changeImgToWhite('img2');" onmouseout="changeImgToOriginal('img2');">
                        <a href="#" id="serviciosBoton"><i class="fa">&nbsp;<img id="img2" src="images/icons/services.png" alt="logo"></i>&nbsp;SERVICIOS</a></li>
                    <li onclick="cambioSeccion('aseguradoras');" onmouseover="changeImgToWhite('img3');" onmouseout="changeImgToOriginal('img3');">
                        <a href="#" id="aseguradorasBoton">
                            <i class="fa">&nbsp;<img id="img3" src="images/icons/maletin.png" alt="logo"></i>&nbsp;ASEGURADORAS Y MUTUALIDADES</a></li>
                    <li onclick="cambioSeccion('instalaciones');" onmouseover="changeImgToWhite('img4');" onmouseout="changeImgToOriginal('img4');">
                        <a href="#" id="instalacionesBoton">
                            <i class="fa">&nbsp;<img id="img4" src="images/icons/House.png" alt="logo"></i>&nbsp;INSTALACIONES</a></li>
                    <li onclick="cambioSeccion('dondeestamos');" onmouseover="changeImgToWhite('img5');" onmouseout="changeImgToOriginal('img5');">
                        <a href="#" id="dondeestamosBoton">
                            <i class="fa">&nbsp;<img id="img5" src="images/icons/location.png" alt="logo"></i>&nbsp;¿DONDE ESTAMOS?</a></li>
                </ul>
    </div>
</nav>

JavaScript：

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var activo = '#main-slider';


function cambioSeccion(seccion){

    if(seccion==='especialistas'){
        $(activo).slideToggle( "slow" );
        $('#especialistas').slideToggle( "slow" );
        activo = '#especialistas';
        changeImgToOriginal('img2');
        changeImgToOriginal('img3');
        changeImgToOriginal('img4');
        changeImgToOriginal('img5');
        changeImgToWhite('img1');
    }

    if(seccion==='servicios'){
        $(activo).slideToggle( "slow" );
        $('#servicios').slideToggle( "slow" );
        activo = '#servicios';
        changeImgToOriginal('img1');
        changeImgToOriginal('img3');
        changeImgToOriginal('img4');
        changeImgToOriginal('img5');
        changeImgToWhite('img2');
    }

    if(seccion==='aseguradoras'){
        $(activo).slideToggle( "slow" );
        $('#aseguradoras').slideToggle( "slow" );
        activo = '#aseguradoras';
        changeImgToOriginal('img1');
        changeImgToOriginal('img2');
        changeImgToOriginal('img4');
        changeImgToOriginal('img5');
        changeImgToWhite('img3');
    }

    if(seccion==='instalaciones'){
        $(activo).slideToggle( "slow" );
        $('#instalaciones').slideToggle( "slow" );
        activo = '#instalaciones';
        changeImgToOriginal('img1');
        changeImgToOriginal('img2');
        changeImgToOriginal('img3');
        changeImgToOriginal('img5');
        changeImgToWhite('img4');
    }

    if(seccion==='dondeestamos'){
        $(activo).slideToggle( "slow" );
        $('#dondeestamos').slideToggle( "slow" );
        activo = '#dondeestamos';
        $('#map-container').css("display","block");
        init_map();
        changeImgToOriginal('img1');
        changeImgToOriginal('img2');
        changeImgToOriginal('img3');
        changeImgToOriginal('img4');
        changeImgToWhite('img5');
    } else{
        $('#map-container').css("display","none");
    }
}

function changeImgToWhite(param){
    if(param === 'img1'){
        $('#' + param).attr('src','images/icons/Stethoscopewhite.png');
        $('#especialistasBoton').css('background-color', '#79BAB3');
        $('#especialistasBoton').css('color', '#FFF');
    }

    if(param === 'img2'){
        $('#' + param).attr('src','images/icons/serviceswhite.png');
        $('#serviciosBoton').css('background-color', '#79BAB3');
        $('#serviciosBoton').css('color', '#FFF');
    }

    if(param == 'img3'){
        $('#' + param).attr('src','images/icons/maletinwhite.png');
        $('#aseguradorasBoton').css('background-color', '#79BAB3');
        $('#aseguradorasBoton').css('color', '#FFF');
    }

    if(param == 'img4'){
        $('#' + param).attr('src','images/icons/Housewhite.png');
        $('#instalacionesBoton').css('background-color', '#79BAB3');
        $('#instalacionesBoton').css('color', '#FFF');
    }

    if(param == 'img5'){
        $('#' + param).attr('src','images/icons/locationwhite.png');
        $('#dondeestamosBoton').css('background-color', '#79BAB3');
        $('#dondeestamosBoton').css('color', '#FFF');
    }
}

function changeImgToOriginal(param){
    if(param === 'img1' && activo !== '#especialistas'){
        $('#' + param).attr('src', 'images/icons/Stethoscope.png');
        $('#especialistasBoton').css('background-color', '#FFF');
        $('#especialistasBoton').css('color', '#8E8E8E');
    }

    if(param === 'img2' && activo !=='#servicios'){
        $('#' + param).attr('src', 'images/icons/services.png');
        $('#serviciosBoton').css('background-color', '#FFF');
        $('#serviciosBoton').css('color', '#8E8E8E');
    }

    if(param === 'img3' && activo !=='#aseguradoras'){
        $('#' + param).attr('src', 'images/icons/maletin.png');
        $('#aseguradorasBoton').css('background-color', '#FFF');
        $('#aseguradorasBoton').css('color', '#8E8E8E');
    }

    if(param === 'img4' && activo !=='#instalaciones'){
        $('#' + param).attr('src', 'images/icons/House.png');
        $('#instalacionesBoton').css('background-color', '#FFF');
        $('#instalacionesBoton').css('color', '#8E8E8E');
    }

    if(param === 'img5' && activo !=='#dondeestamos'){
        $('#' + param).attr('src', 'images/icons/location.png');
        $('#dondeestamosBoton').css('background-color', '#FFF');
        $('#dondeestamosBoton').css('color', '#8E8E8E');
    }
}

/* Carrusel de aseguradoras */

$(document).ready(function() {
    $('#Carousel').carousel({
        interval: 5000
    });
});

这没有做任何事情，我无法弄清楚原因。

编辑： 我编辑了这篇文章，以展示我是如何解决我的问题的。几天前我做了那件事，但我已经改进了。希望它对将来可能遇到同样问题的人有所帮助:)。

3 个答案:

答案 0 :(得分：1)

请试试这个

<img id="img1" src="http://www.topazlabs.com/bweffects_static/img/grain_before.jpg" alt="logo">
<input type="hidden" id="bck-img" value="http://www.topazlabs.com/bweffects_static/img/grain_after.jpg" />

$('#img1').on('mouseover', function (event) {
    var thisSrc = $(this).attr('src');
    var changeSrc = $('#bck-img').val();
    $('#bck-img').val(thisSrc);
    $(this).attr('src', changeSrc);
});

$('#img1').on('mouseout', function (event) {
    var thisSrc = $(this).attr('src');
    var changeSrc = $('#bck-img').val();
    $('#bck-img').val(thisSrc);
    $(this).attr('src', changeSrc);
});

检查这个小提琴：http://jsfiddle.net/hoja/rn6mg80z/

答案 1 :(得分：1)

首先，我要感谢所有帮助过我的人。

我想出了一个解决我问题的方法。它是以下一个：

我的HTML：

<nav class="nav nav-tabs nav-justified" role="banner">
        <div class="collapse navbar-collapse navbar-right">
                    <ul class="nav nav-tabs">
                        <li onclick="cambioSeccion('especialistas')";>
                            <a href="#" onmouseover="changeImgToWhite('img1')"; onmouseout="changeImgToOriginal('img1')";>
                                <i class="fa">&nbsp;<img id="img1" src="images/icons/Stethoscope.png" alt="logo"></i>&nbsp;NUESTROS ESPECIALISTAS</a></li>
                        <li onclick="cambioSeccion('servicios');">
                            <a href="#" onmouseover="changeImgToWhite('img2')"; onmouseout="changeImgToOriginal('img2')";>
                                <i class="fa">&nbsp;<img id="img2" src="images/icons/services.png" alt="logo"></i>&nbsp;SERVICIOS</a></li>
                        <li onclick="cambioSeccion('aseguradoras');">
                            <a href="#" onmouseover="changeImgToWhite('img3')"; onmouseout="changeImgToOriginal('img3')";>
                                <i class="fa">&nbsp;<img id="img3" src="images/icons/maletin.png" alt="logo"></i>&nbsp;ASEGURADORAS Y MUTUALIDADES</a></li>
                        <li onclick="cambioSeccion('instalaciones');">
                            <a href="#" onmouseover="changeImgToWhite('img4')"; onmouseout="changeImgToOriginal('img4')";>
                                <i class="fa">&nbsp;<img id="img4" src="images/icons/House.png" alt="logo"></i>&nbsp;INSTALACIONES</a></li>
                        <li onclick="cambioSeccion('dondeestamos');">
                            <a href="#" onmouseover="changeImgToWhite('img5')"; onmouseout="changeImgToOriginal('img5')";>
                                <i class="fa">&nbsp;<img id="img5" src="images/icons/location.png" alt="logo"></i>&nbsp;¿DONDE ESTAMOS?</a></li>
                    </ul>
        </div>
    </nav>

我的JavaScript：

var activo = '#main-slider';
var clicked1 = false;
var clicked2 = false;
var clicked3 = false;
var clicked4 = false;
var clicked5 = false;


function cambioSeccion(seccion){
    if(seccion=='especialistas'){
        $(activo).slideToggle( "slow" );
        $('#especialistas').slideToggle( "slow" );
        activo = '#especialistas';
        clicked1 = true;
        clicked2 = false;
        clicked3 = false;
        clicked4 = false;
        clicked5 = false;
        changeImgToOriginal('img2');
        changeImgToOriginal('img3');
        changeImgToOriginal('img4');
        changeImgToOriginal('img5');
    }else{
        if(seccion == 'especialistasFooter'){
            $(activo).slideToggle( "slow" );
            $('#especialistas').slideToggle( "slow" );
            activo = '#especialistas';
            clicked1 = false;
            clicked2 = false;
            clicked3 = false;
            clicked4 = false;
            clicked5 = false;
        }
    }

    if(seccion=='servicios'){
        $(activo).slideToggle( "slow" );
        $('#servicios').slideToggle( "slow" );
        activo = '#servicios';
        clicked1 = false;
        clicked2 = true;
        clicked3 = false;
        clicked4 = false;
        clicked5 = false;
        changeImgToOriginal('img1');
        changeImgToOriginal('img3');
        changeImgToOriginal('img4');
        changeImgToOriginal('img5');
    }else{
        if(seccion=='serviciosFooter'){
            $(activo).slideToggle( "slow" );
            $('#servicios').slideToggle( "slow" );
            activo = '#servicios';
            clicked1 = false;
            clicked2 = false;
            clicked3 = false;
            clicked4 = false;
            clicked5 = false;
        }
    }

    if(seccion=='aseguradoras'){
        $(activo).slideToggle( "slow" );
        $('#aseguradoras').slideToggle( "slow" );
        activo = '#aseguradoras';
        clicked1 = false;
        clicked2 = false;
        clicked3 = true;
        clicked4 = false;
        clicked5 = false;
        changeImgToOriginal('img1');
        changeImgToOriginal('img2');
        changeImgToOriginal('img4');
        changeImgToOriginal('img5');
    }else{
        if(seccion=='aseguradorasFooter'){
            $(activo).slideToggle( "slow" );
            $('#aseguradoras').slideToggle( "slow" );
            activo = '#aseguradoras';
            clicked1 = false;
            clicked2 = false;
            clicked3 = false;
            clicked4 = false;
            clicked5 = false;
        }   
    }

    if(seccion=='instalaciones'){
        $(activo).slideToggle( "slow" );
        $('#instalaciones').slideToggle( "slow" );
        activo = '#instalaciones';
        clicked1 = false;
        clicked2 = false;
        clicked3 = false;
        clicked4 = true;
        clicked5 = false;
        changeImgToOriginal('img1');
        changeImgToOriginal('img2');
        changeImgToOriginal('img3');
        changeImgToOriginal('img5');
    }else{
        if(seccion=='instalacionesFooter'){
            $(activo).slideToggle( "slow" );
            $('#instalaciones').slideToggle( "slow" );
            activo = '#instalaciones';
            clicked1 = false;
            clicked2 = false;
            clicked3 = false;
            clicked4 = false;
            clicked5 = false;
        }
    }

    if(seccion=='dondeestamos'){
        $(activo).slideToggle( "slow" );
        $('#dondeestamos').slideToggle( "slow" );
        activo = '#dondeestamos';
        clicked1 = false;
        clicked2 = false;
        clicked3 = false;
        clicked4 = false;
        clicked5 = true;
        changeImgToOriginal('img1');
        changeImgToOriginal('img2');
        changeImgToOriginal('img3');
        changeImgToOriginal('img4');
    }
    else{
        if(seccion=='dondeestamosFooter'){
            $(activo).slideToggle( "slow" );
            $('#dondeestamos').slideToggle( "slow" );
            activo = '#dondeestamos';
            clicked1 = false;
            clicked2 = false;
            clicked3 = false;
            clicked4 = false;
            clicked5 = false;
        }
    }

}

function changeImgToWhite(param){
    if(param == 'img1'){
        $('#' + param).attr('src','images/icons/Stethoscopewhite.png');
    }

    if(param == 'img2'){
        $('#' + param).attr('src','images/icons/serviceswhite.png');
    }

    if(param == 'img3'){
        $('#' + param).attr('src','images/icons/maletinwhite.png');
    }

    if(param == 'img4'){
        $('#' + param).attr('src','images/icons/Housewhite.png');
    }

    if(param == 'img5'){
        $('#' + param).attr('src','images/icons/locationwhite.png');
    }
}

function changeImgToOriginal(param){
    if(param == 'img1' && clicked1 == false){
        $('#' + param).attr('src', 'images/icons/Stethoscope.png');
    }

    if(param == 'img2' && clicked2 == false){
        $('#' + param).attr('src', 'images/icons/services.png');
    }

    if(param == 'img3' && clicked3 == false){
        $('#' + param).attr('src', 'images/icons/maletin.png');
    }

    if(param == 'img4' && clicked4 == false){
        $('#' + param).attr('src', 'images/icons/House.png');
    }

    if(param == 'img5' && clicked5 == false){
        $('#' + param).attr('src', 'images/icons/location.png');
    }
}

上面的代码基本上就是这个 - ＆gt; http://jsfiddle.net/rn6mg80z/10/但与其他IMG和结构有关。控制onmouseover和onmouseout非常容易（你甚至可以用CSS做）但问题出在onClick（）上。我想在onClick（）进入游戏后立即杀死onmouseover和onmouseout功能。

希望我提出的这个解决方案可以帮助别人：）

答案 2 :(得分：0)

我很快就这样做了：

<a href="#" onmouseover="document.mySwitch.src='http://pic-zoom.com/media/images/80c9b7b74b.png'" onmouseout="document.mySwitch.src='http://www.haberler.com/haber-resimleri/195/polat-alemdar-dan-itiraf-2418195_o.jpg'">

    <img src="off.gif" name="mySwitch" />

</a>
相关问题
最新问题