Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вывод ссылки изображения при клике на картинку (https://javascript.ru/forum/dom-window/71065-vyvod-ssylki-izobrazheniya-pri-klike-na-kartinku.html)

chellas88 23.10.2017 22:19

Вывод ссылки изображения при клике на картинку
 
Всем привет. Я практически ничего не знаю о JS и поэтому прошу помощи. Есть цикл в PHP который из базы выводит изображения. Также в базе к каждому изображению прикреплено описание и ссылка.
Нужно сделать, чтоб при клике по картинке, высвечивалась ссылка из бд. Подскажите плиз как это сделать..

ruslan_mart 24.10.2017 06:28

chellas88, код цикла где?

chellas88 24.10.2017 08:46

$sql = mysql_query("SELECT * FROM `img` ORDER BY `id` DESC");
while ($img = mysql_fetch_assoc($sql)) {
	echo '<img src="/src/img/blog/'.$img['img'].'" /></br>';
	echo '<span id="log"></span>';
}

laimas 24.10.2017 09:39

Цитата:

Сообщение от chellas88
Также в базе к каждому изображению прикреплено описание и ссылка.

И где же ссылка?

chellas88 24.10.2017 10:49

Цитата:

Сообщение от laimas (Сообщение 468051)
И где же ссылка?

ссылка в базе, вывод можно сделать как в спан так и в инпут

laimas 24.10.2017 11:00

Цитата:

Сообщение от chellas88
ссылка в базе

В базе, это на сервере, а щелкать вы будете на клиенте. Вы чего хотите? Коли получить ссылку, значит она должна быть на клиенте, потому вас и попросили показать html-код клиентский. Если вы хотите получать того чего нет на клиенте, это уже запрос к серверу делать надо.

chellas88 24.10.2017 11:09

$sql = mysql_query("SELECT * FROM `img` ORDER BY `id` DESC");
while ($img = mysql_fetch_assoc($sql)) {
	echo '<img src="/src/img/blog/'.$img['img'].'" /></br>';
	echo '<span id="log">'.$img['link'].'</span>';
}

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

chellas88 24.10.2017 11:26

Цитата:

Сообщение от laimas (Сообщение 468065)
В базе, это на сервере, а щелкать вы будете на клиенте. Вы чего хотите? Коли получить ссылку, значит она должна быть на клиенте, потому вас и попросили показать html-код клиентский. Если вы хотите получать того чего нет на клиенте, это уже запрос к серверу делать надо.

я так понимаю смысл в том чтоб с помощью джаваскрипт сделать невидимый элемент видимым?

laimas 24.10.2017 11:40

Цитата:

Сообщение от chellas88
<span id="log">

Так нельзя, id должен быть уникальным. В общем то для того чтобы обратиться к span id и не нужен, а вот класс необходим, коли текст в ней, это и есть ссылка, которая изначально скрыта.

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

Вы просите конкретный код, значит покажите конкретный html-код этой части страницы.

chellas88 24.10.2017 11:49

Цитата:

Сообщение от laimas (Сообщение 468076)
Так нельзя, id должен быть уникальным. В общем то для того чтобы обратиться к span id и не нужен, а вот класс необходим, коли текст в ней, это и есть ссылка, которая изначально скрыта.

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

Вы просите конкретный код, значит покажите конкретный html-код этой части страницы.

я не конкретный код прошу а пример, как это можно сделать

Nexus 24.10.2017 12:09

chellas88, контент, который нужно вывести можно поместить в data-атрибут, при клике его извлекать и отображать.
По сути нужен tooltip, который отображает контент по клику.

laimas 24.10.2017 12:41

Цитата:

Сообщение от chellas88
пример, как это можно сделать

Ну тогда подумайте как выводить теги, согласитесь, что <img><br><span>, а дальше опять все через BR, это не самое лучшее. Может, если список, то UL?

tuchkovo-auto 27.10.2017 03:07

chellas88, я так понимаю что ссылка на изображение это то, что содержит атрибут src этой же картинки. Тогда зачем брать её из базы? chellas88, для чего вы хотите выводить ссылку при наведении? Если для красоты :-О , то добавьте картинке атрибут title и продублируйте в атрибут ссылку из src или банально напишите текстом рядом с каждой картинкой. Если надо вывести ссылку для копирования или если картинок много, то получайте содержимое атрибута src и вставляйте в любой блок с помощью innerHTML.


Часовой пояс GMT +3, время: 08:31.