Премини към съдържанието

Архивирана тема

Темата е твърде стара и е архивирана. Не можете да добавяте нови отговори в нея, но винаги можете да публикувате нова тема, в която да продължи дискусията. Регистрирайте се или влезте във вашия профил за да публикувате нова тема.

Карамфил

onmouseover-Проблем

Препоръчан отговор


Здравейте, 

 

Мъча се да направя няколко икони цветни, при поставяне на мишката върху тях, ефекта обаче е, че при поставяне на мишката върху която и да е тях всички стават цветни, функцията е една, но при няколко резултата беше същия. Ето и кода:

 

 

 

<script>
function mouseNotOver()
{
 var encyclopedia = document.getElementById("encyclopedia");
 encyclopedia.src="/images/iconEncyclopediabw.png"
 
var specialists = document.getElementById("specialists");
   specialists.src="/images/iconSpecialistsbw.png"
 
 var news = document.getElementById("news");
     news.src="/images/iconNewsbw.png" 
 
 
    var companies = document.getElementById("companies");
   companies.src="/images/iconCompaniesbwa.png"
 
 
}
 
function mouseOver()
{
  var encyclopedia = document.getElementById("encyclopedia");
  encyclopedia.src="/images/iconEncyclopedia1.png"
 
var news = document.getElementById("news");
     news.src="/images/iconNews.png"
 
var specialists = document.getElementById("specialists");
   specialists.src="/images/iconSpecialists2.png"      
 
 
var companies = document.getElementById("companies");
   companies.src="/images/iconCompanies2.png"
 
 
}
</script>
 
 
 
 
 
 
<div class="boxIcon">
<a href="{$site}wi/" onmouseover="mouseOver(this)" onmouseout="mouseNotOver(this)">
<img  src="/images/iconEncyclopediabw.png" width="68px" height="68px" id="encyclopedia" border="0" title="{#encyclopedia#}" />
<br />
 
</a>
</div>
 
<div class="boxIcon" >
<a href="{$site}ships/">
<img   src="/images/iconShip.png" id="ships" width="68px" height="68px" border="0" title="{#ships#}" />
<br />
 
</a>
</div>
 
 
 
 
Благодаря на тези които ще помогнат.

 

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Прясно написано:

 

jQuery: 

$(document).ready(function () {	$('.grayScale').hover(		function() {			$(this).css({				'-webkit-filter' : 'grayscale(0%)',				'-moz-filter' : 'grayscale(0%)',				'filter' : 'grayscale(0%)'			});		}, 		function() {			$(this).css({				'-webkit-filter' : 'grayscale(100%)',				'-moz-filter' : 'grayscale(100%)',				'filter' : 'grayscale(100%)'		});	});});

HTML:

<!-- В head -><script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script><!-- В body -><img class="grayScale" src="img.jpg" /><img class="grayScale" src="img.jpg" /><img class="grayScale" src="img.jpg" /><img class="grayScale" src="img.jpg" /><img class="grayScale" src="img.jpg" />

CSS:

img.grayScale{width: 100px; height: 100px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%);}

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Благодаря за ОТГОВОРА, както на теб , така и на   The WOLF, явно тук има хора който наистина помагат, а не само такива обясняващи какво не знаеш... Между другото, използвах варианта с CSS.  БЛАГОДАРЯ ОЩЕ ВЕДНЪЖ..L

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

×

Информация

Поставихме бисквитки на устройството ви за най-добро потребителско изживяване. Можете да промените настройките си за бисквитки, или в противен случай приемаме, че сте съгласни с нашите условия за ползване.