Форум Практика оптимизации Любые вопросы от новичков по оптимизации

эффект на картинке

seo-рейдер
На сайте с 04.01.2008
Offline
21
seo-рейдер
396

Подзабыл такую вещь как сделать вот такой или схожий эффект на картинке как здесь

http://chevrolet.motors.ru/main/models/gallery?model_id=17

все за я против, все на право я на лево, всегда против шерсти, говорю правду всегда
den78ru
На сайте с 12.04.2006
Offline
395
den78ru
#1

Так в чём проблема?

1. Посмотрите исходник

2. Качните ксс

Люди не делятся на национальности, партии, фракции и религии. Люди делятся на умных и дураков, а вот дураки делятся на национальности, партии, фракции и религии.
seo-рейдер
На сайте с 04.01.2008
Offline
21
seo-рейдер
#2

den78ru

э нет не все так просто

MoMM
На сайте с 16.06.2006
Offline
727
MoMM
#3

это два слоя. верхний с полосками полупрозрачный... скрывается при наведении курсора.

den78ru
На сайте с 12.04.2006
Offline
395
den78ru
#4

А кто сказал, что будет легко? 😂

seo-рейдер
На сайте с 04.01.2008
Offline
21
seo-рейдер
#5
MoMM:
это два слоя. верхний с полосками полупрозрачный... скрывается при наведении курсора.

скажите а проще можно сделать?

den78ru
На сайте с 12.04.2006
Offline
395
den78ru
#6
seo-рейдер:
скажите а проще можно сделать?

Можно.

<div style='width:100%; height:31;' class=tuman onMouseOver="this.className='netuman';" onMouseOut="this.className='tuman';">

картинка

</div>

В ксс

.tuman{FILTER:alpha(opacity=60);}

.netuman{FILTER:alpha(opacity=100);}

с параметрами можно поиграться до полного удовлетворения.

MoMM
На сайте с 16.06.2006
Offline
727
MoMM
#7
seo-рейдер:
скажите а проще можно сделать?

дык это и есть самое простое: в CSS прописываете для урл-картинок определенного класса, что если активна или наведен курсор, то поверх бэк не показывается в слое, а если неактивна то показывается.

у этих без CSS нагорожено, через скрипт:

<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0">
<tr>
<td height="23" background="/images/content_title_bg.gif"><table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0">
<tr>
<td class="contenttitle">Фотогалерея</td>
</tr>
</table></td>
</tr>
<tr><td valign="top" class="content">
<script>
outImages=new Array();
function over(id){
var setkaImage=MM_findObj("setka_"+id);
setkaImage.src="/i/n.gif";
}
function out(id){
var setkaImage=MM_findObj("setka_"+id);
var newSrc=outImages[id];
if(newSrc){
setkaImage.src=newSrc;
}
}
function setSetka(id){
var setkaImage=MM_findObj("setka_55");
setkaImage.src="/images/gallery_setka.gif";
outImages['55']="/images/gallery_setka.gif";
var setkaImage=MM_findObj("setka_54");
setkaImage.src="/images/gallery_setka.gif";
outImages['54']="/images/gallery_setka.gif";
var setkaImage=MM_findObj("setka_56");
setkaImage.src="/images/gallery_setka.gif";
outImages['56']="/images/gallery_setka.gif";
var setkaImage=MM_findObj("setka_57");
setkaImage.src="/images/gallery_setka.gif";
outImages['57']="/images/gallery_setka.gif";
var setkaImage=MM_findObj("setka_58");
setkaImage.src="/images/gallery_setka.gif";
outImages['58']="/images/gallery_setka.gif";
var setkaImage=MM_findObj("setka_59");
setkaImage.src="/images/gallery_setka.gif";
outImages['59']="/images/gallery_setka.gif";
var setkaImage=MM_findObj("setka_60");
setkaImage.src="/images/gallery_setka.gif";
outImages['60']="/images/gallery_setka.gif";
var setkaImage=MM_findObj("setka_61");
setkaImage.src="/images/gallery_setka.gif";
outImages['61']="/images/gallery_setka.gif";
if(id){
var setkaImage=MM_findObj("setka_"+id);
setkaImage.src="/i/n.gif";
outImages[id]="/i/n.gif";
}
}
function showImage(imgageSrc,id){
var bigImage=MM_findObj("big_image");
bigImage.src=imgageSrc;
setSetka(id);
}
</script><img id="big_image" src="/upload/1184653213_big_image.jpg" border="0"><table border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="7"><img src="/i/n.gif" width="1" height="4" border="0" style="visibility:hidden"></td></tr>
<tr>
<td height="62" width="133" align="center" valign="middle" background="/gallery_preview_image.php?image=/upload/1184653213_big_image.jpg"><a href="javascript:showImage('/upload/1184653213_big_image.jpg','55')" onmouseover="over('55');" onmouseout="out('55');"><img id="setka_55" src="/images/gallery_setka.gif" border="0" height="62" width="133"></a></td>
<td><img src="/i/n.gif" width="4" height="1" border="0" style="visibility:hidden"></td>
<td height="62" width="133" align="center" valign="middle" background="/gallery_preview_image.php?image=/upload/1184653206_big_image.jpg"><a href="javascript:showImage('/upload/1184653206_big_image.jpg','54')" onmouseover="over('54');" onmouseout="out('54');"><img id="setka_54" src="/images/gallery_setka.gif" border="0" height="62" width="133"></a></td>
<td><img src="/i/n.gif" width="4" height="1" border="0" style="visibility:hidden"></td>
<td height="62" width="133" align="center" valign="middle" background="/gallery_preview_image.php?image=/upload/1184653226_big_image.jpg"><a href="javascript:showImage('/upload/1184653226_big_image.jpg','56')" onmouseover="over('56');" onmouseout="out('56');"><img id="setka_56" src="/images/gallery_setka.gif" border="0" height="62" width="133"></a></td>
<td><img src="/i/n.gif" width="4" height="1" border="0" style="visibility:hidden"></td>
<td height="62" width="133" align="center" valign="middle" background="/gallery_preview_image.php?image=/upload/1184653237_big_image.jpg"><a href="javascript:showImage('/upload/1184653237_big_image.jpg','57')" onmouseover="over('57');" onmouseout="out('57');"><img id="setka_57" src="/images/gallery_setka.gif" border="0" height="62" width="133"></a></td>
</tr>
<tr><td colspan="7"><img src="/i/n.gif" width="1" height="4" border="0" style="visibility:hidden"></td></tr>
<tr>
<td height="62" width="133" align="center" valign="middle" background="/gallery_preview_image.php?image=/upload/1184653250_big_image.jpg"><a href="javascript:showImage('/upload/1184653250_big_image.jpg','58')" onmouseover="over('58');" onmouseout="out('58');"><img id="setka_58" src="/images/gallery_setka.gif" border="0" height="62" width="133"></a></td>
<td><img src="/i/n.gif" width="4" height="1" border="0" style="visibility:hidden"></td>
<td height="62" width="133" align="center" valign="middle" background="/gallery_preview_image.php?image=/upload/1184653273_big_image.jpg"><a href="javascript:showImage('/upload/1184653273_big_image.jpg','59')" onmouseover="over('59');" onmouseout="out('59');"><img id="setka_59" src="/images/gallery_setka.gif" border="0" height="62" width="133"></a></td>
<td><img src="/i/n.gif" width="4" height="1" border="0" style="visibility:hidden"></td>
<td height="62" width="133" align="center" valign="middle" background="/gallery_preview_image.php?image=/upload/1184653282_big_image.jpg"><a href="javascript:showImage('/upload/1184653282_big_image.jpg','60')" onmouseover="over('60');" onmouseout="out('60');"><img id="setka_60" src="/images/gallery_setka.gif" border="0" height="62" width="133"></a></td>
<td><img src="/i/n.gif" width="4" height="1" border="0" style="visibility:hidden"></td>
<td height="62" width="133" align="center" valign="middle" background="/gallery_preview_image.php?image=/upload/1184653293_big_image.jpg"><a href="javascript:showImage('/upload/1184653293_big_image.jpg','61')" onmouseover="over('61');" onmouseout="out('61');"><img id="setka_61" src="/images/gallery_setka.gif" border="0" height="62" width="133"></a></td>
</tr>
</table>
<script>
setSetka("55");
</script> </td></tr>

</table>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий