1. Alina - 27 Января, 2004 - 10:05:44 - перейти к сообщению
Здравствуйте, ТвойWeb! Мне нужно сделать так, чтобы маленькая картинка(фото) раскрывала ссылку в новом окне(большая картинка). Я нашла и списала образцы скриптов, но ничего у меня не вышло, выдается сообщение - ошибка сценария. Что делать?
2. TvoyWeb - 27 Января, 2004 - 13:49:13 - перейти к сообщению
Alina, для этого не обязательно использовать скрипт.
Есть например простой способ на HTML.
Вот посмотрите;
Здесь
Это маленькая картинка. Где "pic.gif" путь к файлу маленькой картинки. В данном примере считается что маленькая картинка находится в той же папке , что и страница на которой находится эта маленькая картинка.
Это альтернативный текст, который будет виден пока картинка не закрузится или если у пользователя в браузере отключена функция показа графики на странице.
Это ширина и высота маленькой картинки в пикселях. Вы можете не указывать этих размеров, но в этом случае пока картинка не загрузится в кеш, браузер не будет знать ее истинных размеров и текст и другие элементы страницы могут быть смещены и место картинки будет иметь размер в котором должен поместиться альтернативный текст.
Что не очень красиво. советую прописывать размеры картинки, тогда браузер сразу будет знать что это место занято и расположит все элементы так как надо.
Это толщина рамки картинки. Если картинка не является ссылкой то этот параметр можно опустить, но если картинка является ссылкой и если этот параметр опустить, то у картинки появится рамка синего (обычно) цвета толщиной в 1px. Что в некоторых случаях выглядит некрасиво.
Код самой ссылки. Где
Наверное уже догадались? Это путь до большой картинки. В данном примере считается что и большая картинка находится в одной папке со страницей на которой находится ссылка на эту картинку. Если же картинка находится в другой папке, то нужно указать путь до этой папки.
Этот параметр откроет ссылку в новом окне. То что Вам и нужно.
Это текст который будет выведен во всплывающей подсказке, при наведении курсора на маленькую картинку.
Ну
Закрывающий тег гиперссылки, объявляющий о том что тело ссылки закончено.
Есть конечно и более навороченные варианты на Javascript, но думаю для начала Вам этого хватит.
Просто все нужно начинать с азов!
Есть например простой способ на HTML.
Вот посмотрите;
CODE:
<a href="big_pic.gif" target="_blank" title="Кликните чтобы увеличить.">
<img src="pic.gif" alt="Кликните чтобы увеличить." width="75" height="100" border="0"></a>
<img src="pic.gif" alt="Кликните чтобы увеличить." width="75" height="100" border="0"></a>
Здесь
CODE:
<img src="pic.gif" alt="Кликните чтобы увеличить." width="75" height="100" border="0">
Это маленькая картинка. Где "pic.gif" путь к файлу маленькой картинки. В данном примере считается что маленькая картинка находится в той же папке , что и страница на которой находится эта маленькая картинка.
CODE:
alt="Кликните чтобы увеличить."
Это альтернативный текст, который будет виден пока картинка не закрузится или если у пользователя в браузере отключена функция показа графики на странице.
CODE:
width="75" height="100"
Это ширина и высота маленькой картинки в пикселях. Вы можете не указывать этих размеров, но в этом случае пока картинка не загрузится в кеш, браузер не будет знать ее истинных размеров и текст и другие элементы страницы могут быть смещены и место картинки будет иметь размер в котором должен поместиться альтернативный текст.
Что не очень красиво. советую прописывать размеры картинки, тогда браузер сразу будет знать что это место занято и расположит все элементы так как надо.
CODE:
border="0"
Это толщина рамки картинки. Если картинка не является ссылкой то этот параметр можно опустить, но если картинка является ссылкой и если этот параметр опустить, то у картинки появится рамка синего (обычно) цвета толщиной в 1px. Что в некоторых случаях выглядит некрасиво.
CODE:
<a href="big_pic.gif" target="_blank" title="Кликните чтобы увеличить.">
Код самой ссылки. Где
CODE:
href="big_pic.gif"
Наверное уже догадались? Это путь до большой картинки. В данном примере считается что и большая картинка находится в одной папке со страницей на которой находится ссылка на эту картинку. Если же картинка находится в другой папке, то нужно указать путь до этой папки.
CODE:
target="_blank"
Этот параметр откроет ссылку в новом окне. То что Вам и нужно.
CODE:
title="Кликните чтобы увеличить."
Это текст который будет выведен во всплывающей подсказке, при наведении курсора на маленькую картинку.
Ну
CODE:
</a>
Закрывающий тег гиперссылки, объявляющий о том что тело ссылки закончено.
Есть конечно и более навороченные варианты на Javascript, но думаю для начала Вам этого хватит.
Просто все нужно начинать с азов!
3. Alina - 28 Января, 2004 - 11:52:31 - перейти к сообщению
Спасибо, ТвойWeb! Я, очевидно, плохо сформулировала вопрос. Речь идет не о новом окне вообще, а о маленьком окошке с параметром var win (или без оного). Я хочу, чтобы окошко открывалось на той же странице, без menubar, scrollbars и т.п. Я не владею Java, и написать скрипт не могу, хотела получить подсказку, где и как прописать функцию и объект.
4. TvoyWeb - 28 Января, 2004 - 13:54:34 - перейти к сообщению
Alina, все понятно! Надо было сразу написать, что окно должно быть с определнными свойствами. Ну да ладно. 
Сделать это можно несколькими способами.
Можно создать функцию и потом вызывать ее в ссылках передавая функции свойства нового окна, можно не создавая функции, использовать готовую для этого функцию в яваскрипт.
Для открытия нового окна в яваскрипт есть функция window.open(URL,Name,features), которая имеет три аргумента (я не силен в терминологии поэтому может быть и неправильно выражаюсь).
1. URL - путь до документа (html страница, изображение...). Он может быть как абсолютный так и относительный. (об абсолютных и относительных ссылках читайте на сайте)
2. Name - имя для нового окна, необходимое если к этому окну будут в последствии обращаться. Если новых обращений к этому окну не будет, то можно оставить этот аргумент пустым.
3. features - совокупность всех свойств нового окна. Именно здесь прописываются ширина, высота окна, наличие скролбара, менюбара ит.д.. Все свойства записываются через запятую, путем перечисления свойств.
Готовая к работе функция выглядет примерно так:
Каждый аргумент берется в одинарные кавычки. Видите в третьем аргументе перечисление всех свойств окна тоже взято в одинарные кавычки, так как это один единый третий аргумент функции. Вышеперечисленные свойства, кроме свойств width и height, могут принимать значения yes и no или "0" и "1", это то же самое что и yes и no. Если одно из свойств имеет значение no, то его можно просто не писать. Например нам надо открыть окно без полосы прокрутки, без возможности изменять размеры окна, без меню инструметов, без адресной строки и строки статуса, и чтоб высота окна была например 350 px а ширина 430 px, то можно просто написать так:
Но многие свойства нового окна работают только в IE. например запрет изменения размеров окна и запрет показа полосы прокрутки не работает в Opera. Ну вообщем понятно?
Теперь как все таки вызвать функцию, чтобы при нажатии на ссылку открывалось новое окно. Можно сделать так:
Здесь картинка "big_foto.jpg" откроется в новом окне без всех свойств и размерами 400х400, после нажатия на картинку "mini_foto.jpg"
Но лучше и правильнее сделать так:
Эффект тот же самый.
Сделать это можно несколькими способами.
Можно создать функцию и потом вызывать ее в ссылках передавая функции свойства нового окна, можно не создавая функции, использовать готовую для этого функцию в яваскрипт.
Для открытия нового окна в яваскрипт есть функция window.open(URL,Name,features), которая имеет три аргумента (я не силен в терминологии поэтому может быть и неправильно выражаюсь).
1. URL - путь до документа (html страница, изображение...). Он может быть как абсолютный так и относительный. (об абсолютных и относительных ссылках читайте на сайте)
2. Name - имя для нового окна, необходимое если к этому окну будут в последствии обращаться. Если новых обращений к этому окну не будет, то можно оставить этот аргумент пустым.
3. features - совокупность всех свойств нового окна. Именно здесь прописываются ширина, высота окна, наличие скролбара, менюбара ит.д.. Все свойства записываются через запятую, путем перечисления свойств.
Готовая к работе функция выглядет примерно так:
CODE:
window.open('index.html','novoe','toolbar=yes,location=yes,status=yes,
menubar=yes,scrollbars=yes,resizable=yes,width=400,height=400')
menubar=yes,scrollbars=yes,resizable=yes,width=400,height=400')
Каждый аргумент берется в одинарные кавычки. Видите в третьем аргументе перечисление всех свойств окна тоже взято в одинарные кавычки, так как это один единый третий аргумент функции. Вышеперечисленные свойства, кроме свойств width и height, могут принимать значения yes и no или "0" и "1", это то же самое что и yes и no. Если одно из свойств имеет значение no, то его можно просто не писать. Например нам надо открыть окно без полосы прокрутки, без возможности изменять размеры окна, без меню инструметов, без адресной строки и строки статуса, и чтоб высота окна была например 350 px а ширина 430 px, то можно просто написать так:
CODE:
window.open('index.html','novoe','width=400,height=400')
Но многие свойства нового окна работают только в IE. например запрет изменения размеров окна и запрет показа полосы прокрутки не работает в Opera. Ну вообщем понятно?
Теперь как все таки вызвать функцию, чтобы при нажатии на ссылку открывалось новое окно. Можно сделать так:
CODE:
<a href="Javascript:window.open('big_foto.jpg','novoe','width=400,height=400');">
<img src="mini_foto.jpg" border="0"></a>
<img src="mini_foto.jpg" border="0"></a>
Здесь картинка "big_foto.jpg" откроется в новом окне без всех свойств и размерами 400х400, после нажатия на картинку "mini_foto.jpg"
Но лучше и правильнее сделать так:
CODE:
<a href="Javascript:void(0)" onClick="window.open('big_foto.jpg','novoe','width=400,height=400');">
<img src="mini_foto.jpg"></a>
<img src="mini_foto.jpg"></a>
Эффект тот же самый.
5. Alina - 29 Января, 2004 - 09:07:05 - перейти к сообщению
Уважаемый ТвойWeb! К сожалению, проблема не решилась. Браузер(у меня IE) выдает сообщение: Ошибка - предполагается наличие ';' , и что бы я не предпринимала, какая-нибудь ошибка все равно присутствует. Страница грузится, но ссылка не работает. Я(чайник), наверное, неправильно пишу скрипт. Если можно, порекомендуйте какой-нибудь очень простой и доходчивый учебник. Спасибо
6. TvoyWeb - 29 Января, 2004 - 12:51:45 - перейти к сообщению
Alina, приведите здесь, код скрипта и код Вашей ссылки, которая не работает.
7. Alina - 01 Февраля, 2004 - 03:54:28 - перейти к сообщению
Уважаемый ТвойWeb! Большое спасибо за помощь. Ошибку я нашла сама. и теперь все работает.
Alina
Alina
8. ETC - 01 Февраля, 2004 - 09:09:53 - перейти к сообщению
Alina
Как хорошо, что всё хорошо кончается
Как хорошо, что всё хорошо кончается