Html — при нажатии на картинку не открывается в новом окне


Содержание

Как открыть изображение в новом окне?

Вы наверное сталкивались с проблемой открытия больших изображений? В рамках сайта это не всегда удобно, так как либо необходимо использовать скрипт галереи, либо перекрывать изображением контент. Указанный в статье скрипт позволяет при нажатии на изображении открыть его в новом окне в полном размере. Это удобно при просмотре больших изображений: карт, макетов и тд.

Попробуйте кликнуть по изображению в демонстрации.

Код JavaScript (вставлять между тегами и ):

Код HTML (вставлять между тегами и ):

Как сделать, чтобы ссылки открывались в новом окне или на новой вкладке

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

Что вам потребуется

Посетитель не уточнил, каким редактором пользуется, поэтому будем считать, что он работает напрямую в HTML . Но это не значит, что вы не сможете следовать этой инструкции, если используете для создания сайта какой-либо визуальный редактор. Просто нужно будет получить доступ к разметке страницы. Большинство редакторов и блог-платформ позволяют вручную отредактировать HTML-код .

Например, если вы работаете в Expression Web , можно отредактировать код страницы, переключившись в « Режим кода » ( Code mode ).

Как настроить открытие ссылок в новой вкладке или в новом окне браузера

Короткий ответ: просто добавьте к своим ссылкам (тегу ) атрибут target=»_blank» .

Допустим, что у вас есть следующая ссылка:

Измените её, чтобы она выглядела следующим образом:

Теперь, когда пользователи кликнут по этой ссылке, она откроется в новом окне или на новой вкладке ( в зависимости от того, каким браузером они пользуются, и как он настроен ).

Обратите внимание, что если вы используете DOCTYPE со строгим синтаксисом XHTML 1.0 или 1.1 , то не получится одновременно использовать приведённый выше код и пройти валидацию страницы. Но подозреваю, что этими стандартами никто не пользуется. « Переходные » версии этих стандартов для открытия в новом окне HTML нам вполне подойдут, и в них также поддерживается атрибут target .

У этого метода не так много плюсов

Многие начинающие вебмастера думают, что, открывая ссылки в новом окне, пользователи с меньшей вероятностью покинут сайт. Это в корне неверно. Если кто-то кликнет по ссылке, а потом захочет вернуться на ваш сайт, они просто нажмут кнопку « Назад ». Об этой функции даже не самые технически подкованные люди узнают сразу после знакомства с интернетом. Продвинутые пользователи к тому же знают, что можно использовать опцию « Открыть ссылку в новой вкладке » (или « Открыть ссылку в новом окне »).

Создавая ссылки, которые открываются в новом окне, вы мешаете пользователям вернуться на сайт. Может показаться, что они без труда вернутся в первое окно с вашим сайтом. Мой опыт показывает, что это не так — людей сбивает с толку неработающая кнопка « Назад ». Они даже не подозревают, что перед ними новая вкладка или новое окно. Когда у них не получается быстро вернуться на предыдущую страницу, они просто сдаются и переходят на другие ресурсы.

С опытными пользователями дела обстоят не лучше. Их очень раздражает « привычка » вашего сайта открывать новые окна без разрешения. На то они и опытные пользователи — если бы они хотели открыть новую вкладку, они бы сделали это сами, и им нисколько не нравится, что это делают без их согласия. Ещё хуже, если все ваши ссылки открываются в новом окне.

Сайт становится уязвим для фишинговых атак

Если вы применяете кнопку HTML открыть в новом окне, используя target=»_blank» , сайт, на который ведёт ссылка, получает доступ к окну/вкладке с вашей страницей и может подменить её содержимое.

Это не только не удержит пользователей на сайте ( если вы открывали новые вкладки именно с этой целью ), но и подвергнет угрозе посетителей. Например, если у вас есть страница входа пользователя, находящийся по ссылке сайт может заменить её на копию вашей, но при этом собирающую логины и пароли пользователей. Такой вид атак называется « фишинг ».

И это не теоретическая уязвимость. Специалисты отдела безопасности Google отметили « значительное количество сообщений » о подобном перехвате вкладок с целью внедрения вредоносного программного обеспечения.

Некоторые браузеры позволяют предотвратить подобное поведение добавлением к ссылке атрибута rel=»noopener noreferrer» . Пример, приведённый в начале статьи, будет выглядеть следующим образом:

Теоретически, как rel=»noopener» , так и rel=»noreferrer» должно быть достаточно, чтобы защититься от подобной атаки при открытии страницы в новом окне HTML . При этом корректнее использовать атрибут rel=»noopener» , так как у rel=»noreferrer» есть побочный эффект — браузер не будет передавать сайту URL источника запроса. Но на данный момент не все браузеры поддерживают атрибут rel=»noopener» . Аналогично, rel=»noreferrer» не поддерживается некоторыми браузерами. Поэтому, если захотите защитить пользователей как можно большего числа браузеров, вероятно, придётся использовать оба атрибута.

Цукерберг рекомендует:  CSS меню с помощью спрайтов

Тем не менее, этот приём работает только на актуальных версиях Chrome , Firefox и Safari . Internet Explorer данную функцию не поддерживает, хотя я успел быстро проверить 11 версию IE , и она, вроде бы, защищена от подобной атаки при настройках безопасности, применяемых по умолчанию. Насчёт браузера Microsoft Edge точно сказать не могу.

Другими словами, описанный выше метод нельзя назвать стопроцентной защитой. Лучший способ избежать этой проблемы — использовать нормальные ссылки без атрибута target=»_blank» .

Заключение


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

Данная публикация представляет собой перевод статьи « How to Make Links Open in a New Window or Tab » , подготовленной дружной командой проекта Интернет-технологии.ру

Highsl >Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Пример использования этого варианта посмотрите, кликнув на ссылку «демо-пример» или картинку чуть ниже. Изображение в натуральном размере плавно откроется в новом окне. Его можно перемещать курсором мыши. Внизу можно размещать описание и комментарии к изображению. Клик по перекрестию стрелок внизу справа откроет изображение на весь экран. При втором клике картинка примет первоначальные размеры.

Демо-пример
  • Для корректной работы эффекта необходимо включить поддержку JavaScript в вашем браузере!
  • Папка highslide является универсальной для всех эффектов Highslide JS , поэтому её стоит закачать один раз на свой сайт. Не беспокойтесь, много места она не занимает, всего-то 887кб.

Изображение можно перемещать. При клике картинка принимает первоначальные размеры.

Html-код этого эффекта представлен в таблице внизу:

Пропись стилей (обязательно в head ).

Подключение скриптов (можно располагать как в head так и в body ).

Размеры картинки до увеличения.

Изображения с натуральными размерами поместите в папку images вашего сайта.

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Распакуйте архив в отдельную папку. Папка highslide_JS содержит две папки — highslide и images , а так же файл demo.html . Откройте последний в браузере, проверьте, всё должно изумительно работать. Закачайте папку highslide_JS на сервер и после правильного выполнения всех действий с не меньшим успехом всё будет функционировать и на вашем сайте.

Источник урока — сайт //highsl >«Вы хотите использовать Highslide для персонального сайта, сайта школы, фотоальбома Вашей семьи или некоммерческой организации? Тогда вам не нужно разрешение автора, просто используйте Highslide» .

Кто не ищет лёгких путей и всегда идёт вперёд, стремится к совершенству, пожалуйста, дерзайте.

Как убрать логотип в верхней левой части изображения?

В комментариях меня просили пояснить как можно удалить логотип «Powered by Highslide JS» во всех вариантах Highslide.

HTML: Открытие ссылки в новой вкладке

Для того чтобы страница, на которую ведет ссылка, открывалась в новом окне, нужно будет сообщить браузеру имя окна, в котором нужно открыть страницу. Если вы не указываете браузеру использовать какое-то определенное окно, то он откроет страницу в текущем окне.

В таблице приведены все доступные значения для атрибута target.

Значение Описание
_blank Открывает документ в новом окне.
_self Открывает документ в том же окне, где была нажата ссылка (значение по умолчанию).
_parent Открывает документ в родительском окне.
_top Открывает документ на весь экран.
имя_фрейма Открывает документ в указанном фрейме.

Примечание: если ваш браузер поддерживает вкладки, то ссылки с target=»_blank» будут открываться не в новом окне, а в новом вкладке. В этом случае, если вам требуется, чтобы ссылка открывала именно новое окно, надо воспользоваться языком программирования (например, JavaScript).

Помогите открыть картинку в новом окне!

arhitec

Новичок

Помогите открыть картинку в новом окне!

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

За ранее благодарен Вам за помощь!


Фанат

oncle terrible

arhitec

Новичок

Фанат

oncle terrible

arhitec

Новичок

Фанат

oncle terrible

админ не закроет тебя за твои вопросы.

речь идёт о том, что пхп не открывает окна и не выводит изображения.
ты имеешь представление о том, что такое HTML?

arhitec

Новичок

Да HTML вроде неплохо знаю,хотя я не программист а дизайнер Но всеже, да имею. А вот с PHP я не дружу пока
Я открою вопрос пошире. Я использую готовый скрипт на PHP для загрузки и хранения фото-базы у себя на сайте. А момент следующий, маленькая привьюшка на странице нажатием на нее открывается картинка полноразмерная в той же странице, а мне надо добиться ее открытия в новом окне с необходимыми размерами. Надеюсь я смог пояснить чего хочу

Цукерберг рекомендует:  Набор - Создание технодемки под инвестиции от 600 000€

Вот ссылка на этустраницу: http://arhitec.com/portfolio/poligrafia/

Если надо, я могу выставить и код всей страницы?

а я хочу добиться результата как здесь: http://arhitec.com/portfolio_ineriors_01-09.html

Фанат

oncle terrible

arhitec

Новичок

Да рад бы, но не все так просто.

href=’index.php?event=showimg&msnum=$msnum’ target=’_blank’>
вот строка, которая выводит изображение. Так вот, это и есть html вместе с php

Я открывал окно с помощью Java Script но его сюда мне вставить не удается.

Фанат

oncle terrible

arhitec

Новичок


Я не хотел кого то загружать деталями вопроса, думал сам докумекаю

Мне надо уйти минут на 30, может есть аська? пообщаемся там?

Rotaredom

arhitec

Новичок

Фанат

oncle terrible
Rotaredom

arhitec

Новичок

Так, ну тогда вот как дело обстоит:
на этой странице можно увидеть весь код: http://arhitec.com/portfolio/poligrafia/

генерируется база , в которой хранятся картинки. Затем эти картинки выставляются на страницу. Вот в строке #558 : href=’index.php?event=showimg&msnum=$msnum’ target=’_blank’> при нажатии на картинку открывается в этом же окне ее большой размер.
До этого я собирал всю базу картинок в ручную и каждую картинку открывал с помощью скрипта:

здесь сам код скрипта, а строка вызова нового окна выглядела вот так:

Тут видно, что новое окно открывается посредством Java Script.
Что я делал?! Я вставлял в PHP страницу, на которой показываются картинки, этот Java Script, а строку, котороая должна вызывать новое окно я модернизировал в такой вид:

Естественно ничего не работает
Вот и возник вопрос, как открыть картинку в новом окне?!

Тема: Открытие картинки в родительском окне.

Опции темы
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Открытие картинки в родительском окне.

(HTML) Открывает картинку в отдельном окне:

Как сделать, что бы картинку открывал в родительском окне.

Как сделать, что бы картинку открывал в родительском окне.

родительское — это тоже самое окно в котором и открыт документ
по умолчанию оно так и должно открываться
на всякий случай
target=»_self»>html форум

Попробовал. Картинка открывается как и раньше в новом окне.
В программе- слева — Scroll в него установлены картинки (маленький размер), справа свободно. Вот мне и нужно, что бы при нажатии на картинку с лева появлялась так-же картинка справа (в полный размер).


Ну эт js) Есть готвые решения в инете. Скрпиты галереи в гугле посмотри. Галереи ajax, jquery.

Когда говорят открывается в новом окне -подразумевается, что открывается новая вкладка (или окно браузера) и в ней появляется картинка. вы попробуйте пропишите target=»_blank» — вот это в новом окне.

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

Ни как не могу при нажатии на картинку (малого размера) открыть картинку на этом же листе только уже в полный размер.

Так это будет какая-то страничка с галереей или это полность сайт галерея?

Есть много хороших сайтов-галерей, есть много хорших просто галерей, которые можно встроить в страничку.

Если нажать на картинку, то она увеличится, это подходит?

Т.е. можно в таблицу закинуть нексоклько картинок и потом добавить аткой эффект с помощью js скрипта.

Как по клику на кнопке открыть страницу в новой вкладке

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target=»_blank» и радуемся. А вот по клику на кнопке открыть страницу в новой вкладке уже чуть сложнее. Ну нет у кнопки атрибута target.

На днях переносил наши корпоративные самописные сайты на новый хостинг и пришлось в коде сайтов вносить некоторые изменения. В ходе этой работы наткнулся на вот такую задачу — Как по клику на кнопке открыть страницу в новой вкладке. Саму по себе эту задачу я решил уже очень давно, много лет назад, но поскольку в то время я, можно сказать, на этих сайтах и учился web-программированию, то задача, как я убедился была решена не самым оптимальным образом. Менялся дизайн, наполнение, но кодинг в основном оставался прежним. А вот теперь, увидев этот код, я его быстренько оптимизировал, а заодно решил поделиться способом. Ведь многие пытаются что-то сами «прикрутить» к своим сайтам и вполне возможно, что статья кому-то и пригодится.

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

откроет указанную страницу в текущем окне, а

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

Как по клику на кнопке открыть страницу в новой вкладке?

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

Например вот так:

В данном случае страница partners.php откроется в текущем окне браузера. Но бывает что надо открыть какую-то страницу в новом окне или вкладке. Как быть? В конструкцию Почему это решение не является оптимальным

Дело в том, что несколько позже мне понадобилось открывать ещё одну ссылку таким-же образом в новой вкладке. Я, конечно пошёл уже проторенным путём и быстренько дорисовал ещё одну функцию JavaScript, аналогичную первой. Но потом возникла потребность ещё в одной такой-же кнопке.

По итогу код стал выглядеть примерно так:

Получалось, что на каждую кнопку писалась своя отдельная функция. Не оптимально. Не элегантно. Всё, конечно работало, но где поэзия кода?

Оптимальное решение

Зачем раздувать JavaScript, когда можно всё решить одной единственной функцией? А вдруг мне понадобится добавить ещё 5 таких вот кнопок? Поэтому решение тут другое. Функция JavaScript одна, а каждая кнопка передаёт ей параметром нужный URL.

Окончательно код теперь выглядит так:

Как видите, кнопка передаёт параметром URL, а функция его принимает и открывает в новой вкладке. При этом код JavaScript намного уменьшился.

Цукерберг рекомендует:  Вакансии АО РТКомм.РУ

А можно и ещё проще

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

Выглядит это примерно так:

Как видите, использование в OnClick команды window.open с нужной ссылкой — откроет её в новой вкладке. Если использовать этот вариант, то больше ничего не надо. Сам я столкнулся с такой необходимостью буквально сегодня, поэтому и решил дополнить статью этим вариантом.


Вот, собственно и всё. Теперь Вы знаете как по клику на кнопке открыть страницу в новой вкладке. Если кому-то это пригодится — пользуйтесь.

Highsl >Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Пример использования этого варианта посмотрите, кликнув на ссылку «демо-пример» или картинку чуть ниже. Изображение в натуральном размере плавно откроется в новом окне. Его можно перемещать курсором мыши. Внизу можно размещать описание и комментарии к изображению. Клик по перекрестию стрелок внизу справа откроет изображение на весь экран. При втором клике картинка примет первоначальные размеры.

Демо-пример
  • Для корректной работы эффекта необходимо включить поддержку JavaScript в вашем браузере!
  • Папка highslide является универсальной для всех эффектов Highslide JS , поэтому её стоит закачать один раз на свой сайт. Не беспокойтесь, много места она не занимает, всего-то 887кб.

Изображение можно перемещать. При клике картинка принимает первоначальные размеры.

Html-код этого эффекта представлен в таблице внизу:

Пропись стилей (обязательно в head ).

Подключение скриптов (можно располагать как в head так и в body ).

Размеры картинки до увеличения.

Изображения с натуральными размерами поместите в папку images вашего сайта.

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Распакуйте архив в отдельную папку. Папка highslide_JS содержит две папки — highslide и images , а так же файл demo.html . Откройте последний в браузере, проверьте, всё должно изумительно работать. Закачайте папку highslide_JS на сервер и после правильного выполнения всех действий с не меньшим успехом всё будет функционировать и на вашем сайте.

Источник урока — сайт //highsl >«Вы хотите использовать Highslide для персонального сайта, сайта школы, фотоальбома Вашей семьи или некоммерческой организации? Тогда вам не нужно разрешение автора, просто используйте Highslide» .

Кто не ищет лёгких путей и всегда идёт вперёд, стремится к совершенству, пожалуйста, дерзайте.

Как убрать логотип в верхней левой части изображения?

В комментариях меня просили пояснить как можно удалить логотип «Powered by Highslide JS» во всех вариантах Highslide.

Как открыть ссылку в новом окне

Как открыть ссылку в новом окне с точки зрения html? Давайте рассмотрим этот вопрос детально.

target=»_blank» — атрибут означает, что ссылка откроется в новой вкладке. По умолчанию все ссылки открываются в той же вкладке.

Открываем новое окно через JavaScript

Но не всегда требуется открыть ссылку в новой вкладке. Зачастую задача стоит в открытии нового окна браузера. В этом случае применяют средства JavaScript

  • Toolbar=yes включает панель закладок, кнопки вперед, назад
  • Location=yes включить адресную строку
  • ScrollBars=yes разрешает скролл

Помимо этого стоит упомянуть про то, что любую ссылку можно открыть в новом окне щелкнув на неё правой кнопкой мыши, в выпадающем меню выбрать «открыть в новом окне».

Html — при нажатии на картинку не открывается в новом окне

Да я тоже считаю, что открытие кучу окон разных размеров, это не в кайф. Хотя если бы они были одного размера без тулбаров, адресной строки и т.п., а так же картинка по середине, а остальное какой-нить приятный фон, тады было бы горяздо лучше. Но опять же RaZer правильно сказал, это мало кто оценит, так как сейчас рулят такие вещи как NetCaptor и CrazyBrowser (имеется в виду потомство IE). А там это всё побарабану.
А по поводу .
. чтобы при нажатие на уменьшиный вариант картинки большой открывался в новом окне .
то просто сжимаешь в любом редакторе картинку до нужных размеров и вставляешь её в тэг IMG, а его в свю очередь делаешь ссылкой по типу :

где PicBig1.htm файл в котором у тебя большая картинка вставлена.
Вот и всё. :)

:)) .. ну я так и написал

. просто сжимаешь в любом редакторе картинку до нужных размеров .

А по поводу javascript. Да лучше так чтобы не было кучу html файлов, а был один а ссылка на картинку подставлялась бравшись из получаемого параметра. :))

Большое спасибо за ответы , но чувствуется небольшое недопонимание,видимо я не правильно выразил свою просьбу.
Сами картинки мне сжимать не нужно ,у меня есть и мальнькие ,которое играют роль своеобразных иконок и большие ,которые должны открываться в новом окне после нажатия на маленькие соответсвенно.Желательные параметры окна я описал в предыдушем моём сообшении.Ниже приклеен файл с изображением одной из страниц моего будущего сайта и такого окна(окно взято с другого сайта).Я уже не знаю что делать,сайт весь готов ,осталось решить только проблему с этими картинками.Вторую ночь лажу по сети но удалось найти только обрывки информации,и везде упоминается JavaScript .Я пытался сделать через такую запись в коде:

Все вроде понятно только вот url имеет какае то приписки которые я не понимаю(я только недавно начал учить и html и Javascript. Так что ,если кто вдруг разберет (в чем я практически не сомневаюсь) не пожалейти усилий ответить мне. Заранее всем большое спасибо.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих