0
Я пробовал все, что прокомментировал этот пост ->onClick(), onMouseOver() and onMouseOut() with image, но не повезло.проблемы с применением onClick(), onMouseOver() y onMouseOut() для изменения img
Я хочу изменить изображение в другом (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"> <img id="img1" src="images/icons/Stethoscope.png" alt="logo"></i> NUESTROS ESPECIALISTAS</a></li>
<li onclick="cambioSeccion('servicios');" onmouseover="changeImgToWhite('img2');" onmouseout="changeImgToOriginal('img2');">
<a href="#" id="serviciosBoton"><i class="fa"> <img id="img2" src="images/icons/services.png" alt="logo"></i> SERVICIOS</a></li>
<li onclick="cambioSeccion('aseguradoras');" onmouseover="changeImgToWhite('img3');" onmouseout="changeImgToOriginal('img3');">
<a href="#" id="aseguradorasBoton">
<i class="fa"> <img id="img3" src="images/icons/maletin.png" alt="logo"></i> ASEGURADORAS Y MUTUALIDADES</a></li>
<li onclick="cambioSeccion('instalaciones');" onmouseover="changeImgToWhite('img4');" onmouseout="changeImgToOriginal('img4');">
<a href="#" id="instalacionesBoton">
<i class="fa"> <img id="img4" src="images/icons/House.png" alt="logo"></i> INSTALACIONES</a></li>
<li onclick="cambioSeccion('dondeestamos');" onmouseover="changeImgToWhite('img5');" onmouseout="changeImgToOriginal('img5');">
<a href="#" id="dondeestamosBoton">
<i class="fa"> <img id="img5" src="images/icons/location.png" alt="logo"></i> ¿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
});
});
Это ничего не делать, и я не могу понять, почему.
Отредактировано: Я отредактировал сообщение, чтобы показать, как я решил свою проблему. Я сделал это несколько дней назад, но я улучшил его. Надеюсь, это будет полезно для тех, у кого может быть такая же проблема в будущем :).
удалить OnClick = "cambioSeccion ('Especialistas')" или использовать e.stopPropagation(); на этой функции, подающей параметр события. –