| |
|
|
| | Привет всем! Помогите пожалуйста! Проблема такая:
- На странице есть две черно-белые картинки, которые расположены друг около друга. Когда мышкой щелкаем по первой картинке, она должна замениться такой же, но в цветном варианте! После того, как мы щелкаем на соседнюю черно-белую картинку, она заменится такой же цветной, а первая картинка вновь станет черно-белой!
Кто-нибудь знает, как можно написать такой скрипт?
Заранее спасибо! | |
| |
|
|
| |
|
|
| |
для: Мурад
(17.05.2007 в 12:12)
| | | Для этого есть фильтры DHTML. Просто возьмите справочник по DHTML (у меня под рукой его нет). | |
| |
|
|
| |
|
|
| |
для: coloboc66
(17.05.2007 в 12:27)
| | | Неужели никто не может мне помочь (((( | |
| |
|
|
| |
|
|
| |
для: Мурад
(18.05.2007 в 10:38)
| | | подсказка
style='filter:grey()' | |
| |
|
|
| |
|
|
| |
для: Мурад
(18.05.2007 в 10:38)
| | | Фильтрами делать прикольно, но лично у меня они работают только в IE. А так чтоб наверняка, придется для начала сделать каждую картинку в двух вариантах - цветном и сером. А дальше можно хотя бы и так:
<html>
<head>
<script>
var img1, img2;
function chimage(d)
{ if(d==1)
{ img1.src='img1_c.gif';
img2.src='img2_g.gif';
}
else
{ img1.src='img1_g.gif';
img2.src='img2_c.gif';
}
}
</script>
</head>
<body>
<img id="im1" src="img1_g.gif" onclick="chimage(1)">
<img id="im2" src="img2_g.gif" onclick="chimage(2)">
</body>
<script>
img1=document.getElementById('im1');
img2=document.getElementById('im2');
</script>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Мурад
(17.05.2007 в 12:12)
| | | С фильтрами и только для IE!!! :-)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Sample</title>
<script type="text/javascript">
(d=document).onclick=function(ev){
ev=ev||event;
if((imgObj=d.all?ev.srcElement:ev.target).tagName!='IMG')return; //интересуют только картинки
if(imgObj.name!='myphoto')return;
else{
for(i=0;i<d.getElementsByName(imgObj.name).length;i++)d.getElementsByName(imgObj.name)[i].style.filter='gray';
imgObj.style.filter='';
}
}
</script>
<style type="text/css">
* html img
{border: 0; width: 200px; height: 250px; filter: gray;}
</style>
</head>
<body>
<img name="myphoto" src="photo_1_clr.jpg" />
<img name="myphoto" src="photo_2_clr.jpg" />
<img name="myphoto" src="photo_3_clr.jpg" />
</body>
</html>
|
Если тоже самое сделать не с style.filter, а с src (как показывал на примере yuk) то можно получить вполне работоспособный мультиброузерный вариант.
P.S. А еще можно сделать попарно абсолютноспозиционированные картинки (чернобелая-цветная) и при клике по ним мышкой одну из них делать невидимой. А если сделать гиперссылками, то можно обойтись и вовсе без JavaScript а воспользоваться псевдоклассом a:active, или a:hover. | |
| |
|
|
