VPF::Загрузка изображения из фрейма во фрейм

Hardip

Дата 10.3.2012, 12:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 24.8.2010

Репутация: нет
Всего: нет

Есть форма с фреймами, слева один фрейм, справа разделенный на 11 рабочих квадратов для сбора картинки из разных частей (другие фреймы). В левом фрейме надо реализовать так, чтобы можно было выбрать определенный (любой на выбор) файл картинки (например 5), и чтобы его можно было загрузить в правую сторону тоже в любой фрейм (примерно картинка 1)

Код


<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>

Это правая часть, куда загружаются все изобржения. Левая сторона вот такая, в ней вот как раз и не получается..

Код


<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>
 



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

<form>
<img name="pic" src="image.png" width=60 height=90 alt="">
<select 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=top.4.url();" target="4"> 1 </A><br>
<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="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>

</HTML>

При попытке выборе слева цифры для загрузки в определенный фрейм, справа, он правильно определяет место, но картинку не загружает, выдает ошибку

Код


Вы попытались получить доступ к адресу file://localhost/C:/Users/007/Desktop/1/form.imagename.options[form.imagename.selectedIndex].value, который сейчас недоступен.

Кто знает как исправить?

Это сообщение отредактировал(а) Aliance - 21.5.2012, 09:38

Присоединённый файл ( Кол-во скачиваний: 6 )

2012_03_10_131506.jpg 58,86 Kb

Fynivx

Дата 10.3.2012, 16:03 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 72
Регистрация: 13.8.2011

Репутация: нет
Всего: 1

Было бы неплохо узнать, что именно вы хотите реализовать.
Не поделитесь секретом?

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

А еще могу порекомендовать никогда больше не использовать фрэймы. Это зло.

Hardip

Дата 10.3.2012, 21:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 24.8.2010

Репутация: нет
Всего: нет

Цитата(Fynivx @ 10.3.2012, 16:03)

Было бы неплохо узнать, что именно вы хотите реализовать.
Не поделитесь секретом?

Поделюсь

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

Это сообщение отредактировал(а) Hardip - 10.3.2012, 21:14

Fynivx

Дата 10.3.2012, 23:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 72
Регистрация: 13.8.2011

Репутация: нет
Всего: 1

Если цель именно сделать мозаику на жаваскрипт, оптимальный вариант, по-моему - таблица. Но уж точно не фреймы.

Для начала, сразу грузим таблицу с заранее размещенными случайным образом картинками. А потом...

Код


var current = 0;

function onClick(  ) {
    if ( current ) {
        var temp = this.src;
        this.src = document.getElementById( current ).src;
        document.getElementById( current ).src = temp;
        current = 0;
    } else current = this.id;
}

Эта функция привязывается на onclick ко всем картинкам, а им задаются идентификаторы. Любые кроме нулей.

Я давно на жаваскрипте не писал, так что извиняйте, если есть ошибки. Но в общем как-то так. Просто обмен картинками.

Добавлено через 4 минуты и 15 секунд
Ой. Я не совсем правильно понял, кажется. Для чего именно эта мозаика?

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

Hardip

Дата 19.5.2012, 21:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 24.8.2010

Репутация: нет
Всего: нет

У меня почти получилось: Вот что сделал.

Код


<html>
<head>
<title>Главная</title>
<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 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>

Вот только не получается выбрать картинку и передать её занрузку во фрейм

Код


<HTML>
 <HEAD>
 <TITLE>Моя работа</TITLE>
<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 document.forms[0].imagename.options[document.forms[0].imagename.selectedIndex].value;
}
</script>

 </HEAD>
 <BODY> 



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

<form>
<img name="pic" src="image.png" width=60 height=90 alt="">
<select 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=top.1-2.url()" target="1-2"> 2 </A><br>
<!-- <a href="javascript:location.href='http://site.com'" target="4">link</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>

Мне кажется что ошибка где - то

Код


<A HREF="javascript:location=top.1-2.url()" target="1-2"> 2 </A><br>

Как можно исправить?

Aliance

Дата 21.5.2012, 09:40 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Значения атрибутов name и id рекомендуется начинать с буквы, а не цифры.

И что значит этот код:

Код


<A HREF="form.imagename.options[form.imagename.selectedIndex].value" target="4">4</A><br>

Прочитайте про тег a (в частности про его атрибут href).

Добавлено через 1 минуту и 49 секунд

Код


top.1-2.url()

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

Код


[document.]location.href

Как получить кроссбраузерно ссылку на document фрейма можно прочитать в моей статье "ОКНА И ФРЕЙМЫ" на данном форуме.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »