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,

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