Изображение и текстовый запрос
У меня здесь очень простая html-страница:
http://www.nomorepasting.com/getpaste.php?pasteid=22407
А у меня на странице 4 слоя. Причина в том, что это структура гораздо более сложного сайта, я упростил ее, чтобы задать свой вопрос. По сути, я хочу иметь возможность нажимать на разные ссылки в слое 2 и изменять изображение в слое 1, однако способ, который я нашел для этого:
<script type = "text/javascript"><!--
function sbox(boxName,xname) {
theBox = document.getElementById(boxName);
theBox.className = xname;
}
//-->
</script>
Приводит к исчезновению текста, который мне нужен, а также к способу щелкнуть и заменить любое изображение на текст. Я нашел альтернативный код javascript, но не смог применить его к своей html-странице.
<script type = "text/javascript">
function toggleImg(myid) {
objtxt = document.getElementById(myid);
objimg = document.getElementById(myid+'_img');
if ( objtxt.style.display == 'block' ) { // Show image, hide text
objtxt.style.display = 'none';
objimg.style.display = 'block';
} else { // Hide image, show text
objimg.style.display = 'none';
objtxt.style.display = 'block';
}
}
</script>
Как проще всего это сделать, не меняя дизайн моей страницы? Примечание: я не хочу использовать фреймворк, я хочу понять, как это делается, и сделать это для себя.
Мой дополнительный вопрос заключается в том, должны ли слои заменять таблицы: всегда ли плохо использовать таблицы, когда вместо них можно использовать css? Легко ли использовать слои для создания эквивалентов строк и столбцов только для форматирования текстовых данных, а не структуры сайта?
Рассмотрите возможность размещения кода в качестве образца страницы в другом месте со ссылкой и соответствующим фрагментом здесь. Вы, вероятно, найдете больше людей, желающих взглянуть.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Таблицы предназначены для табличных данных (например, Excel). Если у вас есть сетка данных для отображения, используйте таблицу. Когда дело доходит до оформления страниц, используйте CSS-позиционирование.
Кроме того, навязчивое использование DIV - не лучший способ использовать CSS. Выработка привычки заключать все в DIV - это практика, известная как «мания div», и вы можете использовать Google по причинам, по которым это нехорошо.
Что вы имеете в виду под манией див? Разве не полезно иметь главный div, чтобы он мог вместить все?
Во-первых, при установке фонового изображения текст в DIV не скроется, независимо от того, насколько высоко вы установили Z-индекс. Это просто не работает. Одно из решений могло бы заключаться в том, чтобы обернуть внутренний текст в диапазон и скрыть диапазон, когда вы хотите, чтобы отображалось фоновое изображение div. Но, судя по вашему вопросу, вы не хотели так сильно менять свою структуру html, но я считаю, что вам придется, чтобы получить то, что вы хотите.
Образец кода:
<html>
<head>
<style type = "text/css">
.class1{color:#000;}
.class2{color:#00f;}
.class3{color:#0f0;}
.class4{color:#f00; background-image:url('someimage.jpg');}
</style>
</head>
<body>
<script type = "text/javascript">
function sbox(divid, classname)
{
document.getElementById(divid).className=classname;
if (document.getElementById(divid+"_text")!=null)
document.getElementById(divid+"_text").style.display = "none";
}
</script>
<div>
<a href = "#" onclick = "sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/>
<a href = "#" onclick = "sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/>
<a href = "#" onclick = "sbox('div1','class4');return false;">Test Div1, Class4(red)</a>
</div>
<div id = "div1" class = "class1"><span id = "div1_text">Blah blah blah</span></div>
</body>
</html>
И я согласен с TravisO, HTML-таблицы следует использовать для табличных данных, а не как механизм компоновки. Есть также некоторые странности CSS с таблицами, когда у вас есть большая иерархия таблиц / строк / и т. д.
Спасибо за ваш ответ. Могу ли я просто изменить класс обратно на 1, чтобы вернуть текст, и по-прежнему полагаться на фоновые изображения, чтобы другие классы отображали их? Прошу прощения, если я не правильно понял. Что было бы лучше вместо изображения в качестве фона?
(В ответ на комментарий Joshxtothe4 ... мне нужно было больше места для ответа)
При изменении класса обратно на class1 текст, к сожалению, больше не будет отображаться. Код, который я дал, всегда скроет текст, если он находится в диапазоне. Вы можете сделать что-то вроде ниже и добавить еще один оператор CSS, который скроет диапазон, если используется class4. Тогда вам не обязательно иметь этот код в javascript. Возможно более чистое решение:
<html>
<head>
<style type = "text/css">
.class1{color:#000;}
.class2{color:#00f;}
.class3{color:#0f0;}
.class4{color:#f00; background-image:url('someimage.jpg');}
.class4 span { display: none;}
</style>
</head>
<body>
<script type = "text/javascript">
function sbox(divid, classname)
{
document.getElementById(divid).className=classname;
}
</script>
<div>
<a href = "#" onclick = "sbox('div1','class1');return false;">Reset</a><br/>
<a href = "#" onclick = "sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/>
<a href = "#" onclick = "sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/>
<a href = "#" onclick = "sbox('div1','class4');return false;">Test Div1, Class4(red)</a>
</div>
<div id = "div1" class = "class1"><span id = "div1_text">Blah blah blah</span></div>
</body>
</html>
Что касается изображения в качестве фона, это, вероятно, ваш лучший выбор. Единственная проблема заключалась в том, что установка фоновых изображений не скрывала текст переднего плана. Тебе всегда приходилось как-то скрывать этот текст
Большое спасибо за ваши ответы! Но я все еще пытаюсь понять это. Как мне добавить оператор, чтобы скрыть текст, если используется класс 4 или любой класс с фоновым изображением?
Стиль CSS .class4 span {display: none;} скрывает внутренний текст внутри диапазона, если используется class4. Скрытие текста при использовании фонового изображения - гораздо более сложное решение, и на данный момент у меня нет на него ответа. Но я полагаю, что это будет решение на javascript.
Теоретически, мог бы я просто иметь много классов с фоновым изображением и класс 4 без фонового изображения, разве это не сработает идеально?
Думаю, я не понимаю, что вы имеете в виду.
Двойной интервал - отстой в вопросах, здесь мы действительно могли бы обойтись без него.