Javascript: Показать один элемент, скрыть еще один

Question

Принимая курс веб-дизайна, и вам нужно использовать исключительно Javascript в этом проекте.

В принципе, я хочу иметь серию миниатюр в левой части экрана, и когда кто-то зависнет, он отображает информацию об изображении в правой части экрана. Остается так, пока не будет виден другой эскиз, затем информация будет заменена.

Я подумал о том, что у меня есть серия div на верхней части eachother, содержащая информацию, и на следующем экране появляется целевой div, и последний div исчезает.

Любые предложения?

Answer 1

jQuery было бы лучше всего для этого, или вы можете использовать функцию onMouseOver и свою информацию в стиле с видимостью: скрытый. Возможно, вы можете отправить какой-нибудь код, чтобы можно было предоставить дополнительную помощь.

Проверить это слишком Display text on MouseOver for image in html

Answer 2

Дайте изображения атрибут наведения мыши и запустить функцию на парении.

<img onmouseover="changeInfo(0)"> 
<img onmouseover="changeInfo(1)"> 
<img onmouseover="changeInfo(2)"> 
<div id="showInfo"></div> 

Затем поместите информацию для каждого изображения в массив и изменить внутренний HTML в DIV в зависимости от которого изображение в настоящее время колебались.

function changeInfo(index){ 
    var texts = ['Info on img0','Info on img1','Info on img2']; 
    var info = document.getElementById('showInfo'); 
    info.innerHTML = texts[index]; 
} 

Answer 3

Я не знаю, является ли это результатом, который вы хотите получить. Во-первых, я объявляю все изображения с помощью div. Информация скрыта в начале.

<div id="posts"> 
    <div id="post1"> 
    <img src="[Insert an image]" width="100" height="100"/> 
    <p class="hide"> information about picture one </p> 
    </div> 
    <div id="post2"> 
    <img src="[Insert an image]" width="100" height="100"/> 
    <p class="hide"> information about picture one </p> 
    </div> 
    <div id="post3"> 
    <img src="[Insert an image]" width="100" height="100"/> 
    <p class="hide"> information about picture one </p> 
    </div> 
</div> 

эти CSS классы

.nolabel p {display: none;} 

.label p { display: block; } 

.hide { display: none; } 

и JavaScript:

var posts = document.getElementById("posts").children; 

function forEach(el, callback) { 
    for(var i = 0; i <= el.length; i++) { 
    callback(posts[i]); 
    } 
} 

forEach(posts, function(child) { 
    child.addEventListener("mouseover", function(){ 
    forEach(posts, function(el) { 
     if(child.id === el.id) 
     el.className = "label"; 
     else 
     el.className = "nolabel"; 
    }); 
    }); 
}); 

Foreach помогает нам упростить это немного кода.

Поскольку мы могли иметь любое количество изображений, я думал, что это не очень хорошая идея, чтобы ссылаться на каждую из них по ее идентификатору.

Когда курсор наводится над одним из изображений, мы запускаем событие mouseover, которое будет сравнивать идентификаторы. Оператор if позволяет нам только модифицировать элемент, который мы нажали, а остальные остаются с классом nolabel (или заменить его, если у них есть метка). Надеюсь, что это поможет.