Java. Совместить два скрипта

[aleksei_t]

Всех приветствую!
На одном из форумов я спрашивал как при помощи явы можно повернуть картинку... ответ нашёл но появилась следующая проблемка...
что требуется:
1есть список

<ul style="list-style-image:url(arrow.gif);">
-<li>ТЕКСТ-1</li>
.......................
-<li>ТЕКСТ-N</li>
</ul>

вместо пулек я задал картинку. Нужно чтобы при клике на ТЕКСТ(а также и при клике на сами пульки) картинка поворачивалась (картинкой является стрелочка). Если со списком это проблематично, то можно заменить, допустим, на <p><img src="">ТЕКСТ1</p><br> Скрипт для поворота картинки (при клике на картинку она заменяется на поворачивающуюся гифку, при следующем клике меняется на гиф с поворотом в другую сторону..):

&lt;script type="text/javascript" language="javascript">
var povorachivanie = false, flip = false;
function povorotnik()
{
if (!povorachivanie)
{
flip = !flip;
kartinka.src = flip? "image_orig.gif": "image_flip.gif";
setTimeout("povorachivanie = false;", 500);
}
}
</script>

Отдельно скрипт работает - <img src="image.gif" id="kartinka" onclick=povorotnik()>
Каким образом реализовать это в списке???
2 Также при клике на каждый пункт списка (Текст-1, Текст-2...итд) должен выпадать текст. Вот скрипт:

var SubMenuActive = '';
dom = (document.getElementById)? true : false;
nn4 = (document.layers)? true : false;
ie4 = (!dom && document.all)? true : false;

function displayElem(id) {
if (dom) document.getElementById(id).style.display = "block";
else if (ie4) document.all[id].style.display = "block";
else if (nn4) document.layers[id].display = "block";

}

function undisplayElem(id) {
if (dom) document.getElementById(id).style.display= "none";
else if (ie4) document.all[id].style.display= "none";
else if (nn4) document.layers[id].display= "none";
}

function checkElem(id) { // проверяет существование id и, если существует, возвращает состояние видимости.
if(dom){
if(!document.getElementById(id)) return false;
else return document.getElementById(id).style.display;
}else if(ie4){
if(!document.all[id]) return false;
else return document.all[id].style.display;
}else if(nn4){
if(!document.layers[id]) return false;
else return document.layers[id].display;
}
}

function getElem(id) { // проверяет существование id и, если существует, возвращает ссылку на него.
if(dom){
if(!document.getElementById(id)) return false;
else return document.getElementById(id);
}else if(ie4){
if(!document.all[id]) return false;
else return document.all[id];
}else if(nn4){
if(!document.layers[id]) return false;
else return document.layers[id];
}
}

function ToggleBlockDiv(divn_main, divn_part, hideother) {
divn = divn_main+divn_part;
divn_status = checkElem(divn);
if(divn_status == 'block') undisplayElem(divn);
else if(divn_status == 'none') displayElem(divn);
}

html:

<li style="CURSOR: hand" onclick="ToggleBlockDiv('faq_art_', '1', true); return false;">ТЕКСТ-1...</li>
<DIV id=faq_art_1>
ВЫПАДАЮЩИЙ ТЕКСТ........
</DIV>
&lt;script language=JavaScript type=text/javascript>
<!--
undisplayElem('faq_art_1');
//-->
</SCRIPT>

Появляется ещё 2 проблемки
------как задать чтобы текст выпадал плавно (посмотрев кучу скриптов понял что за это отвечает параметр setTimeout("........;", ........); ).
------и каким образом совместить два скрипта: Чтобы при клике выпадал текст и поворачивалась пулька, при следующем клике текст убирался и пулька поворачивалась обратно.

Все скрипты рабочие, нужно только правильно совместить. Буду очень признателен за помощь!

 

[iNfiUm]

сделать можно, но чем объяснять как, проще сделть, а сделать не просто

где сейчас это висит? дай ссылку...