Фото+Имя

Apostolati · January 11, 2010

Задача состоит в том чтобы изменять пропорционально фотографии имя изображённого на ней, имя является ссылкой!

Вот написанный мною код для элемента и перелистывания фотографии.

<script type="text/javascript">
var num=1
 img1 = new Image ()
 img1.src = "foto1.gif"
 img2 = new Image ()
 img2.src = "foto2.gif"

 img3 = new Image ()
 img3.src = "foto3.gif"
 img4 = new Image ()
 img4.src = "foto4.gif"

 img5 = new Image ()
 img5.src = "foto5.gif"
 img6 = new Image ()
 img6.src = "foto6.gif"

 img7 = new Image ()
 img7.src = "foto7.gif"
 img8 = new Image ()
 img8.src = "foto8.gif"

function slideshow()

	{
 num=num+1
 if (num==9)
 {num=1}
 document.foto.src=eval("img"+num+".src")

}
function slideshow2()
	{
 num=num-1
 if (num==0)
 {num=8}
 document.foto.src=eval("img"+num+".src")

}
</script>
</head>

<body>
<div id="eki">
<img src="eki.gif" id="c1">
<img src="foto1.gif" id="foto" name="foto">
<a href="java script:slideshow()"><img src="tuda.gif" id="tuda" ></a>
<a href="java script:slideshow2()"><img src="suda.gif" id="suda"></a>
<span style="position:relative; top:-305px; left:-385px; font-family: Arial; font-style:italic; color:#004bd8; font-weight:bold; font-size:18pt;"> Экипаж </span>
<div id="dolg" name="dolg"><a href="#" Style="color:#004bd8; font-family: Tahoma; font-weight:bold;" name="nm"> Валерий Заславский</a> свободный тример<div>
</div>

</body>
</html>

Перерыл весь форум но так и не нашёл ответ на вопрос. Может быть кто нибудь намекнёт как решить проблему? Очень хотелось бы научится делать такие скрипты.

Вот код CSS файла:

#foto	{
	position:relative; top:-143px; left:-177px;
}

#tuda	{
	position:relative; top:-205px; left:-177px;

}
#suda	{
	position:relative; top:-205px; left:-362px;
}
a:link {
	border-bottom-width:0px;
	border-bottom-color:#FFF;
	color:#FFF;
}
a:active {
	border-bottom-width:0px;
	border-bottom-color:#FFF;
	color:#FFF;
}
a:visited {
	border-bottom-width:0px;
	border-bottom-color:#FFF;
	color:#FFF;

}
#dolg	{
	position:relative; top:-140px;left:20px;
	width:200px;
}

Great Rash · January 11, 2010

Я вообще ничего не понял... можно подробней и с картинками?

Apostolati · January 11, 2010

Необходимо создать вот такое меню, код приведённый выше перелистывает фотографии...надо как то сделать так чтобы вместе с фотографиями соответственно менялись имена! Заранее благодарю за внимание к проблеме!

s0rr0w · January 11, 2010

Необходимо создать вот такое меню, код приведённый выше перелистывает фотографии...надо как то сделать так чтобы вместе с фотографиями соответственно менялись имена! Заранее благодарю за внимание к проблеме!

Сделать набор дивов, которые содержат картинки и имена.

И менять их свойство display.

Edited January 11, 2010 by s0rr0w

hf3 · January 11, 2010

Или просто занести имя сразу в картинку

з.ы. А кто такой триммер?) Чисто ради повышения общего образовательного уровня)

s0rr0w · January 11, 2010

Или просто занести имя сразу в картинку
з.ы. А кто такой триммер?) Чисто ради повышения общего образовательного уровня)

«свободный триммер» в Google.

hf3 · January 11, 2010

«свободный триммер» в Google.

Сам то смотрел на выдачу? Там про какую хрень для обработки видео, а судя по скрину выше - это какой то человек в каком то экипаже.

И вообще посылать в гугл неприлично.

AndreyT · January 12, 2010

Сделайте два массива в первом пути к картинкам во втором имена к ним

пример

var images = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg");

var names = new Array("name1","name2","name3","name4"):

var obImg = document.getElementById("divForImg").innerHTML = images[0];

var obName = document.getElementById("divForName").innerHTML = names[0];

Apostolati · January 13, 2010

2е суток борьбы так и не дали результата с этим кодом. Метод который посоветовал sOrrOw привел к появлению вот такого вот огромного HTML кода:

<div><img src="foto6.gif"><div style="width:200px"><a href="#" class="nam">Агний Геворкян</a>
главный по тостам</div><a href="#"><img src="tuda.gif" class="tuda"></a><a href="#"><img src="suda.gif" class="suda"></a><div style="position:relative; top:-206px;display:none;"><img src="foto5.gif"><div style="width:200px;display:none;"><a href="#" class="nam">Аристарх Заславский</a>
свободный вымер</div><a href="#"><img src="tuda.gif" class="tuda"></a><a href="#"><img src="suda.gif" class="suda"></a><div style="position:relative; top:-206px;"> <img src="foto4.gif"><div style="width:200px"><a href="#" class="nam">Валерий Pftdcrbq</a>
свободный гимер</div><a href="#"><img src="tuda.gif" class="tuda"></a><a href="#"><img src="suda.gif" class="suda"></a><div style="position:relative; top:-206px;display:none;"><img src="foto3.gif"><div style="width:200px"><a href="#" class="nam">Виниамин Бардакский</a>
 не свободный тример</div><a href="#"><img src="tuda.gif" class="tuda"></a><a href="#"><img src="suda.gif" class="suda"></a><div style="position:relative; top:-206px;display:none;"><img src="foto2.gif"><div style="width:200px"><a href="#" class="nam">Пётр Бухарский</a>
главный алкоголик</div><a href="#"><img src="tuda.gif" class="tuda"></a><a href="#"><img src="suda.gif" class="suda"></a> <div style="position: relative; top:-206px;"><img src="foto1.gif"><div style="width:200px"><a href="#" class="nam">Валерий Заславский</a>
свободный тример</div><a href="#"><img src="tuda.gif" class="tuda"></a><a href="#"><img src="suda.gif" class="suda"></a></div></div></div></div></div></div>

Можно его немного сократить посредством применения классов, но всёравно возникает проблемма что если задать для верхнего в иерархии div елемента diplsay:none мы скрываем и все дочернии дивы.

Через inerHTML не получается задать именно разбитие на ссылку и простой текст, так что опускаются руки....

Вообще как мне кажется такие меню лучше реализовывать через флеш, несмог найти и примеров подобных этим в гугле....

hf3 · January 13, 2010

адать для верхнего в иерархии div елемента diplsay:none мы скрываем и все дочернии дивы.

Изначально всем назначить none , а потом нужному блок, а остальным none

Через inerHTML

…иннерХТМЛ += ' текст <a> ссылка </a>'

Либо дивы вместо спанов - тогда можно без БР /

Apostolati · January 13, 2010

Изначально необходимо чтобы был виден хотя бы 1 блок. Во вторых все блоки являются взаимовложенными и допустим блок 1о уровня содержит 6ю или 1ю картинку, разницы нету, а все остальные вложены уже как матрёшки в него!если мы зададим второму блоку видимость(содержащему картинку 2 или 5) а старшему блоку через дисплей мы зададим невидимость то дочерний его блок с картинкой 2 или 5 всё равно будет невиден!

Edited January 13, 2010 by Apostolati

Nekromancer · January 13, 2010

так, первый код особо не читал.. но может так..:

var myImg = 0;
var nameArr = ['vasea','petea'];

var addNextImg = function(){
 if(myImg!=nameArr.length-1){
  myImg++;
  insertCode();
 }
};
var addPrevImg = function(){
 if(myImg!=0){
  myImg--;
  insertCode();
 }
};

var insertCode = function(){
 var elem = document.getElementById('target');
 elem.innerHTML = '<img src="foto'+myImg+'.gif" alt="'+nameArr[myImg]+'" title="'+nameArr[myImg]+'" style="width: 200px; height: 400px;"><br><a href="foto'+myImg+'.gif">'+nameArr[myImg]+'</a>'
}

window.onload = function(){
insertCode();
}

<div id="prevImg" onClick="addPrevImg"></div>
<div id="target"></div>
<div id="nextImg" onClick="addNextImg"></div>

примерно так.. ну конечно лучше сделать как вам больше нравится.. я всего лишь сделал примерно то, что вы хотели в начале, но у вас не получилось..

hf3 · January 13, 2010

Во вторых все блоки являются взаимовложенными и допустим блок 1о уровня содержит 6ю или 1ю картинку, разницы нету, а все остальные вложены уже как матрёшки в него!

Почему это матрешкой? Все блоки должны быть братьями и сестрами - т.е. имметь одного родителя.

Apostolati · January 13, 2010

Почему это матрешкой? Все блоки должны быть братьями и сестрами - т.е. имметь одного родителя.

А как тогда мы будем к ним обращаться? при вложенном подходе мы можем найти нужный нам блок через parenNode, и если зададим на каждом из блоков ссылки вперёт и назат, то сможем через next/priviosSibling обратится к старшему и младшему в иерархии блоку.

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

Nekromancer · January 13, 2010

Задача состоит в том чтобы изменять пропорционально фотографии имя изображённого на ней, имя является ссылкой!

Необходимо создать вот такое меню, код приведённый выше перелистывает фотографии...надо как то сделать так чтобы вместе с фотографиями соответственно менялись имена! Заранее благодарю за внимание к проблеме!

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

Apostolati · January 13, 2010

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

Имеется меню состоящие из фотографии под фотографией располагается имя и должность изображённого на фотографии, по бокам от фото 2 стрелочки, при нажатии на которую перелистывается фотография и соответственно изменяется имя и должность изображённого,имя приэтом является ссылкой на досье изображённого. В паре постов выше имеется наглядная иллюстрация как это должно выглядеть

Nekromancer · January 13, 2010

допустим файл "info0.htm" - первое досье, а файл foto0.gif - первое фото.

js code

var myImg = 0;
var nameArr = ['vasea','petea']; //массив с именами

var addNextImg = function(){ //функция смены номера фотографии в + и вызова функции смены
 if(myImg!=nameArr.length-1){
  myImg++;
  insertCode();
 }
};
var addPrevImg = function(){ //функция смены номера фотографии в - и вызова функции смены
 if(myImg!=0){
  myImg--;
  insertCode();
 }
};

var insertCode = function(){ //функция самой смены
 var elem = document.getElementById('targetDiv');
with( elem.getElementsByTagName('img')[0]){ //выбираем картинку и меняем ей параметры
 setAttribute('src', 'foto'+myImg+'.gif'); 
 src = 'foto'+myImg+'.gif';
 setAttribute('alt', nameArr[myImg]);
 setAttribute('title', nameArr[myImg]);
}
with (elem.getElementsByTagName('a')[0]){
 setAttribute('href', 'info'+myImg+'.htm');
 href = 'info'+myImg+'.htm';
 innerHTML = nameArr[myImg];
}

};

window.onload = function(){ // по загрузке выполнить функцию
insertCode();
}

html code

<div id="linksBlock">
<div id="prevImg" onClick="addPrevImg()">Предыдущее</div>
<div id="targetDiv"><img src="" alt="" title=""><br><a href="#"></a></div>
<div id="nextImg" onClick="addNextImg()">Следующее</div>

всё проверил, всё работает

Edited January 13, 2010 by Nekromancer

hf3 · January 13, 2010

А как тогда мы будем к ним обращаться?

Вариантов масса - простейший - через ID - getElementbyId("")

Apostolati · January 14, 2010

Nekromancer спасибо большущее за код и его подробные пояснения!!!

Nekromancer · January 14, 2010

Nekromancer спасибо большущее за код и его подробные пояснения!!!

всегда пожалуйста Ну почти всегда

Sign In

Фото+Имя

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information