Question

Нашел на webmaster ucoz хорошие эффекты. Мне понравился 3 эффект, и я решил сделать так, чтобы на главной странице, когда я навожу на картинку новости, она переворачивалась и там отображалась категория и что нибудь еще. Подскажите, как правильнее это сделать, чтобы размер картинки оставался, как сейчас?

Comments

<div class="mtr"> 
<div class="im"> 
<div class="inim"> 
 <a href="$ENTRY_URL$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_URL1$<?else?>$IMG_URL1$<?endif?>" width="300" alt="$TITLE$" title="$TITLE$" /></a> 
</div> 
</div> 
<div class="mtr_td"> 
 <div class="name_mtr"><a href="$ENTRY_URL$">$TITLE$</a>$MODER_PANEL$</div> 
 <div class="article_counters"><span class="dats">$DATE$ в $TIME$</span><?if($CATEGORY_NAME$)?><a href="$CATEGORY_URL$"><span class="catalog">$CATEGORY_NAME$</span></a><?endif?><span class="views">$READS$</span><?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$"><span class="coms">$COMMENTS_NUM$</span></a><?endif?></div> 
<p class="mtr_d"> 
$MESSAGE$ 
</p> 
</div> 
</div>

Код шаблона вида материала

 

Answer 1

В инструкции довольно понятно все описано, ваш код:

 <a href="$ENTRY_URL$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_URL1$<?else?>$IMG_URL1$<?endif?>" width="300" alt="$TITLE$" title="$TITLE$" /></a>

заворачиваем в див вместо кода примера, как-то так:

<ul class="demo-3"> 
             <li> 
                 <figure> 
                     <?if($IMG_URL1$)?><a href="$IMG_URL1$" class="ulightbox"><img src="$IMG_SMALL_URL1$" alt="$TITLE$"/><?endif?> 
                     <figcaption> 
                         <h2>$TITLE$</h2> 
                         <p>Описание</p> 
                     </figcaption> 
                 </figure> 
             </li> 
</ul>

стили соответственно устанавливайте в таблицу стилей. Если что-то не будет работать, соответственно уточняйте у автора материала.

Comments

Ну и разумеется, в CSS от demo-3 убираем width:100% и height:100%

---

А как сохранить размер и позицию картинки?

---

Иван Плотников,

У вас размер был прописан у картинки

<img src="<?if($IMG_SMALL_URL1$)?>$IMG_URL1$<?else?>$IMG_URL1$<?endif?>" width="300" alt="$TITLE$" title="$TITLE$" />

---

Иван Плотников,

для смал img добавьте - width="300" ваш сайт похож на еще одну копию Yraа и Webmaster и все копируют материалы в Yraa, интересно в итоге получается, как вы будете помогать пользователям, если элментарные вопросы сами спрашиваете

---

Yuri_Geruk,

Опыта набираюсь