Подскажите как подключить onclick к изображению

@qwer85 · Регистрация: 27.02.2017

Студворк — интернет-сервис помощи студентам

Привет всем ,подскажите как подключить onclick к изображению,
есть картинки с

HTML5
1
2
<img src="mountimg.jpg" width="60" height="60" onclick="fun_1(1)">
<img src="mountimg1.jpg" width="60" height="60" onclick="fun_1(2)">

,как этот onclick добавить к изображению 1,изображению 2
?
Код

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#tabs
{
font-size:0.7em;
height:500px;
}
#city.ui-autocomplete-loading {background: url("ajaxload.gif") right center no-repeat;}
#img
{
float:left;
margin-top:10px;
margin-right:10px;
border:2px black solid;
}
#image{width:200px;}
#city{width:400px;}
#tabs-2 p,#tabs-3 p
{
font-size:1.2em;
}
</style>
 
<script type="text/javascript">
$(document).ready(function() {
 
   var country=["Австралия",
   "Австрия",
   "Азербайджан",
   "ЮАР",
   "Япония"];
 
   $("#tabs").tabs();
 
//Код третьей вкладки (управление извлечеными данными)
   var object=[
      {label:"Изображение 1",url:"mountimg.jpg", description:"", coord:{lt:"52.854413",ln:"93.367310"}},
      {label:"Изображение 2",url:"mountimg1.jpg", description:"Вид на безымянную гору с озера 'Круглое', Кузнецкий Алатау.", coord:{lt:"53.815653",ln:"89.283829"}},
      {label:"Изображение 3",url:"mountimg2.jpg", description:"Озеро 'Харлыкголь', Кузнецкий Алатау.", coord:{lt:"53.800245",ln:"89.268723"}},
      {label:"Изображение 4",url:"mountimg3.jpg", description:"Скала 'Два брата' (Парабола), Ергаки.", coord:{lt:"52.839225",ln:"93.397093"}}
];
   $("#image").autocomplete({source:object,select:function(event,ui){
      $("#wrap").css("display","block");
      $("#img").attr("src",ui.item.url);
      $("#desc").html(ui.item.description);
      $("#latitude").html(ui.item.coord.lt);
      $("#longitude").html(ui.item.coord.ln);
      
 
}});
});
</script>
<div id="tabs">
<ul>
 
<li><a href="#tabs-3">Оформление извлеченных данных</a></li>
</ul>
 
<div id="tabs-3">
<p>Введите название изображения (введите к примеру "изо"): <input id="image" /></p>
<div id="wrap" style="display:none;font-size:1.2em;">
<img id="img" src="" width="60" height="60"/><br /><br />
<p><b>Описание:</b> <span id="url"></span>
<p><b>Описание:</b> <span id="desc"></span>
<p id="cord"><b>Координаты месторасположения:</b> <br />Широта: <span id="latitude"></span> Долгота: <span  id="longitude"></span></p>
</div>
</div>

@Уф · 27.02.2017, 17:46

тогда и правда в object надо вписать соответсвие картинок и музыки, потом можно навешивать в результатах обработчики

JavaScript
1
$('#img').off('click').on('click',function(){ fun1(ui.item.mp3); });

@qwer85 · 27.02.2017, 19:25 **[ТС]**

а как в object вписать соответствие картинок и onclick?

@Уф · 27.02.2017, 22:38

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   var object=[
      {label:"Изображение 1",url:"mountimg.jpg", mp3: "sound1.mp3", description:"", coord:{lt:"52.854413",ln:"93.367310"}},
      {label:"Изображение 2",url:"mountimg1.jpg", mp3: "sound2.mp3", description:"Вид на безымянную гору с озера 'Круглое', Кузнецкий Алатау.", coord:{lt:"53.815653",ln:"89.283829"}},
      {label:"Изображение 3",url:"mountimg2.jpg", mp3: "sound3.mp3", description:"Озеро 'Харлыкголь', Кузнецкий Алатау.", coord:{lt:"53.800245",ln:"89.268723"}},
      {label:"Изображение 4",url:"mountimg3.jpg", mp3: "sound4.mp3", description:"Скала 'Два брата' (Парабола), Ергаки.", coord:{lt:"52.839225",ln:"93.397093"}}
];
   $("#image").autocomplete({source:object,select:function(event,ui){
      $("#wrap").css("display","block");
      $("#img").attr("src",ui.item.url);
 
      $("#img").off('click').on('click', function(){ fun_1(ui.item.mp3)  });
 
      $("#desc").html(ui.item.description);
      $("#latitude").html(ui.item.coord.lt);
      $("#longitude").html(ui.item.coord.ln);

@qwer85 · 27.02.2017, 22:46 **[ТС]**

Я так делал,не запускается

Добавлено через 5 минут

JavaScript
1
2
var h1 = { 'mp3': 'http://ic4.101.ru:8000/v5_1' };
var h2 = { 'mp3': 'http://ic2.101.ru:8000/v1_1' };

@Уф · 27.02.2017, 22:51

мы ходим по кругу, если четко не обрисуешь задачу я уйду, думай сам,
изначальный вопрос: зависит ли аргумент функции fun_1() от найденной картинки, и если да, то где у тебя эта связь задана?

@qwer85 · 27.02.2017, 23:20 **[ТС]**

на сайте много таких

HTML5
1
2
<img src="mountimg1.jpg" width="60" height="60" onclick="fun_1(h1)">
<img src="mountimg2.jpg" width="60" height="60" onclick="fun_1(h2)">

а эта форма поиска находит картинку и для нее надо сделать onclick ,для каждой картинки свой

@Уф · 28.02.2017, 15:46

как определяешь для какой картинки какой клик?

@qwer85 · 28.02.2017, 20:21 **[ТС]**

картинка это ссылка на радио поток,
так только определяю

HTML5
1
<img src="mountimg.jpg" width="60" height="60" onclick="fun_1(1)">

@Уф · 01.03.2017, 00:09

а почему там цифра 1 а не 10? где у тебя записано что для картинки mountimg.jpg должно быть именно 1 ?

@qwer85 · 01.03.2017, 11:13 **[ТС]**

HTML5
1
<img src="mountimg.jpg" width="60" height="60" onclick="fun_1(h1)">

JavaScript
1
2
var h1 = { 'mp3': 'http://ic4.101.ru:8000/v5_1' };
var h2 = { 'mp3': 'http://ic2.101.ru:8000/v1_1' };

Добавлено через 25 секунд
Так вот

Добавлено через 1 минуту
Больше не где не записано

@Уф · 01.03.2017, 11:48

в уме вобщем, почему бы не сделать так ?

JavaScript
1
2
3
4
var mus = {
    "mountimg.jpg" : { 'mp3': 'http://ic4.101.ru:8000/v5_1' },
    "lalka.jpg": { 'mp3': 'http://ic2.101.ru:8000/v1_1' }
 }

а в картинках напишешь

HTML5
1
<img src="mountimg.jpg" width="60" height="60" onclick="fun_1(mus[$(this).attr('src')])">

@qwer85 · 01.03.2017, 13:01 **[ТС]**

работает,а сюда как добавить?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//Код третьей вкладки (управление извлечеными данными)
   var object=[
      {label:"Изображение 1",url:"mountimg.jpg", description:"", coord:{lt:"52.854413",ln:"93.367310"}},
      {label:"Изображение 2",url:"mountimg1.jpg", description:"Вид на безымянную гору с озера 'Круглое', Кузнецкий Алатау.", coord:{lt:"53.815653",ln:"89.283829"}},
      {label:"Изображение 3",url:"mountimg2.jpg", description:"Озеро 'Харлыкголь', Кузнецкий Алатау.", coord:{lt:"53.800245",ln:"89.268723"}},
      {label:"Изображение 4",url:"mountimg3.jpg", description:"Скала 'Два брата' (Парабола), Ергаки.", coord:{lt:"52.839225",ln:"93.397093"}}
];
   $("#image").autocomplete({source:object,select:function(event,ui){
      $("#wrap").css("display","block");
      $("#img").attr("src",ui.item.url);
      $("#desc").html(ui.item.description);
      $("#latitude").html(ui.item.coord.lt);
      $("#longitude").html(ui.item.coord.ln);
      
 
}});
});

@Уф · 01.03.2017, 14:51

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//Код третьей вкладки (управление извлечеными данными)
   var object=[
      {label:"Изображение 1",url:"mountimg.jpg", song: { 'mp3': 'http://ic4.101.ru:8000/v5_1' }, description:"", coord:{lt:"52.854413",ln:"93.367310"}},
      {label:"Изображение 2",url:"mountimg1.jpg", song: { 'mp3': 'http://ic4.101.ru:8000/v1_1' }, description:"Вид на безымянную гору с озера 'Круглое', Кузнецкий Алатау.", coord:{lt:"53.815653",ln:"89.283829"}},
      {label:"Изображение 3",url:"mountimg2.jpg", song: { 'mp3': 'http://ic4.101.ru:8000/v5_1' }, description:"Озеро 'Харлыкголь', Кузнецкий Алатау.", coord:{lt:"53.800245",ln:"89.268723"}},
      {label:"Изображение 4",url:"mountimg3.jpg", song: { 'mp3': 'http://ic4.101.ru:8000/v1_1' }, description:"Скала 'Два брата' (Парабола), Ергаки.", coord:{lt:"52.839225",ln:"93.397093"}}
];
   $("#image").autocomplete({source:object,select:function(event,ui){
      $("#wrap").css("display","block");
      $("#img").attr("src",ui.item.url);
      $("#img").off('click').on('click',function(){ fun_1(ui.item.song); });
      $("#desc").html(ui.item.description);
      $("#latitude").html(ui.item.coord.lt);
      $("#longitude").html(ui.item.coord.ln);
}});
});

попробуй так, правда я не проверял будет ли обработчик перенавешиваться, по идее должен

@qwer85 · 01.03.2017, 16:02 **[ТС]**

работает,спасибо!

Добавлено через 8 минут
только такая строка теперь будет в двух файлах

JavaScript
1
song: { 'mp3': 'http://ic4.101.ru:8000/v5_1' },

@qwer85 · 07.03.2017, 11:28 **[ТС]**

подскажи как вместо

HTML5
1
onclick="fun_1(mus[$(this).attr('src')])"

cделать

HTML5
1
id="qqq"

HTML5
1
<img src="mountimg.jpg" width="60" height="60" onclick="fun_1(mus[$(this).attr('src')])">

HTML5
1
<img src="mountimg.jpg" width="60" height="60" id="qqq>

@Уф · 07.03.2017, 11:34

а что ты используешь атрибут onclick?
разве строка

JavaScript
1
$("#img").off('click').on('click',function(){ fun_1(ui.item.song); });

не навешивает обработчик ?

@qwer85 · 07.03.2017, 11:40 **[ТС]**

использую,на сайте в основном такие

HTML5
1
<img src="mountimg.jpg" width="60" height="60" onclick="fun_1(mus[$(this).attr('src')])">

а,это для поиска использую

JavaScript
1
$("#img").off('click').on('click',function(){ fun_1(ui.item.song); });

@Уф · 07.03.2017, 11:57

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

@qwer85 · 07.03.2017, 17:18 **[ТС]**

посмотрел?

@Уф · 07.03.2017, 17:53

куда? где ссылка то?

Новые блоги и статьи Все статьи Все блоги /
Саморегулирующийся социальный контракт для сервера cross-section. Hrethgir 14.08.2026 С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .	Часы электронные Uhbif79 12.08.2026 Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .	Часы с будильником на основе класса QLCDNumber Uhbif79 12.08.2026 Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .	Установка MinGW GCC 16.2 и CMake 8Observer8 10.08.2026 VK Видео: https:/ / vkvideo. ru/ video-240781534_456239017 YouTube: eY5-5PyI9NM Текстовая версия
Неделя из жизни имитационной модели склада: мои кривые руки растут, откуда надо anaschu 10.08.2026 Неделя из жизни имитационной модели склада: как я почти написал неправильную логику и что с этим делать Работаю сейчас над учебно-рабочим проектом: строю в AnyLogic имитационную модель процессов. . .	Калькулятор для расчета родства russiannick 07.08.2026 1. Задача: Создать калькулятор для расчета родства. Родственных связей существует 8 ступеней, такие как: p - отец P - мать q - муж Q - жена b - брат B - сестра s - сын S - дочь	Мир по моей воле kumehtar 07.08.2026 Когда-то кажется, что всё просто. Ты весь такой светлый. Причиняешь добро. Борешься за справедливость в этом тёмном мире. Потом начинаешь замечать одну неприятную вещь. Почти каждый хороший. . .	Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .

@qwer85 0 / 0 / 0 Регистрация: 27.02.2017 Сообщений: 22
	27.02.2017, 19:25 [ТС]
	а как в object вписать соответствие картинок и onclick? 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	27.02.2017, 22:51
	мы ходим по кругу, если четко не обрисуешь задачу я уйду, думай сам, изначальный вопрос: зависит ли аргумент функции fun_1() от найденной картинки, и если да, то где у тебя эта связь задана? 1

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	28.02.2017, 15:46
	как определяешь для какой картинки какой клик? 1

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	01.03.2017, 00:09
	а почему там цифра 1 а не 10? где у тебя записано что для картинки mountimg.jpg должно быть именно 1 ? 1

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	07.03.2017, 11:57
	так у тебя куча картинок уже отображается, а поиском ты просто фильтруешь? дай ссылку на сайт, мне интересно посмотреть 0

@qwer85 0 / 0 / 0 Регистрация: 27.02.2017 Сообщений: 22
	07.03.2017, 17:18 [ТС]
	посмотрел? 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	07.03.2017, 17:53
	куда? где ссылка то? 0

Подскажите как подключить onclick к изображению

Решение