Форум Flasher.ru - Js: замена рисунков

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - Js: замена рисунков (http://www.flasher.ru/forum/showthread.php?t=68589)

Js: замена рисунков

Мужики, нужна помощь.
Можно ли прописать на JS так, чтобы в какой-то конкретной строке (html) одна картинка заменялась другой?
Ну, то есть, вот есть у меня меню. В нем картинка перед ссылкой (квадратик зеленый). А если нажать на него - открывается "подкаталог" - там (чуть с отступлением) но стоит этот же квадратик. А его нужно поменять на синий. Задать же этот квадрат можно только в одном месте. Если его изменить - изменится всё...
Так вот и нужно сделать так, чтобы в строчке (где указывается количество "отступлений" для подкаталога) поставить скрипт который заменяет "квадратики" подкаталогов...

Сложно выразится, но если поняли - дайте, пожалуйста, либо ссылку на подобный пример (где можно код взять) или напишите его... :confused:

Спасибо!

UL{list-style:none;}

LI{background: url("green_li.gif") left top no-repeat;}

LI UL LI{background: url("blue_li.gif") left top no-repeat;}

LI UL LI UL LI{background: url("red_li.gif") left top no-repeat;}

кстати, для более нетривиальных задач:
http://htmlcoder.visions.ru/JavaScript/?27

Чего все с ума что ли посходили? Я, например, на alesh.ru картинки меняю так

Код:

                        function changeImage(imageId){

                                i = document.getElementById('im');

                                if( i.width == 700 ){

                                        i.src = '/p/700/'+ imageId +'.jpg';

                                }else{

                                        i.src = '/p/500/'+ imageId +'.jpg';

                                }

                        }

и на кой? я ваще жс исключительно при динамике юзаю. скрыть.показать, текст поменять, прочее.
если есть ксс, жс ни к чему.

а, ну тогда, всё верно. только Css.

Цитата:

Сообщение от juggy

Чего все с ума что ли посходили? Я, например, на alesh.ru

Ты чего истерики закатываешь
все четко - для разных задач разные средства

KidsKilla, а можно по-подробнее?

Цитата:

UL{list-style:none;}
LI{background: url("green_li.gif") left top no-repeat;}
LI UL LI{background: url("blue_li.gif") left top no-repeat;}
LI UL LI UL LI{background: url("red_li.gif") left top no-repeat;}

Чет, я немного не понял, можно объяснить?

Цитата:

Сообщение от o-mega

KidsKilla, а можно по-подробнее?

Чет, я немного не понял, можно объяснить?

Представь себе матрешку. Длф каждой "под-матрешки" определяется новый стиль. :)

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

        <title>Списки</title>

<style type="text/css">

UL{list-style:none;}

.my-list LI{background: url("green_li.gif") left top no-repeat;}

.my-list LI UL LI{background: url("blue_li.gif") left top no-repeat;}

.my-list LI UL LI UL LI{background: url("red_li.gif") left top no-repeat;}

</style>

</head>

<body>

<ul>

        <li> 1й пункт списка 1й вложенности, зелёная картинка

        <ul>

                <li> 1й пункт списка 2й вложенности, синяя картинка

                <ul>

                        <li> 1й пункт списка 3й вложенности, красная картинка</li>

                        <li> 2й пункт списка 3й вложенности, красная картинка</li>

                </ul>

                </li>

                <li> 2й пункт списка 2й вложенности, синяя картинка </li>

                <li> 3й пункт списка 2й вложенности, синяя картинка </li>

        </ul>

        </li>

        <li> 2й пункт списка 1й вложенности, зелёная картинка </li>

        <li> 3й пункт списка 1й вложенности, зелёная картинка </li>

</ul>

</body>

</html>

Не, эт конечно хорошо, но у меня немного другая проблема.

Цитата:

{section name=i loop=$categories_tree}
{if $categories_tree[i].categoryID != 1}
{section name=j loop=$categories_tree max=$categories_tree[i].level-1}
 
{/section}
{if $categoryID == $categories_tree[i].categoryID}
{* selected node => point category and don't make a link *}
<font style="font-family:Verdana; font-size:11px; font-weight:bold"><IMG style="BACKGROUND-COLOR: #c1c1c1" height=10 width=10 alt="" src="images/squarelight.gif" border=0> {$categories_tree[i].name}</font><BR>
{else}
{* not selected node => make a link to a category *}
<a href="index.php?categoryID={$categories_tree[i].categoryID}" style="font-family:Verdana; font-size:11px; font-weight:normal"><IMG style="BACKGROUND-COLOR: #c1c1c1" height=10 width=10 alt="" src="images/squaremain.gif" border=0> {$categories_tree[i].name}</a><BR>
{/if}
{/if}
{/section}

Зеленая строка - там задается внешний вид меню. Основной + подменю. Короче - как это будет выглядить "со стороны", стандартно.
Есть еще строка (красный), куда указываешь количество отступлений для подменю. А синяя - активное меню или подменю.

Вот - всего 3 возможных поля. А мне нужно сделать так, чтобы стандартный рисунок (жирный) сделался вдруг так для подменю squaresub.gif . То есть - прописать в строке красной скрипт (мне думается, что это ява) который бы "подменил" рисунок. То есть - чтобы когда открыто подменю - основные разделы - синие кубики, а подменю - зеленые.
Реально ли это и насколько сложно?

всё ещё ничерта не понял, но може поможет:
http://siter.com.au/dmitry/tree.html

KidsKilla, короче - нужно задать строку, которая изменяла бы показываемый рисунок. То есть - если по умолчанию стоит 1.jpg то при обращении к скрипту (с помощью скрипта) картинка меняется на 2.jpg.
Никакие открывающиеся-закрывающиеся теги писать нет возможности. Это именно на уровне замены или указаний браузеру показывать другую картинку...

странный ты... я до сих пор не понял на кой чорт сток наворотов...
лан, попробуем так:
document.body.onLoad = function(){
var imgs = document.getElementsByTagName("img");
for(var i in imgs){
if(imgs[i].src == "1.jpg") imgs[i].src="2.jpg"
}
}

ну эт по всему доку.
если в пределах какого-то эл-та, то так:
var imgs = document.getElementById("elementID").getElementsByTagName("img");

В жс есть системный массив images[]. В нем все картинки их хтмл пронумерованы от нуля. Я жава скриптом рекламу на бесплатных хостнигах убираю.!)

Вообщем, сайтик выставил... http://uzzor.com/
Там есть меню боковое...
Вот его, когда открываешь - появляется подменю.
Значит кубик на основном меню - синий. На активном - зеленый. Но есть еще у меня черный, который хотелось бы выставить для всех подменюшек...

Посмотреть код меню можно выше - я писал... Думаю теперь будет ясно :) Значит в строке красной и нужно указать этот скрипт...

Кстати, KidsKilla, я пытался сделать по-твоему - нифига...

$#@$
это всё кссом делается в 2 счета. то что я те уже показывал. другое дело ты не смог прикрутить ;) да и с жсом та же пижня.