Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   смена_картинки_по_наведени? ? (https://javascript.ru/forum/dom-window/84818-smena_kartinki_po_navedeni.html)

leon2009sp 04.01.2023 13:53

смена_картинки_по_наведени? ?
 
Здравствуйте! первый скрипт работает, может кому пригодится:
function readTextFile(file)
{
	var rawFile = new XMLHttpRequest();
	rawFile.open("GET", file, false);
	rawFile.onreadystatechange = function ()
	{
		if(rawFile.readyState === 4)
		{
			if(rawFile.status === 200 || rawFile.status == 0)
			{
				var allText = rawFile.responseText;
				let txt = allText;
				txt = txt.split(/\n/).map(str => str.split("="));
				txt = new Map(txt);
				document.getElementById("links").innerHTML=txt.get("text1").slice(1,-2);
				document.getElementById("imgtext").innerHTML=txt.get("text2").slice(1,-2);
				document.getElementById("links2").innerHTML=txt.get("text3").slice(1,-2);
				}
			}
		}
			rawFile.send(null);
};
window.addEventListener('DOMContentLoaded', function()
		{			  
document.onmouseover = function(e){
	if(e.target.tagName == 'A'){
		if(e.target.id == 'a1ru'){
			html = readTextFile('admin/text/menu/1.txt');
			}
		if(e.target.id == 'a2ru'){
			html = readTextFile('admin/text/menu/2.txt');
			}
		if(e.target.id == 'a3ru'){
			html = readTextFile('admin/text/menu/3.txt');
			}
		if(e.target.id == 'a4ru'){
			html = readTextFile('admin/text/menu/4.txt');
			}
		if(e.target.id == 'a5ru'){
			html = readTextFile('admin/text/menu/5.txt');
			}
}
}	  
readTextFile(html);
		}
);
function changeImage(src)
{
document.getElementById('imgout').src = src;
}

$new1 = parse_ini_file("admin/text/menu/1.txt"); 
$new2 = parse_ini_file("admin/text/menu/2.txt");
$new3 = parse_ini_file("admin/text/menu/3.txt");
$new4 = parse_ini_file("admin/text/menu/4.txt");
$new5 = parse_ini_file("admin/text/menu/5.txt");

echo "<div class=\"divtop\">
<table class=\"table100\">
<tr>
<td class=\"td0r\"><div id=\"links\" class=\"text0831\">$new1[text1]</div></td>
</tr>
<tr>
<td class=\"td01r\">
<div id=\"txtimg1\">
<img src=\"$new1[foto]\" id=\"imgout\" class=\"img1\" alt=\"Меню\">
<div class=\"txtimg1\" id=\"imgtext\">$new1[text2]</div>
</div>
</td>
</tr>
<tr>
<td class=\"td02r\"><div id=\"links2\" class=\"text0831\">$new1[text3]</div></td>";
printf('</tr>
</table>
</div>
<table class="table951">
<tr>
<td>');
echo "<table class=\"table103\" onMouseOver=\"changeImage('$new1[foto]')\" onMouseOut=\"changeImage('$new1[foto]')\">
<tr>
<td><a id=\"$new1[id]\" href=\"$new1[pach]\" class = \"text4\" target=\"_blank\">$new1[link]</a></td>
</tr>
</table>
</td>
<td>
<table class=\"table103\" onMouseOver=\"changeImage('$new2[foto]')\" onMouseOut=\"changeImage('$new2[foto]')\">
<tr>
<td><a id=\"$new2[id]\" href=\"$new2[pach]\" class = \"text4\" target=\"_blank\">$new2[link]</a></td>
</tr>
</table>
</td>
<td>
<table class=\"table103\" onMouseOver=\"changeImage('$new3[foto]')\" onMouseOut=\"changeImage('$new3[foto]')\">
<tr>
<td><a id=\"$new3[id]\" href=\"$new3[pach]\" class = \"text4\" target=\"_blank\">$new3[link]</a></td>
</tr>
</table>
</td>
<td>
<table class=\"table103\" onMouseOver=\"changeImage('$new4[foto]')\" onMouseOut=\"changeImage('$new4[foto]')\">
<tr>
<td><a id=\"$new4[id]\" href=\"$new4[pach]\" class = \"text4\" target=\"_blank\">$new4[link]</a></td>
</tr>
</table>
</td>
<td>
<table class=\"table103\" onMouseOver=\"changeImage('$new5[foto]')\" onMouseOut=\"changeImage('$new5[foto]')\">
<tr>
<td><a id=\"$new5[id]\" href=\"?news=open#$new5[pach]\" class = \"text4\" target=\"_blank\">$new5[link]</a></td>
</tr>
</table>
</td>
</tr>
</table>

а что нужно поменять чтобы на одной странице работали два окна вывода картинки и текста. т.к. смена текста и картинки работает только в первом окне. :help: :cray:
$new6 = parse_ini_file("admin/text/contact/1.txt"); 
$new7 = parse_ini_file("admin/text/contact/2.txt");
$new8 = parse_ini_file("admin/text/contact/3.txt");
$new9 = parse_ini_file("admin/text/contact/4.txt");
$new10 = parse_ini_file("admin/text/contact/5.txt");


echo "<div class=\"divtop\">
<table class=\"table100\">
<tr>
<td class=\"td0r\"><div id=\"links\" class=\"text0831\">$new6[text1]</div></td>
</tr>
<tr>
<td class=\"td01r\">
<div id=\"txtimg1\">
<img src=\"$new6[foto]\" id=\"imgout2\" class=\"img1\" alt=\"Меню\">
<div class=\"txtimg1\" id=\"imgtext2\">$new6[text2]</div>
</div>
</td>
</tr>
<tr>
<td class=\"td02r\"><div id=\"links2\" class=\"text0831\">$new6[text3]</div></td>";
printf('</tr>
</table>
</div>
<table class="table951">
<tr>
<td>');
echo "<table class=\"table103\" onMouseOver=\"changeImage('$new6[foto]')\" onMouseOut=\"changeImage('$new1[foto]')\">
<tr>
<td><a id=\"$new6[id]\" href=\"$new6[pach]\" class = \"text4\" target=\"_blank\">$new6[link]</a></td>
</tr>
</table>
</td>
<td>
<table class=\"table103\" onMouseOver=\"changeImage('$new7[foto]')\" onMouseOut=\"changeImage('$new7[foto]')\">
<tr>
<td><a id=\"$new7[id]\" href=\"$new7[pach]\" class = \"text4\" target=\"_blank\">$new7[link]</a></td>
</tr>
</table>
</td>
<td>
<table class=\"table103\" onMouseOver=\"changeImage('$new8[foto]')\" onMouseOut=\"changeImage('$new8[foto]')\">
<tr>
<td><a id=\"$new8[id]\" href=\"$new8[pach]\" class = \"text4\" target=\"_blank\">$new8[link]</a></td>
</tr>
</table>
</td>
<td>
<table class=\"table103\" onMouseOver=\"changeImage('$new9[foto]')\" onMouseOut=\"changeImage('$new9[foto]')\">
<tr>
<td><a id=\"$new9[id]\" href=\"$new9[pach]\" class = \"text4\" target=\"_blank\">$new9[link]</a></td>
</tr>
</table>
</td>
<td>
<table class=\"table103\" onMouseOver=\"changeImage('$new10[foto]')\" onMouseOut=\"changeImage('$new10[foto]')\">
<tr>
<td><a id=\"$new10[id]\" href=\"?news=open#$new5[pach]\" class = \"text4\" target=\"_blank\">$new10[link]</a></td>
</tr>
</table>
</td>
</tr>
</table>

понятно что никто не будет это все перелистовать: хотябы что мне нужно поменять здесь:
:victory:
function readTextFile(file)
{
	var rawFile = new XMLHttpRequest();
	rawFile.open("GET", file, false);
	rawFile.onreadystatechange = function ()
	{
		if(rawFile.readyState === 4)
		{
			if(rawFile.status === 200 || rawFile.status == 0)
			{
				var allText = rawFile.responseText;
				let txt = allText;
				txt = txt.split(/\n/).map(str => str.split("="));
				txt = new Map(txt);
				document.getElementById("links").innerHTML=txt.get("text1").slice(1,-2);
				document.getElementById("imgtext").innerHTML=txt.get("text2").slice(1,-2);
				document.getElementById("links2").innerHTML=txt.get("text3").slice(1,-2);
				}
			}
		}
			rawFile.send(null);
};
window.addEventListener('DOMContentLoaded', function()
		{			  
document.onmouseover = function(e){
	if(e.target.tagName == 'A'){
		if(e.target.id == 'a1ru'){
			html = readTextFile('admin/text/cont/1.txt');
			}
		if(e.target.id == 'a2ru'){
			html = readTextFile('admin/text/cont/2.txt');
			}
		if(e.target.id == 'a3ru'){
			html = readTextFile('admin/text/cont/3.txt');
			}
		if(e.target.id == 'a4ru'){
			html = readTextFile('admin/text/cont/4.txt');
			}
		if(e.target.id == 'a5ru'){
			html = readTextFile('admin/text/cont/5.txt');
			}
}
}	  
readTextFile(html);
		}
);
function changeImage(src)
{
document.getElementById('imgout').src = src;
}

с changeImage и changeImage2 игрался картинк меняется.. текст не шевелится.
начинаешь трогать ети строчки все колом:
document.getElementById("links555").innerHTML=txt.get("text4").slice(1,-2);
				document.getElementById("imgtext555").innerHTML=txt.get("text5").slice(1,-2);
				document.getElementById("links666").innerHTML=txt.get("text6").slice(1,-2);

Может кто подскажет.

voraa 04.01.2023 15:09

Чему у вас равно html в строке 44? И где вообще определяется html?
Расставляйте нормально скобки и уровни вложенности, что бы понимать самому структуру кода
window.addEventListener('DOMContentLoaded', function() {            
	document.onmouseover = function(e){
		if(e.target.tagName == 'A'){
			if(e.target.id == 'a1ru'){
				html = readTextFile('admin/text/cont/1.txt');
				}
			if(e.target.id == 'a2ru'){
				html = readTextFile('admin/text/cont/2.txt');
				}
			if(e.target.id == 'a3ru'){
				html = readTextFile('admin/text/cont/3.txt');
				}
			if(e.target.id == 'a4ru'){
				html = readTextFile('admin/text/cont/4.txt');
				}
			if(e.target.id == 'a5ru'){
				html = readTextFile('admin/text/cont/5.txt');
				}
		}
	}    
	readTextFile(html);
});

onmouseover сам по себе, а readTextFile(html) - сам по себе и никак не связанны.


document.getElementById("imgtext").innerHTML=txt.g et("text2").slice(1,-2);

Элемента с id="imgtext" не вижу.

leon2009sp 04.01.2023 20:12

умньшил код, должно быть читаемо
 
$new1 = parse_ini_file("admin/text/menu/1.txt"); 
$new2 = parse_ini_file("admin/text/menu/2.txt");
$new3 = parse_ini_file("admin/text/menu/3.txt");
$new4 = parse_ini_file("admin/text/menu/4.txt");
$new5 = parse_ini_file("admin/text/menu/5.txt");
$new6 = parse_ini_file("admin/text/contact/1ru.txt"); 
$new7 = parse_ini_file("admin/text/contact/2ru.txt");
$new8 = parse_ini_file("admin/text/contact/3ru.txt");
$new9 = parse_ini_file("admin/text/contact/4ru.txt");
$new10 = parse_ini_file("admin/text/contact/5ru.txt");

echo "
<div id=\"imgtext1\">$new1[text1]</div><img src=\"$new1[foto]\" id=\"imgout\"alt=\"Меню\">
<div id=\"imgtext2\">$new1[text2]</div>
<div id=\"imgtext3\" >$new1[text3]</div>";
echo "
<a id=\"$new1[id]\" href=\"$new1[pach]\" target=\"_blank\" onMouseOver=\"changeImage('$new1[foto]')\" onMouseOut=\"changeImage('$new1[foto]')\">$new1[link]</a>
<a id=\"$new2[id]\" href=\"$new2[pach]\" target=\"_blank\" onMouseOver=\"changeImage('$new2[foto]')\" onMouseOut=\"changeImage('$new2[foto]')\">$new2[link]</a>
<a id=\"$new3[id]\" href=\"$new3[pach]\" target=\"_blank\" onMouseOver=\"changeImage('$new3[foto]')\" onMouseOut=\"changeImage('$new3[foto]')\">$new3[link]</a>
<a id=\"$new4[id]\" href=\"$new4[pach]\" target=\"_blank\" onMouseOver=\"changeImage('$new4[foto]')\" onMouseOut=\"changeImage('$new4[foto]')\">$new4[link]</a>
<a id=\"$new5[id]\" href=\"$new5[pach]\"  target=\"_blank\" onMouseOver=\"changeImage('$new5[foto]')\" onMouseOut=\"changeImage('$new5[foto]')\">$new5[link]</a>
";

echo "
<div id=\"imgtext4\">$new6[text1]</div><img src=\"$new6[foto2]\" id=\"imgout2\" alt=\"Меню\">
<div id=\"imgtext5\">$new6[text2]</div>
<div id=\"imgtext6\" >$new6[text3]</div>";
echo "
<a id=\"$new1[id]\" href=\"$new6[pach]\"  target=\"_blank\" onMouseOver=\"changeImage2('$new6[foto2]')\" onMouseOut=\"changeImage2('$new6[foto2]')\">$new6[link]</a>
<a id=\"$new2[id]\" href=\"$new7[pach]\"  target=\"_blank\" onMouseOver=\"changeImage2('$new7[foto2]')\" onMouseOut=\"changeImage2('$new7[foto2]')\">$new7[link]</a>
<a id=\"$new3[id]\" href=\"$new8[pach]\"  target=\"_blank\" onMouseOver=\"changeImage2('$new8[foto2]')\" onMouseOut=\"changeImage2('$new8[foto2]')\">$new8[link]</a>
<a id=\"$new4[id]\" href=\"$new9[pach]\"  target=\"_blank\" onMouseOver=\"changeImage2('$new9[foto2]')\" onMouseOut=\"changeImage2('$new4[foto2]')\">$new9[link]</a>
<a id=\"$new5[id]\" href=\"$new10[pach]\" target=\"_blank\" onMouseOver=\"changeImage2('$new10[foto2]')\" onMouseOut=\"changeImage2('$new10[foto2]')\">$new10[link]</a>
";

function readTextFile(file)
{
	var rawFile = new XMLHttpRequest();
	rawFile.open("GET", file, false);
	rawFile.onreadystatechange = function ()
	{
		if(rawFile.readyState === 4)
		{
			if(rawFile.status === 200 || rawFile.status == 0)
			{
				var allText = rawFile.responseText;
				let txt = allText;
				txt = txt.split(/\n/).map(str => str.split("="));
				txt = new Map(txt);
				document.getElementById("imgtext1").innerHTML=txt.get("text1").slice(1,-2);
				document.getElementById("imgtext2").innerHTML=txt.get("text2").slice(1,-2);
				document.getElementById("imgtext3").innerHTML=txt.get("text3").slice(1,-2);
				}
			}
		}
			rawFile.send(null);
};
window.addEventListener('DOMContentLoaded', function()
		{			  
document.onmouseover = function(e){
	if(e.target.tagName == 'A'){
		if(e.target.id == 'a1ru'){
			html = readTextFile('admin/text/menu/1.txt');
			}
		if(e.target.id == 'a2ru'){
			html = readTextFile('admin/text/menu/2.txt');
			}
		if(e.target.id == 'a3ru'){
			html = readTextFile('admin/text/menu/3.txt');
			}
		if(e.target.id == 'a4ru'){
			html = readTextFile('admin/text/menu/4.txt');
			}
		if(e.target.id == 'a5ru'){
			html = readTextFile('admin/text/menu/5.txt');
			}		
}
}	  
readTextFile(html);
		}
);
function changeImage(src)
{
document.getElementById('imgout').src = src;
}
function readTextFile2(file)
{
	var rawFile = new XMLHttpRequest();
	rawFile.open("GET", file, false);
	rawFile.onreadystatechange = function ()
	{
		if(rawFile.readyState === 4)
		{
			if(rawFile.status === 200 || rawFile.status == 0)
			{
				var allText = rawFile.responseText;
				let txt = allText;
				txt = txt.split(/\n/).map(str => str.split("="));
				txt = new Map(txt);				
				document.getElementById("imgtext4").innerHTML=txt.get("text4").slice(1,-2);
				document.getElementById("imgtext5").innerHTML=txt.get("text5").slice(1,-2);
				document.getElementById("imgtext6").innerHTML=txt.get("text6").slice(1,-2);
				}
			}
		}
			rawFile.send(null);
};
window.addEventListener('DOMContentLoaded', function()
		{			  
document.onmouseover = function(f){
	if(f.target.tagName == 'A'){			
		if(f.target.id == 'cont1ru'){
			html2 = readTextFile2('admin/text/contact/1ru.txt');
			}
		if(f.target.id == 'cont2ru'){
			html2 = readTextFile2('admin/text/contact/2ru.txt');
			}
		if(f.target.id == 'cont3ru'){
			html2 = readTextFile2('admin/text/contact/3ru.txt');
			}
		if(f.target.id == 'cont4ru'){
			html2 = readTextFile2('admin/text/contact/4ru.txt');
			}
		if(f.target.id == 'cont5ru'){
			html2 = readTextFile2('admin/text/contact/5ru.txt');
			}			
}
}	  
readTextFile2(html2);
		}
);
function changeImage2(src)
{
document.getElementById('imgout2').src = src;
}

в 44 строке html = ini данные берутся из текста
Код:

data="27/05/2021";
id="cont1ru";
pach="block1";
link="11111111111";
text4="222222222222222";
text5="33333333333333333333";
text6="4444444444444444444444444444";
foto2="admin/text/contact/1.webp";

каким то чудо природы = скорость загруски страниц от 0.004с. если убрать ini и кинуть все в одну страницу скорость 2,14с. по этому оставил так :yes:
уменьшил код

leon2009sp 04.01.2023 20:18

добавка кода изменил imgtext
 
document.getElementById("imgtext2").innerHTML=txt.get("text2").slice(1,-2);

при наведение мышки на текст, ссылку.
imgtext2 отражает
<div id=\"imgtext2\">$new1[text2]</div>

меняется текст

leon2009sp 04.01.2023 20:37

получается у меня нижние ссылки работаю: меняют текст картинки при наведение, а верхняя часть меняет только картинки текст
<div id=\"imgtext1\">$new1[text2]</div>

imgtext2 и imgtext3 не меняется из за того что я просто дублировал код

voraa 04.01.2023 20:46

Цитата:

Сообщение от leon2009sp
в 44 строке html = ini данные берутся из текста

044 readTextFile(html);

094 readTextFile2(html2);

Когда должны вызываться эти функции? И когда вызываются?
Чему равно html и html2, когда они вызывается? И где вообще описаны переменные html и html2?

Что возвращает эта функция?
function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                let txt = allText;
                txt = txt.split(/\n/).map(str => str.split("="));
                txt = new Map(txt);
                document.getElementById("imgtext1").innerHTML=txt.get("text1").slice(1,-2);
                document.getElementById("imgtext2").innerHTML=txt.get("text2").slice(1,-2);
                document.getElementById("imgtext3").innerHTML=txt.get("text3").slice(1,-2);
                }
            }
        }
            rawFile.send(null);
};


Она что то должна возвращать оператором return, что бы ее можно было вызывать

028 html = readTextFile('admin/text/menu/1.txt');

leon2009sp 04.01.2023 22:18

onmouseover она не возвращает. из файла $new1 = parse_ini_file("admin/text/menu/1.txt") считывает строка id="a1ru";
т.е.
<a id=\"a1ru\" href=\"111.html\"  onMouseOver=\"foto1')\" onMouseOut=\"changeImage('foto2')\">2222</a>
a id=\"a1ru\"
если a1ru есть то читаем файл admin/text/menu/1.txt' а именно строки text1,text2,text3 и уже в div их выводит.

voraa 04.01.2023 22:47

Цитата:

Сообщение от leon2009sp
onmouseover она не возвращает

readTextFile что должна возвращать?
Если ничего, то что означают
html = readTextFile('admin/text/menu/1.txt');
Что записывается в html и зачем?


Чему равно html2, когда выполняется
094 readTextFile2(html2);

leon2009sp 04.01.2023 22:51

чтобы можно было вызвать html = readTextFile('admin/text/menu/1.txt'); id должна быть = a1ru, которая указана в ссылке

voraa 04.01.2023 22:53

Блин!
ЧТО записывается в html
(и зачем?)


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