Здравствуйте! в коде картинка, нажал она поменялась, а вот с текстом не выходит.... вернее когда отдельно делаю все норма... но сейчас туплю. может кто подсказать что я не так делаю. PHP: <script type="text/javascript">function chg(id,chk){var el = document.getElementById(id);var ch = document.getElementById(chk); if (el.src.indexOf("1.png")>0){ el.src="3.png" ch.checked="true" name="1"; }else{ el.src="1.png" ch.checked="" name="2"; } } </script> <img src="1.png" id="img_1" onClick="chg(this.id,'check')"><br> <input type="checkbox" name="check" id="check"><a href="javascript:void(0);" onclick="chg('mydiv');">Показать блок</a><div id="mydiv" style="display:none;">text text text</div><?phpecho $el.name;echo "234234";?> спасибо!
Если правильно понял, то достаточно просто изменить свойство display: HTML: <img src="1.png" id="img_1"><br> <input type="checkbox" name="check" id="check"> <a href="javascript:void(0);" id="show">Показать блок</a> <a href="javascript:void(0);" id="hide">Спрятать блок</a> <div id="mydiv" style="display: none;">text text text</div> <script> var img = document.getElementById('img_1'), checkBox = document.getElementById('check'), showBlock = document.getElementById('show'), hideBlock = document.getElementById('hide'), div = document.getElementById('mydiv'), name = ''; img.onclick = function() { if (img.src.indexOf("1.png") > 0) { img.src = "3.png"; checkBox.checked = true; name = "1"; } else { img.src = "1.png"; checkBox.checked = false; name = "2"; } } showBlock.onclick = function() { div.style.display = 'block'; } hideBlock.onclick = function() { div.style.display = 'none'; } </script>
спасибо! да почти так, только на картинку нажимая текст или появляется или пропадает в месте с картинкой. HTML: <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .old{ cursor: pointer; text-align: center; background-image: url(x.png); } .new.old{ background-image: url(xb.png); } </style> </head> <body> <table width="400" summary=""> <thead> <tr> <th>Title 1</th> <th>Title 2</th> <th>Title 3</th> </tr> </thead> <tbody> <tr> <td class="old" id="1" value="1">1</td> <td class="old" id="2" value="2">2</td> <td class="old" id="3" value="3">3</td> </tr> <tr> <td class="old" id="4" value="4">4</td> <td class="old" id="5" value="5">5</td> <td class="old" id="6" value="6">6</td> </tr> <tr> <td id="4">----------</td> <td id="5">------------</td> <td id="6">---------</td> </tr> </tbody> </table> <script> window.addEventListener('DOMContentLoaded', function() { [].forEach.call(document.querySelectorAll('.old'), function(item) { item.addEventListener('click', function() { item.classList.toggle('new') }); }); }); </script> </body>
Так просто обрабатываем нужный элемент(ты) с текстом в событии клика лкм на картинку. В чём конкретно сложность?
В таком случае, чтобы получить адекватный ответ, нужно составить правильное ТЗ с описанием того что имеем и что должны получить. А то просто бросаться кодом, который вдобавок ещё не выдерживает установленный стиль данного языка - не есть хорошо.
код который ты дал немного переделал и теперь и текст с картинкой убирается. HTML: <script> var img = document.getElementById('img_1'), checkBox = document.getElementById('check'), showBlock = document.getElementById('show'), hideBlock = document.getElementById('hide'), div = document.getElementById('mydiv'), name = ''; img.onclick = function() { if (img.src.indexOf("1.png") > 0) { img.src = "3.png"; checkBox.checked = true; div.style.display = 'block'; name = "1"; } else { img.src = "1.png"; checkBox.checked = false; div.style.display = 'none'; name = "2"; } } </script> а с old т.е. это не ява скрипт? в общем установил фотошоп, прочитал урок для чайников по яваскрипт калькулятор,зарегил домен и вот что задумал http://sincorrer.xyz/game.php в примере который ты дал, да намного легче разобраться, да нет и если.... а тот скрипт по выше сложнее, я на него смотрю как на выключенный монитор
Но картинки - будут загружаться и текст уже набран. Не вижу ни малейшего баръера для просмотра сурса js и css - следовательно, ни в открытии картинки, ни в чтении текста - который уже загружен в браузер (в cache страницы). Единственно правильный подход к решению задачи, с js - ajax и загрузка on demand - картинок и текста. Техничное решение без костылей hide/show того контента, что уже есть и загружено в браузере.
как предложил Skofield Elder , это придется для каждой картинки прописывать? т.е. HTML: <script> var img = document.getElementById('img_1'), checkBox = document.getElementById('check'), showBlock = document.getElementById('show'), hideBlock = document.getElementById('hide'), div = document.getElementById('mydiv'), name = ''; var img = document.getElementById('img_2'), checkBox2 = document.getElementById('check'), showBlock2 = document.getElementById('show'), hideBlock2 = document.getElementById('hide'), div2 = document.getElementById('mydiv'), name2 = '';
