Куда и как вставить ссылку на возврат в index.html?

@rolandas · Регистрация: 20.04.2011

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

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

JavaScript
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
function randomImg(){
 
 var myImages = new Array () ;
 
myImages[1] = "picks/01.jpg"; 
myImages[2] = "picks/02.jpg";
myImages[3] = "picks/03.jpg";
myImages[4] = "picks/04.jpg";
myImages[5] = "picks/05.jpg";
myImages[6] = "picks/06.jpg";
myImages[7] = "picks/07.jpg";
myImages[8] = "picks/08.jpg";
myImages[9] = "picks/09.jpg";
myImages[10] = "picks/10.jpg";
 
var myLinks = new Array() ;
var back = new Array();
 
back[1] = "index.html";
 
myLinks[1] = "picks/01.jpg";
myLinks[2] = "picks/02.jpg";
myLinks[3] = "picks/03.jpg";
myLinks[4] = "picks/04.jpg";
myLinks[5] = "picks/05.jpg";
myLinks[6] = "picks/06.jpg";
myLinks[7] = "picks/07.jpg";
myLinks[8] = "picks/08.jpg";
myLinks[9] = "picks/09.jpg";
myLinks[10] = "picks/10.jpg";
 
var rnd = Math.floor(Math .random() * myImages.length);
if(rnd == 0){
rnd = 1;
}
 
document.write ('<a href='+myLinks[rnd]+'><img src='+myImages[rnd]+' border="3" width="200" height="150"></a>');
}
 
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

@Mr_Sergo · 16.12.2018, 01:44

Сообщение от rolandas

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

И куда же при этом выполняется переход?

@rolandas · 16.12.2018, 01:48 **[ТС]**

Сообщение от Mr_Sergo

И куда же при этом выполняется переход?

после нажатия на фотку должно прямо на index.html

вот сайт: https://mindspick.netlify.com/

@Mr_Sergo · 16.12.2018, 01:55

Сообщение от rolandas

должно прямо на index.html

Ну это-то понятно. Не понятно куда выполняется переход при нажатии "на маленькую"?

Добавлено через 4 минуты
А зачем вы сделали так что при клике на картинку она открывается в новом окне?

Добавлено через 43 секунды
В смысле в этом же окне- но происходит редирект?

@rolandas · 16.12.2018, 01:56 **[ТС]**

Сообщение от Mr_Sergo

Ну это-то понятно. Не понятно куда выполняется переход при нажатии "на маленькую"?

как я понимяю всё и происходит в той самой index.html но может и ошибаюсь..

HTML5
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
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html lang="en">
 <head>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="жжж">
  <meta name="Keywords" content="MindsPick">
  <meta name="Description" content="MindsPick">
  <title>MindsPick</title>
  <script type="text/javascript" src="rulio.js"></script>
  <link rel="stylesheet" type="text/css" href="config.css">
 </head>
<center><br><br>
<table>
<tr>
<td>
    <a href="http://www.reliablecounter.com" target="_blank"><img src="http://www.reliablecounter.com/count.php?page=mindspick.bitballoon.com/&digit=style/lcd/3/&reloads=1" alt="" title="" border="0"></a><br /><a href="http://" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;"></a>
    </td>
    
    <td><font size="22" color="#ffff00">&nbsp;&nbsp;MindsPick</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
    <td><a href="index.html"> <input type=button class="test"  style="font-size : 30px;" value=" refresh 12 " onclick=""></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="index2.html"> <input type=button class="test" style="font-size : 30px;"value=" Factory Two " onclick=""></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="index3.html"> <input type=button class="test" style="font-size : 30px;"value=" Change One " onclick=""></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td>
    <a href="http://www.reliablecounter.com" target="_blank"><img src="http://www.reliablecounter.com/count.php?page=mindspick.bitballoon.com/&digit=style/lcd/3/&reloads=0" alt="" title="" border="0"></a><br /><a href="http://" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;"></a>
    </td>
</tr>
</table>
<br><br>
 
<table>
<tr>
    <td><script type="text/javascript">
randomImg();
 
</script></td>
    <td><script type="text/javascript">
randomImg();
</script></td>
    <td><script type="text/javascript">
randomImg();
</script></td>
    <td><script type="text/javascript">
randomImg();
</script></td>
</tr>
<tr>
    <td><script type="text/javascript">
randomImg();
</script></td>
    <td><script type="text/javascript">
randomImg();
</script></td>
    <td><script type="text/javascript">
randomImg();
</script></td>
    <td><script type="text/javascript">
randomImg();
</script></td>
</tr>
<tr>
    <td><script type="text/javascript">
randomImg();
</script></td>
    <td><script type="text/javascript">
randomImg();
</script></td>
    <td><script type="text/javascript">
randomImg();
</script></td>
    <td><script type="text/javascript">
randomImg();
</script></td>
</tr>
</table>
</center>
 </body>
</html>

@Mr_Sergo · 16.12.2018, 01:58

Быть может нужно сделать примерно как тут -> https://yandex.ru/images/searc... 1%81%D1%8F

Добавлено через 24 секунды
???

@rolandas · 16.12.2018, 02:01 **[ТС]**

Сообщение от Mr_Sergo

Быть может нужно сделать примерно как тут

да, но я по шаблону слепил, просто интересно есть решение прямо из ява скрипта поредагировать как то..
просто по структуре html нет понятия,
например показ картинки: https://mindspick.netlify.com/picks/2771.jpg
а это ведь из index.html ?

@Mr_Sergo · 16.12.2018, 02:06

Сообщение от rolandas

поредагировать

Но вы ж хотя бы с русским-то языком поладьте... потом уж за js начнем говорить

Добавлено через 1 минуту
складывается такое впечатление что вы общаетесь с каким-то животным...
Вы хоть пишите-то правильно!

Добавлено через 1 минуту
не открывается ваша ссылка

@rolandas · 16.12.2018, 02:09 **[ТС]**

Сообщение от Mr_Sergo

правильно

внести изменения

так сойдёт?
вы понимаете и чем я. если решение в принципе не возможно - так и скажите.
у меня красиво открывается.. https://mindspick.netlify.com/

@Mr_Sergo · 16.12.2018, 02:13

Сообщение от rolandas

не возможно

возможно

Добавлено через 1 минуту
делов-то...
при клике на картинку нужно открывать "поп-ап" а не редиректить куда-то там... вот вам и все решение

@rolandas · 16.12.2018, 02:17 **[ТС]**

Сообщение от Mr_Sergo

нужно открывать "поп-ап"

картинку уже открывает сам скрипт, так куда «поп-ап» запихивать?

@Mr_Sergo · 16.12.2018, 02:19

Сообщение от rolandas

куда «поп-ап» запихивать

ну дык наверное просто нужно переписать "сам скрипт"? Не... не подойдет?

@rolandas · 16.12.2018, 02:21 **[ТС]**

Сообщение от Mr_Sergo

Не... не подойдет?

подойдет, если другой шаблон найду

@Mr_Sergo · 16.12.2018, 02:21

вообщем если вам никто не поможет я завтра накидаю вам приблизительный скрипт, дальше как хотите

@rolandas · 16.12.2018, 02:26 **[ТС]**

Сообщение от Mr_Sergo

приблизительный скрипт

спасибо, пока попробую поместить <a href="index.html"></a>

куданибудь здесь:

JavaScript
1
2
3
4
5
6
7
document.write ('<a href='+myLinks[rnd]+'><img src='+myImages[rnd]+' border="3" width="200" height="150"></a>');
}
 
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

@Mr_Sergo · 16.12.2018, 18:22

rolandas,

Я бы сделал примерно так -> https://codepen.io/Mr_Sergo/full/ZVOGeg

HTML5
1
2
3
4
5
6
7
8
<div class="overlay">
    <div class="wrapImg"><img src="" class="changeImg"></div>
</div>
 
<div class="imgBox">
    <img src="https://shkolazhizni.ru/img/content/i156/156707_or.jpg">
    <img src="https://avatars.mds.yandex.net/get-zen_doc/225901/pub_5bae1fad4c48e200aac9a47b_5bae216f95fd3e00ab564581/scale_600">
</div>

JavaScript
1
2
3
4
5
6
let imgBox = document.querySelectorAll('.imgBox')[0],
    overlay = document.querySelectorAll('.overlay')[0],
    changeImg = document.querySelectorAll('.changeImg')[0];
 
imgBox.addEventListener('click',e => e.target.tagName == 'IMG' ? (overlay.style.display = 'block', changeImg.src = e.target.src) : '');
overlay.addEventListener('click',e => e.target.tagName !== 'IMG' ? overlay.style.display = 'none' : '');

CSS
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
html, body{margin: 0px 0px 0px 0px;width:  100%;}
 
.overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    cursor: pointer;
}
 
.changeImg{
    width: 100%;
    position: relative;
    top: 20px;
    cursor: default;
}
 
.wrapImg{
    width: 600px;
    margin: 0px auto;
}
 
img{
    width: 200px;
    cursor: pointer;
}

@rolandas · 16.12.2018, 18:38 **[ТС]**

Сообщение от Mr_Sergo

примерно так

Спасибуль, попробую ваш код.

@Mr_Sergo · 16.12.2018, 18:52

rolandas,
Если уж очень хочется что бы картинки открывались в полном размере то можно примерно так -> https://codepen.io/Mr_Sergo/full/qLNdgj

HTML5
1
2
3
4
5
6
7
8
<div class="overlay">
    <div class="wrapImg"><img src="" class="changeImg"></div>
</div>
 
<div class="imgBox">
    <img src="https://shkolazhizni.ru/img/content/i156/156707_or.jpg">
    <img src="https://avatars.mds.yandex.net/get-zen_doc/225901/pub_5bae1fad4c48e200aac9a47b_5bae216f95fd3e00ab564581/scale_600">
</div>

JavaScript
1
2
3
4
5
6
let imgBox = document.querySelectorAll('.imgBox')[0],
    overlay = document.querySelectorAll('.overlay')[0],
    changeImg = document.querySelectorAll('.changeImg')[0];
 
overlay.addEventListener('click',() => overlay.style.display = 'none');
imgBox.addEventListener('click',e => e.target.tagName == 'IMG' ? (overlay.style.display = 'block', changeImg.style.width = e.target.naturalWidth + 'px', changeImg.src = e.target.src) : '');

CSS
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
html, body{margin: 0px 0px 0px 0px; width: 100%;}
 
.overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    cursor: pointer;
}
 
.changeImg{
    position: relative;
    top: 20px;
}
 
.wrapImg{
    width: fit-content;
    margin: 0px auto;
}
 
img{
    width: 200px;
    cursor: pointer;
}

В css возможно есть что-то лишнее...

@rolandas · 16.12.2018, 19:08 **[ТС]**

Сообщение от Mr_Sergo

Если уж очень хочется

нужно.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>MindsPick</title>
  <script type="text/javascript" src="rulio.js"></script>
  <link rel="stylesheet" type="text/css" href="config.css">
 </head>
<center><br><br>
 
    <div class="overlay">
    <div class="wrapImg"><img src="" class="changeImg"></div>
</div>
 
<div class="imgBox">
    <img src="picks/01.jpg">
    <img src="picks/02.jpg">
</div>
 
</center>
 </body>
</html>

пока не работает - открывает лишь малоразмерные, клики над ними без реакции..

@Mr_Sergo · 16.12.2018, 19:45

rolandas,
Сначала подключаете css- файл, а уж после js- файл, у вас наоборот, вот так будет правильно:

HTML5
1
2
<link rel="stylesheet" type="text/css" href="config.css">
<script type="text/javascript" src="rulio.js"></script>

Добавлено через 3 минуты
rolandas,
Запакуйте js-файл, который у вас не работает, в архив и скиньте сюда

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	16.12.2018, 01:58
	Быть может нужно сделать примерно как тут -> https://yandex.ru/images/searc... 1%81%D1%8F Добавлено через 24 секунды ??? 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	16.12.2018, 02:21
	вообщем если вам никто не поможет я завтра накидаю вам приблизительный скрипт, дальше как хотите 1