Всплывающие картинки

Zombak · January 28, 2012

<html>
<head>
<title>
1
</title>
<script type="text/javascript">
function over()
{
	par = document.getElementsByTagName('div')[0];
	image = document.createElement('img');
	par.appendChild(image);
	image.style.position = 'absolute';
	move();
        image.src ="medveden1.jpg";
        image.style.zIndex = "10";
        image.style.background = '#111111';
        image.style.border = "solid 1px #346fdc";
        image.style.padding = "4px";
}
function move()
{
	image.style.left = window.event.x+window.pageXOffset+15;
	image.style.top = window.event.y+window.pageYOffset+15;
}
function out()
{
	par.removeChild(image);
}
</script>
</head>
<body>
<div><a onmouseover="over('')" onmousemove="move()"  onmouseout="out()"><img style="position: absolute;left:380;top:180" src="krown.png" alt=""></a></div>
<img src="led.jpg">
</body>
</html>

Выходит вот такая картина при наведении на корону:

Как сделать, чтобы другой иконке, помимо короны, соответствовала новая картинка???

Надеюсь вы мне поможете) В html разбираюсь плохо...

Edited February 1, 2012 by Zombak

tius · January 30, 2012

Задать всплывающему слою z-index больший, чем у слоя с короной?

Great Rash · January 30, 2012

Можно обойтись без яваскрипта. http://jsfiddle.net/k976q/

Zombak · January 31, 2012

Мне друг говорил, что можно как-то пошарить с id картинок, но так как я плохо в html шарю то не знаю) Прошу помочь)))

Arinden · January 31, 2012

Вам уже подсказали верный совет. Задать z-index для всплывающего изображения. Попробуйте так:



move();
image.src ="medveden1.jpg";
image.style.zIndex = "10";
image.style.background = '#111111';
image.style.border = "solid 1px #346fdc";
image.style.padding = "4px";
}

ViStefan · January 31, 2012

Можно обойтись без яваскрипта. http://jsfiddle.net/k976q/

Вероятно используется js именно из-за привязки к положению курсора.

Надеюсь вы мне поможете) В html разбираюсь плохо...

Что мешает разбираться лучше? Скажем, даже прочитав только книги Влада Мержевича, с этого же сайта (по html и по css), вы бы уже смогли сами разобраться в проблеме. А книги-то детские (те что в открытом доступе), читаются одним днём.

Zombak · February 1, 2012

Благодарю) С первой проблемой разобрался) Теперь нуно понять как сделать чтобы для разных иконок выпрыгивала разная всплывающая картинка)))

nonsys · February 3, 2012

<html>
<head>
<title>
1
</title>
<script type="text/javascript">
function over(id,type)
{
        par = document.getElementById("div_" + id);
        image = document.createElement('img');
        par.appendChild(image);
        image.style.position = 'absolute';
        if(type == 1) {image.src ="medveden1.jpg";}
        if(type == 2) {image.src ="medveden2.jpg";}
        image.style.zIndex = "10";
        image.style.background = '#111111';
        image.style.border = "solid 1px #346fdc";
        image.style.padding = "4px";
        move();
}
function move()
{
        image.style.left = window.event.x+window.pageXOffset+15;
        image.style.top = window.event.y+window.pageYOffset+15;
}
function out()
{
        par.removeChild(image);
}
</script>
</head>
<body>
<div id="div_1"><a onmouseover="over(1,1)" onmousemove="move()"  onmouseout="out()"><img style="position: absolute;left:380;top:180" src="krown.png" alt=""></a></div>
<div id="div_2"><a onmouseover="over(2,2)" onmousemove="move()"  onmouseout="out()"><img style="position: absolute;left:480;top:280" src="krown.png" alt=""></a></div>
<img src="led.jpg">
</body>
</html>

При наведении на корону будет выполнятся "over(1,1)" то есть первая цифра 1 отвечает за то в каком диве будет появлятся картинка, а вторая цифра 1 за номер появляющейся картинки.

В скрипте идёт проверка на картинку и в зависимости ставится картинка какую вы укажете...

при over(1,1) вылезет medveden1.jpg в div где id = div_1

при over(2,2) вылезет medveden2.jpg в div где id = div_2

Тоесть сейчас тут будет две короны каждая из которых показывает разные картинки...

Edited February 3, 2012 by nonsys

Sign In

Всплывающие картинки

Question

Zombak

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

tius

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Zombak

Link to comment

Share on other sites

Arinden

Link to comment

Share on other sites

ViStefan

Link to comment

Share on other sites

Zombak

Link to comment

Share on other sites

nonsys

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information