Показать изображение с помощью onMouseOver, причем изображение находится за пределами li-тега

Question

Показать изображение с помощью onMouseOver, причем изображение находится за пределами li-тега

0

Я делал это раньше, но на этот раз мне пришлось перемещать изображение за пределами li-тега, чтобы позиционирование было таким, каким я хочу. Вот как выглядит мой HTML-код, для каждого "практического" я хочу, чтобы соответствующее "voorbeeld" отображалось при наведении.

<ul>
    <li><a id="menuKop" href="">Practicum 1</a></li>
    <li><a id="menuKop" href="">Practicum 2</a></li>
    <li><a id="menuKop" href="">Practicum 3</a></li>
    <li><a id="menuKop" href="">Practicum 4</a></li>
    <li><a id="menuKop" href="">Practicum 5</a></li>
</ul>

....rest of code....

<img id="voorbeeld1" src="Voorbeeld1.jpg" alt="voorbeeld1" />

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

До сих пор я экспериментировал с функцией onmouseover, но я не могу заставить его работать. Любые советы/подсказки? Заранее спасибо!

NaNtastic 21 окт. 2013, в 22:52

Источник

0

Вы используете JQuery или простой Javascript?
Hugo Tunius 21 окт. 2013, в 20:43
2

Совет 1: Ваш текущий HTML-код недействителен, потому что вы повторили один и тот же id для нескольких элементов. id должен быть уникальным. Совет 2: Один из вариантов (не обязательно лучший) заключается в добавлении атрибута к каждому элементу, который можно навести, что-то вроде data-img="idofimagehere" , чтобы указать идентификатор отображаемого img, а затем при data-img="idofimagehere" на элемент получить этот атрибут ...
nnnnnn 21 окт. 2013, в 20:47
0

о, да как глупо с моей стороны! И я использую простой JavaScript
NaNtastic 21 окт. 2013, в 20:50

Показать ещё 1 комментарий

Теги:

javascript

html

image

show

onmouseover

1 ответ

Ещё вопросы

Вы используете JQuery или простой Javascript?
Совет 1: Ваш текущий HTML-код недействителен, потому что вы повторили один и тот же id для нескольких элементов. id должен быть уникальным. Совет 2: Один из вариантов (не обязательно лучший) заключается в добавлении атрибута к каждому элементу, который можно навести, что-то вроде data-img="idofimagehere" , чтобы указать идентификатор отображаемого img, а затем при data-img="idofimagehere" на элемент получить этот атрибут ...
о, да как глупо с моей стороны! И я использую простой JavaScript

Sebsemillia · Accepted Answer · 2013-10-21T19-12-00.000Z

Как насчет этого?

<ul id="Preview">
    <li><a id="menuKop1" data-image="pic1" href="">Practicum 1</a></li>
    <li><a id="menuKop2" data-image="pic2" href="">Practicum 2</a></li>
</ul>

<img id="pic1" class="hide" src="http://i.imgur.com/vZzIm2t.jpg" alt="voorbeeld1" />
<img id="pic2" class="hide" src="http://i.imgur.com/yQdM1dk.jpg" alt="voorbeeld1" />

JQuery:

$(".hide").hide();
$('#Preview a').hover(function() {
    var img = '#'+$(this).data('image');
    $(img).show();
}, function() {
    var img = '#'+$(this).data('image');
    $(img).hide();
} );

jsfiddle

Это то, чего вы хотите достичь?

Вы, сэр, удивительны :) Это поможет много!
Рад, что смог помочь. Вы должны прочитать об «атрибутах данных» и функции «зависания», если хотите узнать больше об этом.