应用 onClick(）， onMouseOver(） y onMouseOut(） 来更改 img 时出现问题

problems applying onClick(), onMouseOver() y onMouseOut() for changing an img

本文关键字：img 问题 onMouseOut onClick onMouseOver 应用      更新时间：2023-09-26

我已经尝试了这篇文章中评论的所有内容 -> onClick((，onMouseOver((和onMouseOut((的图像，但没有运气。

我想在onmouseover()和onclick()时将图像更改为另一个图像(基本上是src(。此外，当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
    });
});

这没有任何作用，我不知道为什么。

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

请尝试这个

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

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

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

我的网页：

<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');
    }
}

上面的代码基本上是这样的 -> http://jsfiddle.net/rn6mg80z/10/但与其他IMG和结构。控制onmouseover和onmouseout非常容易(你甚至可以只用CSS来做到这一点(，但问题出在onClick((上。我想在onClick((进入游戏后立即终止onmouseover和onmouseout功能。

希望我想出的这个解决方案可以帮助其他人:)

我很快就以这种方式做到了：

<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>
相关文章：