Поддержать сайт

Подпишись на email:

SPRINTHOST.RU: быстрый и надежный хостинг!

Kод для 50% скидки: 50RMVK00
Заработок в сети
Технологии
Будущее
Архивы
Посетители

SPRINTHOST.RU: быстрый и надежный хостинг!

Подпишись на RSS и получай обновления блога!

Иногда нам нужно, что бы картинка при нажатии на нее открывала определенный нужный нам сайт и не уводила посетителей с нашего сайта или блога, а открывалась в новом окне. У меня блог сделан на WordPress поэтому не знаю, может для других движков и сойдет тоже мой совет, а может и @Сайт 100so@vetov.@ru нет, пробуйте ...

Так вот существует достаточно много способов решение этой задачки, я расскажу вам об одной из них.У меня появилось желание вставить в виджет картинку и что бы при нажатии на нее посетитель блога переходил на нужный мне сайт и что бы он в тоже самое время остался @Сайт 100@sovetov.r@u на моем сайте.

Я создаю виджет Текст, где можно вставить - Произвольный текст или HTML-код.

Пишу заголовок который мне нужно, например Реклама.И в поле для вставки текста вставляю код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
@Са@йт 100sovetov.@ru <a href="http://www.htmlbook.ru" target="_blank">Ссылка открывает новое окно на сайт htmlbook.ru</a>
</body>
</html>

Этот текст у нас для открытия документа в новом окне, а что бы картинка была еще и ссылкой нам нужен другой код:

<a href="сайт на который нужно перейти"><img src="адрес вашей картинки" width="172" height="172" border="1" /></a>

Для начала @Сайт @100sovetov@.ru мы загружаем картинку к нам на сайт в любую папку, в WordPress это медиафайлы - добавить новый.

Добавляем,заходим в библиотеку файлов,находим ту картинку, которую мы закачали, нажимаем изменить и внизу видим Ссылка на файл - она нам будет нужна.

Теперь два этих кода нам нужно соединить:

<!DOCTYPE html PUBLIC @Сайт 100sov@et@ov.ru "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<a href="сайт на который нужно перейти" target="_blank"><img src="адрес вашей картинки" width="172" height="172" border="1" /></a></a>
</body>
</html>

Сохраняем виджет и заходим на сайт проверяем, все должно работать. Удачи!

 

© 2011 @Сайт 100sov@etov.@ru - 2012, Алёна. Все права защищены.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники
@Сайт 100@sove@tov.ru
Понравилась статья подпишись на обновления блога и получай новые интересные статьи!
защищено INVITEXT

6 комментариев на “Как сделать картинку ссылкой и открыть ее в новом окне”

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://1100sovetov.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif