Javascript-форум - вложенные фреймы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - вложенные фреймы (https://javascript.ru/forum/dom-window/12088-vlozhennye-frejjmy.html)

вложенные фреймы

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

<p><a href="http://google.ru" target="my-frame">test</a></p>
<iframe id="my-frame"></iframe>

да все так и есть, все работает:thanks: , а можно ли вместо URL указать значение взятое из select, чтобы ссылка открывала в нужном фрейме картинку выбранную в селекторе?:)

Можно. По событию селекта change изменяйте значение свойства href элемента ссылки на select.options[select.selectedIndex].value.

Для решения задачи возможно пригодится следующий материал:
http://javascript.ru/tutorial/dom/search
http://javascript.ru/tutorial/events...-obrabotchikov

более менее понятно, но в чем моя ошибка?

<HTML>
  <HEAD>
     <TITLE>Задание 6</TITLE>
<script language="JavaScript">
<!--
function changeImage(form) {
var selection = form.mySelect.options[form.mySelect.selectedIndex].value;
document.images['pic'].src = selection;
}


//-->
</script> 
 </HEAD>
  <BODY> 

<br>

Выберите картинку

<form name="form1">
<img name="pic" src="image.gif" width=60 height=90 alt="">
<select id="mySelectId" size=1 name="mySelect" onChange="changeImage(this.form)">
<option selected value="1.gif">1</option>
<option value="2.gif">2</option>
<option value="3.gif">3</option>
<option value="4.gif">4</option>
<option value="5.gif">5</option>
<option value="6.gif">6</option>
<option value="7.gif">7</option>
<option value="8.gif">8</option>
<option value="9.gif">9</option>
<option value="10.gif">10</option>
<option value="11.gif">11</option>
</select>
</form>

<br>


<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame12"> 1 </A><br> 
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame13">2</A><br>
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame9">3</A><br>
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame10">4</A><br>
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame11">5</A><br>
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame6">6</A><br>
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame7">7</A><br>
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame8">8</A><br>
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame5">9</A><br>
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame4">10</A><br>
<A HREF="form.mySelect.options[select.selectedIndex].value" target="frame3">11</A><br>
<br>
<br>
<br>

 </BODY>
</HTML>

Не совсем понятно, зачем тогда ссылки нужны.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Задание 6</title>
</head>
<body>
	<label for="image-selector">Выберите картинку</label>
	<select id="image-selector" onchange="changeImage(this)">
		<option selected value="http://javascript.ru/forum/images/smilies/smile.gif">:)</option>
		<option value="http://javascript.ru/forum/images/smilies/sad.gif">:(</option>
		<option value="http://javascript.ru/forum/images/smilies/wink.gif">;)</option>
	</select>
	<img id="image" src="http://javascript.ru/forum/images/smilies/smile.gif" alt="">
	<script>
		var image = document.getElementById("image");
		function changeImage(select) {
			image.src = select.options[select.selectedIndex].value;
		}
	</script>
</body>
</html>

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

Каждый фрейм только для того, чтобы показать картинку? Может быть лучше сделать табличку с изображениями и менять src?

желательно во фреймах

Цитата:

Сообщение от Octane (Сообщение 72415)

<p><a href="http://google.ru" target="my-frame">test</a></p>
<iframe id="my-frame"></iframe>

всё вроде бы так, но надо наверное так:

<p><a href="http://google.ru" target="my-frame">test</a></p>
<iframe name="my-frame"></iframe>

а то в новой вкладке открывает...

мне нужно реализовать задачку:чтобы в форме (расположенной во фрейме) существовала возможность выбора (SELECT) любого элемента мозаики и возможность выбора любого фрейма. необходимо сделать так, чтобы выбранный элемент мозаики загружался бы в выбранный фрейм. вот по этому я использую еще и фреймы, которые загруженны во второй фрейм, а селектор находится с сылками на iframe в первом фрейме)) вот такой вот хоровот фреймов;)

всем большое спасибо за помощь все было реализованно с помощью функции:

function url()
{
return document.forms[0].imagename.options[document.forms[0].imagename.selectedIndex].value;
}

А ссылки на фрэймы описала так

<A HREF="javascript:location=top.frame1.url();" target="frame12"> 1 </A><br>

:)

А можно подробнее как вы это реализовали? Особенно про эту строку

<A HREF="javascript:location=top.frame1.url();" target="frame12"> 1 </A><br>

Про свойство top.frame1. Что такое top ? У меня нету такого фрейма, вот выкладываю свою модификацию, но она почему то не работает :)

<HTML>
 <HEAD>
 <TITLE>Моя работа</TITLE>
<script language="JavaScript">
<!--
function changeImage(form) {
selection = form.imagename.options[form.imagename.selectedIndex].value;
document.images['pic'].src = selection;
}
//-->
</script>
 </HEAD>
 <BODY> 



Загрузка картинок

<form>
<img name="pic" src="image.png" width=60 height=90 alt="">
<select multiple size=11 name="imagename" onChange="changeImage(this.form)">
<option value="img/1.png">1</option>
<option value="img/2.png">2</option>
<option value="img/3.png">3</option>
<option value="img/4.png">4</option>
<option value="img/5.png">5</option>
<option value="img/6.png">6</option>
<option value="img/7.png">7</option>
<option value="img/8.png">8</option>
<option value="img/9.png">9</option>
<option value="img/10.png">10</option>
<option value="img/11.png">11</option>
</select>
</form>




<A HREF="javascript:location=left.1-1.url();" target="1-1"> 1 </A><br>
<A HREF="javascript:location=left.1-2.url();" target="1-2"> 2 </A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="3">3</A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="4">4</A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="5">5</A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="6">6</A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="7">7</A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="8">8</A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="9">9</A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="10">10</A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="11">11</A><br>
<br>
<br>
<br>
 </BODY>
</HTML>

<html>
<head>
<title>Главная</title>
<script language="JavaScript">
function changeImage(form) {
selection = form.imagename.options[form.imagename.selectedIndex].value;
document.images['pic'].src = selection;
}
function url()
{
 return document.forms[0].imagename.options[document.forms[0].imagename.selectedIndex].value;
}
</script>
</head>
<frameset rows="1*" cols="10%, 90%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
    <frame name="contents" scrolling="auto" marginwidth="0" marginheight="0" src="left.htm">
    <frameset rows="18, 18*">
	<frameset cols="120,60,*></frameset>
	    <frame name="0" src="0.htm" marginwidth="0" marginheight="0">
        <frame name="1" src="1.htm" marginwidth="0" marginheight="0"> 
		<frame name="1-1" src="1-1.htm" marginwidth="0" marginheight="0">
		<frame name="1-2" src="1-2.htm" marginwidth="0" marginheight="0">	
    </frameset>
	<frameset cols="60,60,60,*" rows="100, 100, 100, *">
    <frame name="3" src="3.htm" marginwidth="0" marginheight="0">
	<frame name="4" src="4.htm" marginwidth="0" marginheight="0">
    <frame name="5" src="5.htm" marginwidth="0" marginheight="0">	
	<frame name="6" src="6.htm" marginwidth="0" marginheight="0">
    <frame name="7" src="7.htm" marginwidth="0" marginheight="0">
	<frame name="8" src="8.htm" marginwidth="0" marginheight="0">
    <frame name="9" src="9.htm" marginwidth="0" marginheight="0">
	<frame name="10" src="10.htm" marginwidth="0" marginheight="0">
    <frame name="11" src="11.htm" marginwidth="0" marginheight="0">
	<frame name="12" src="12.htm" marginwidth="0" marginheight="0">
    <frame name="13" src="13.htm" marginwidth="0" marginheight="0">	
	<frame name="14" marginwidth="0" marginheight="0">
    <frame name="15" marginwidth="0" marginheight="0">
	<frame name="16" marginwidth="0" marginheight="0">
    <frame name="17" marginwidth="0" marginheight="0">	
	 </frameset>  
    <noframes>
 </frameset>

Если кто поможет буду благодарен:)

В общем по сути нужно чтобы именно определенная картинка загружалась в нужное место
Вот так

<a href="javascript:load('8.htm')">first</a>

<script language="JavaScript">
function load(url) {
  parent.F.location.href= url;
}
</script>

во фрейм F загружается и работает 8.htm. Как выбрать именно из списка

<script language="JavaScript">
function changeImage(form) {
selection = form.imagename.options[form.imagename.selectedIndex].value;
document.images['pic'].src = selection;
}
</script>

<script language="JavaScript">
function url()
{
 return form.imagename.options[forms.imagename.selectedIndex].value;
}
</script>

нужную мне картинку ?