PDA

Просмотр полной версии : меню с rollover картинками


Vladimir_
25.09.2006, 13:49
Всем доброго времени суток!!!
Прежде всего хочу извинится, если мой вопрос покажется через чур глупым, но к сожалению дока и примеры (в том числе из разных форумов) мне не помогли
задача:
- добавить меню с ссылками на соответствующие странички
- меню остоют из картинок, которые при наведении на них курсора мыши меняются на другие
- картинки уже существуют, формировать их не нужно; нужно всего лишь что бы в тэг <img src=... был добавлен код onmouseover=... и onmouseout
- при этом также требуется обрабатывать url и получать из него значение переменной id и отображать меню, в котором картинка на с ссылкой на страничку с таким же id не содержала бы событий onmouseover=... и onmouseout

я всегда работал с php, и на php это всё делается за три секунды, с typo3 я бьюсь головой об стену уже третью неделю, толку никакого.. ну почти никакого..

результат достигнутый на сегодняшний день выглядит вот так

subparts.CONTENT < styles.content.get

subparts.MENU = HMENU
subparts.MENU.1 = GMENU
subparts.MENU.1.NO {
XY = [4.w],[4.h]
4 = IMAGE
4.file = fileadmin/images/m1.gif

allWrap = <td style="color: #FFFFFF;"> | </td>
}

subparts.MENU.1.RO < subparts.MENU.1.NO
subparts.MENU.1.RO = 1
subparts.MENU.1.RO {
4= IMAGE
4.file = fileadmin/images/m1_.gif
}

но(!), во-первых здесь выводится одна и таже картинка для всех пунктов меню (тоже самое и с rollover картинкой), мало того.. rollover картинка отображается вообще не правильно.. почему то сжата по вертикали..

П.С.: я с cms не работал, однако посмотрел mambo, joomla, дошёл в них до меню и вообще ничего не смог сделать, в typo3 хоть что то удалось но для этого понадобилось 3 недели... ужас..... Я начал осваивать cms в надежде что они упростят мою жизнь, а пока что они мне настолько всё усложнили, что я уже реально подумываю о написании собственной cms, так как вижу, что авторы существующих cms совершенно не понимают для чего cms нужны.. а опыт написания "почти cms" уже имеется, я вначале тоже использовал схожий подход.. но когда дошло до взаимодействия с реальными пользователями, увидел как нужно правильно делать, но на это требуется много времени и решил воспользоваться готовым решением.. но.. пока что это готовое решение меня озадачило по полной программе.. никогда ещё не приходилось так трудно осваивать ПО.. нервы на пределе

Pavel Antonov
25.09.2006, 15:40
.......
воспользоваться готовым решением.. но.. пока что это готовое решение меня озадачило по полной программе.. никогда ещё не приходилось так трудно осваивать ПО.. нервы на пределе
Мыслите шире...

Каждая страница имеет поле media. Его можно для картинок в меню и кроме того это позволяет менять картинки в BE.
Берите путь к картинке из поля media:

10 = IMAGE
10 {
file {
import = uploads/media/
import.field = media
import.listNum = 0
}

listNum - выбирает картинку из всех прикрепленных к странице по номеру. Соответственно для rollover выбираете 2-ю картинку (listNum = 1)

GMENU использовать совсем не зачем тоже... используйте TMENU. Или вы будете что-то писать поверх картинки?

Vladimir_
25.09.2006, 16:05
нет, поверх картинки я ничего писать не буду
стал использовать GMENU, так как не разобрался как отключить вывод имени страницы в TMENU (имеется ввиду что в TMENU typo3 генерил код вида <a href="somehost?id=5">about</a>, а about это имя одной из подстраничек)

Pavel Antonov
26.09.2006, 15:09
нет, поверх картинки я ничего писать не буду
стал использовать GMENU, так как не разобрался как отключить вывод имени страницы в TMENU (имеется ввиду что в TMENU typo3 генерил код вида <a href="somehost?id=5">about</a>, а about это имя одной из подстраничек)
Там есть stdWrap для текста ссылки. Если там подменять контент, то вывода пункта меню не будет (будет заменятся на резульат stdWrap):


1.NO {
stdWrap.cObject = IMAGE
stdWrap.cObject {
file.import = uploads/media/
file.import.field = media
file.import.listNum = 0
}
}

Vladimir_
26.09.2006, 16:43
ну и я тогда уже совсем обнаглею и задам ещё один вопрос в продолжении темы ;)
хорошо, допустим я использую stdWrap для подмены контента
но (!) было бы замечательно если бы я мог ещё и для каждого пункта свой тэг вставлять, т.е., например для пункта 1:
<img src="fileadmin/images/m1.jpg" id="m1" onmouseover="document.images['m1'].src='fileadmin/images/m1_.jpg';" onmouseout="document.images['m1'].src='fileadmin/images/m1.jpg';" border="0">
для пункта 2 соответсвенно:
<img src="fileadmin/images/m2.jpg" id="m2" onmouseover="document.images['m2'].src='fileadmin/images/m2_.jpg';" onmouseout="document.images['m2'].src='fileadmin/images/m2.jpg';" border="0">
и т.д.
вы уже обратили внимание что имена файлов различаются всего лишь цифрами.. ведь если я правильно понимаю формировнаие пунктов происходит в цикле.. (если ошибаюсь прошу меня извинить).. было бы замечательно подставлять в строку
<img src="fileadmin/images/m... номерочек пункта меню
так можно?

П.С.: ещё раз прошу прощения за.. практически использование форума в целях перенесения сайта в typo3, хочу ещё раз повторить что я только приступил к его осваению и к сожалению самостоятельно задачи с меню решить не смог.. и думаю наличие в инете инфы о решении такого распространённого метода формирования меню всем новичкам в typo3 очень поможет

П.П.С.: задам сразу следующий вопрос.. мне затем понадобиться формировтаь меню и подставлять вместо названия страничек русские названия пунктов, как я понимаю это делается через stdWrap, однако тоже не совсем ясно.. ведь у каждого пункта своё имя.. если можно поясните

Pavel Antonov
26.09.2006, 17:10
Во-первых, это не совсем цикл. Это итерация по элементам и зависите вы от элементов. Так что и используйте их для идентификации картинок/ссылок/клссов/ид. Можно конечно и нумерацию организовать (через LOAD_REGISTER), но тогда при изменении порядка страниц, у Вас и картинки все поедут к черту.

Вот пример из одного проекта:

lib.mainMenu = HMENU
lib.mainMenu {
maxItems = 8
1 = TMENU
1 {
noBlur = 1
NO{
ATagTitle.field = title
stdWrap.override = <img alt="spacer" src="fileadmin/templates/img/spacer.gif" />
allStdWrap {
preCObject = TEXT
preCObject.field = subtitle
preCObject.wrap = <div class="upmenu" id="|">
postCObject = TEXT
postCObject.value = </div>
}
}
}
}

Генерит что то подобное:
<div class="upmenu" id="m1"><a href="index.php?id=18"><img alt="spacer" src="fileadmin/templates/img/spacer.gif" /></a></div><div class="upmenu" id="m2"><a href="index.php?id=23"><img src="fileadmin/templates/img/spacer.gif" /></a></div><div class="upmenu" id="m3"><a href="index.php?id=9"><img src="fileadmin/templates/img/spacer.gif" /></a></div>...</div><div class="cleaner"><!-- cleaner --></div>

Значения m1, m2, ... , берутся из поля subtitle страницы (используйте какое хотите). Я думаю уж код под себя подогнать сможете...

Vladimir_
02.10.2006, 16:23
и всё таки... как не грустно, но.. typoscript всё таки не тривиальный язык и руководство по нему.. хм, хм, мягко говоря не самое замечательное
мытарства по поводу ршения задачи, как же исключить вывод названий страниц, ни к чему не привили, в результате пришлось вернуться на форум..
люди, добрые, скажите же, как мне это добиться используя следующий код
page = PAGE
page.typeNum = 0

page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/tmpl.html

subparts.CONTENT < styles.content.get

ATagTitle.field =
subparts.MENU = HMENU
subparts.MENU.1 = TMENU
subparts.MENU.1.NO {
subst_elementUid = 1
allWrap = <td style="color: #FFFFFF;"><img src="fileadmin/images/menu/m{elementUid}.jpg"> | </td>
}
если можно, конкретную строку напишите..

Vladimir_
03.10.2006, 12:12
моё собственное решение сейчас выглядит вот так
subparts.MENU = HMENU
subparts.MENU.1 = TMENU
subparts.MENU.1.NO {
doNotShowLink = 1
subst_elementUid = 1
allWrap = <td style="color: #FFFFFF;"><a href="?id={elementUid}"><img src="fileadmin/images/menu/m{elementUid}.jpg" id="m{elementUid}" onmouseover="document.images['m{elementUid}'].src='fileadmin/images/menu/m{elementUid}_.jpg';" onmouseout="document.images['m{elementUid}'].src='fileadmin/images/menu/m{elementUid}.jpg';" border="0"> | </a></td>
}
критикуйте.. советуйте (маны читать не советуйте :) читаю, а вот грамотного чела знающего typo3 явно не хватает)

Pavel Antonov
03.10.2006, 12:47
моё собственное решение сейчас выглядит вот так
subparts.MENU = HMENU
subparts.MENU.1 = TMENU
subparts.MENU.1.NO {
doNotShowLink = 1
subst_elementUid = 1
allWrap = <td style="color: #FFFFFF;"><a href="?id={elementUid}"><img src="fileadmin/images/menu/m{elementUid}.jpg" id="m{elementUid}" onmouseover="document.images['m{elementUid}'].src='fileadmin/images/menu/m{elementUid}_.jpg';" onmouseout="document.images['m{elementUid}'].src='fileadmin/images/menu/m{elementUid}.jpg';" border="0"> | </a></td>
}
критикуйте.. советуйте (маны читать не советуйте :) читаю, а вот грамотного чела знающего typo3 явно не хватает)

CSS получается завязан на ID-страниц. По-моему мнению не очень хорошо... но работоспособно.

martis27
16.11.2006, 14:22
Zdrastvuitie,
A niznajite li vy, kak pokazyvat tolko opredelionyje punkty meniu?
Ja pisu vot tak:

NO {
allWrap = <tr><td ......id="subMenuID{elementUid}">|</td></tr>
ATagParams = class="topMenuTxtSubItem"
RO=1
RO_chBgColor = #ffdd04 | #ffffff | subMenuID
subst_elementUid = 1
}
NO.if{
value=112,114,443,354 #Vot tolko tokije punkty ja hociu pokazyvat
isInList = {elementUid}
}

No u menia 2 problemy. NO.if kazetsa sovsem nerabotajet, daze jiesli ja napisu tak:
NO.if{
negate = 1
}
vseravno pokazyvajet vse punkty, hotia kazetsa sto v etom slucaje menu punkty sovsem ne dolzny byli byt pokazanymi.

I vtoroj vopros: kad dobratsa do etoij znacieniji elementUid v "if"?
Pravilno ja li napisal isInList = {elementUid}?

P.S. Izvinitie za moi alfavit.

martis27
17.11.2006, 13:44
Nu jibat kapat!!! Dva dnia jibalsa!!! Vot odna strocka, i vsie menu items katoryje ja hociu izciezajet:
page.1.subparts.MENU_TEXT.excludeUidList = 112,113,234
(MENU_TEXT eto HMENU)

A vot
page.1.subparts.MENU_TEXT.special.list
page.1.subparts.MENU_TEXT.special.value

nifiga nisrabotala.

Da, pvavilno kto to skazal: TS jazyk netrivialnyj.

HardRock
25.11.2008, 20:09
Извините за боян, но весь вечер разбирался, експерементировал, ничего атк и не вышло.

Вот моя минюха



temp.menulinks = HMENU
temp.menulinks.entryLevel = 0
temp.menulinks {
1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap = <ul id="mul">|</ul>
noBlur = 1
sub_elementUid = 1
NO {
wrapItemAndSub = <li onmouseout="out(this)" onmouseover="over(this)" id="m{elementUid}" >|</li>
ATagParams =
ATagTitle.field = // title
}
ACT=1
ACT {
wrapItemAndSub = <li class="active" onmouseout="out(this)" onmouseover="over(this)" id="m{elementUid}" >|</li>
ATagParams =
ATagTitle.field = // title
}
}

2 < .1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


Очень хотелось бы чтобы вместо {elementUid} автоматом формиловалось 1 2 3 4 5 ....

помогите пожалуйста.

-=UncleByte=-
25.11.2008, 21:40
Наверное надо было добавить еще insertData чтобы данные брались из базы. Пдробнее вот тут все расписано - http://wiki.typo3.org/TSref/getText

reva2
26.11.2008, 00:41
Hardock, во-первых правильно писать не sub_elementUid = 1, а subst_elementUid = 1. Во-вторых, {elementUid} будет заменяться не на последовательные числа (1, 2, 3,....), а на uid страницы на которую указывает пункт меню.

HardRock
26.11.2008, 11:42
Hardock, во-первых правильно писать не sub_elementUid = 1, а subst_elementUid = 1. Во-вторых, {elementUid} будет заменяться не на последовательные числа (1, 2, 3,....), а на uid страницы на которую указывает пункт меню.

Пробовал subst_elementUid и так и сяк, это просто последнее что осталось от моего кода, в любом случае ничего не работает, в id так и остаётся m{elementUid}

HardRock
26.11.2008, 12:25
Как всётаки добавить id к елементам меню ?

HardRock
26.11.2008, 19:07
Спасибо тем кто откликнулся выше, всёравно не разобрался, пришлось подключать jquery и делать на нём автоматическое генерирование id для каждого елемента меню