Вот мой html:
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td id="1">
<div>
<span>
Link 1
</span>
</div>
</td>
</tr>
</table>
</div>
<div id="box">
<img src="iow panorama.png" id="one"/>
<img src="iow panorama 2.png" id="two"/>
</div>
И мой CSS:
#sidebar {
display: inline-block;
height: auto;
width: auto;
font-family: Garamond;
font-size: large;
}
#table1 {
border: 1px solid black;
text-align: center;
}
#table1 th {
border: 1px solid black;
}
#table1 td {
border: 1px solid black;
}
#box {
position: relative;
height: 200px;
width: 1200px;
}
#box #one,#two {
position: absolute;
top: 0px;
left: 0px;
}
#one {
visibility: hidden;
}
#two {
visibility: hidden;
}
#1 {
background-color:red;
cursor: pointer;
}
И Javascript:
$("#1").click(function(){
var z = parseInt($("#one").css("z-index"));
z =+ 10;
$("#one").css("z-index", z);
})
Теперь я хочу, чтобы курсор изменился на указатель на td, и когда он щелкнут, он запускает javascript, который делает первое изображение видимым, но не вторым, поскольку они накладываются. Кроме того, td не меняет цвет, хотя CSS должен делать его красным. То, что я думаю, происходит, это то, что все это происходит в таблице /td его части. Как я могу исправить это, чтобы все это работало? (Также, как настроить javascript для уменьшения z-индекса второго изображения, поэтому я могу использовать другую ссылку в таблице для создания своего рода слайд-шоу со ссылками для выбора изображения?)
Было бы лучше указать id для ссылки, чем предоставить id для td
Также, как вы собираетесь сделать ссылку (тег), она будет автоматически иметь курсор: указатель css.
Было бы еще лучше использовать теги rel для связи ссылки и изображения
Я не мог правильно понять ваш вопрос. Однако я сделал JS FIDDLE. Надеюсь, это вам поможет. Поскольку вы использовали $ ("# 1"). Click() Я предполагаю, что вы использовали jQuery, и я тоже использовал его в своем коде.
HTML
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td>
<a href="javascript:;" rel="img1">Link1</a>
</td>
<td>
<a href="javascript:;" rel="img2">Link2</a>
</td>
</tr>
</table>
</div>
<div id="box">
<img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/cant-believe-it-icon.png" id="img1"/>
<img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/too-much-icon.png" id="img2"/>
</div>
JS
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('#'+imgid).fadeIn('slow');
});
Надеюсь, поможет
Здесь у вас много проблем:
1
не является допустимым значением id
HTML для многих браузеров. Требованиями HTML 4 для значений id
являются:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed
by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"),
colons (":"), and periods (".").
Это является причиной того, что стиль красного фона не применяется к td
. HTML5 в конечном итоге позволит использовать значение, которое вы используете, но вы обнаружите, что многие браузеры не готовы полностью его поддерживать.
У вас есть оба изображения: visibility: hidden;
, но вы никогда не меняете это в своем JS. Ни один образ никогда не будет отображаться, пока вы не установите его visibility
на visible
, независимо от его значения z-index
.
В зависимости от операционной системы, в которой размещаются ваши активы, вы можете столкнуться с проблемами с вашими именами файлов ваших изображений с пробелами в них. Я бы порекомендовал не делать этого. , , например, использование и подчеркивание вместо пробелов.
ОБНОВИТЬ
На самом деле проблема с id
начинающимся с цифры, по-видимому, связана с спецификациями CSS3 для действительных селекторов id
, а не с поддержкой спецификации HTML. Согласно спецификации CSS3, селектор должен быть "Идентификатором CSS", который ... can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they **cannot start with a digit**, two hyphens, or a hyphen followed by a digit.
... can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they **cannot start with a digit**, two hyphens, or a hyphen followed by a digit.
(выделено мной)
здесь рабочий пример, идентификатор элементов не должен начинаться с числа.
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td id="d1">
<div>
<span>
Link 1
</span>
</div>
</td>
</tr>
</table>
$("#d1").click(function(){
$("#one").css("visibility","visible");
})