PDA

Просмотр полной версии : Js: замена рисунков

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

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

Спасибо!
KidsKilla
31.08.2005, 13:55
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;}
ninja_127
31.08.2005, 17:19
кстати, для более нетривиальных задач:
http://htmlcoder.visions.ru/JavaScript/?27
juggy
31.08.2005, 19:14
Чего все с ума что ли посходили? Я, например, на 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';
}
}
KidsKilla
31.08.2005, 19:16
и на кой? я ваще жс исключительно при динамике юзаю. скрыть.показать, текст поменять, прочее.
если есть ксс, жс ни к чему.
juggy
31.08.2005, 19:17
а, ну тогда, всё верно. только Css.
ninja_127
31.08.2005, 19:36
Чего все с ума что ли посходили? Я, например, на alesh.ru
Ты чего истерики закатываешь
все четко - для разных задач разные средства
o-mega
31.08.2005, 23:59
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;}

Чет, я немного не понял, можно объяснить?
Илья К
01.09.2005, 05:57
KidsKilla, а можно по-подробнее?


Чет, я немного не понял, можно объяснить?Представь себе матрешку. Длф каждой "под-матрешки" определяется новый стиль. :)
KidsKilla
01.09.2005, 15:00
<!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>
o-mega
02.09.2005, 18:19
Не, эт конечно хорошо, но у меня немного другая проблема.


{section name=i loop=$categories_tree}
{if $categories_tree[i].categoryID != 1}
{section name=j loop=$categories_tree max=$categories_tree[i].level-1}
&nbsp;
{/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>&nbsp;{$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>&nbsp;{$categories_tree[i].name}</a><BR>
{/if}
{/if}
{/section}


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

Вот - всего 3 возможных поля. А мне нужно сделать так, чтобы стандартный рисунок (жирный) сделался вдруг так для подменю squaresub.gif . То есть - прописать в строке красной скрипт (мне думается, что это ява) который бы "подменил" рисунок. То есть - чтобы когда открыто подменю - основные разделы - синие кубики, а подменю - зеленые.
Реально ли это и насколько сложно?
KidsKilla
02.09.2005, 20:18
всё ещё ничерта не понял, но може поможет:
http://siter.com.au/dmitry/tree.html
o-mega
02.09.2005, 23:02
KidsKilla, короче - нужно задать строку, которая изменяла бы показываемый рисунок. То есть - если по умолчанию стоит 1.jpg то при обращении к скрипту (с помощью скрипта) картинка меняется на 2.jpg.
Никакие открывающиеся-закрывающиеся теги писать нет возможности. Это именно на уровне замены или указаний браузеру показывать другую картинку...
KidsKilla
02.09.2005, 23:06
странный ты... я до сих пор не понял на кой чорт сток наворотов...
лан, попробуем так:
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");
TERRORist
02.09.2005, 23:18
В жс есть системный массив images[]. В нем все картинки их хтмл пронумерованы от нуля. Я жава скриптом рекламу на бесплатных хостнигах убираю.!)
o-mega
04.09.2005, 22:43
Вообщем, сайтик выставил... http://uzzor.com/
Там есть меню боковое...
Вот его, когда открываешь - появляется подменю.
Значит кубик на основном меню - синий. На активном - зеленый. Но есть еще у меня черный, который хотелось бы выставить для всех подменюшек...

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

Кстати, KidsKilla, я пытался сделать по-твоему - нифига...
KidsKilla
05.09.2005, 22:50
$#@$
это всё кссом делается в 2 счета. то что я те уже показывал. другое дело ты не смог прикрутить ;) да и с жсом та же пижня.