1

Как сделать всплывающее окно (типа всплывающей подсказки) для кнопки или ссылки в Javascript-e? Реализовать нужно на JavaScript без использования библиотеки jQuery. Имеется div с сылкой на внешний img и отдельно button. Нужно, чтобы при наведении на button появлялся этот контейнер div со вложеной картинкой.

Простая реализация:

<div id="popupDiv2" style="position:absolute;width:auto;display:none">
    <img src="..." />
</div>

<input type="button" onMouseOver="document.getElementById('popupDiv2').setAttribute('style','position:absolute;width:auto;display:block')" onMouseOut="document.getElementById('popupDiv2').setAttribute('style', 'position:absolute;width:auto;display:none')" onmousemove="document.getElementById('popupDiv2').setAttribute('style', 'position:absolute;width:auto;display:block')" value="Img"/>

Вопрос, как сделать так, чтобы картинка не мигала, а была плавной; или хотя бы при наведении просто появлялась в одной точке, а при mouseout исчезала?

4 ответа 4

3

Всплывающая подсказка на чистом JavaScript без jQuery.

А это на чистом CSS3, без JavaScript

<!DOCTYPE html>
<head>
<style type="text/css"> 
div{
    width: 100px;
    height: 50px;
    background: black;
}

div:before{
    text-align: center;
    content: "tooltip";
    display: none;
}

div:hover{
    z-index: 10;
    position: relative;
}

div:hover::before{
    width: 100px;
    display: block;
    background: red;
}

</style>

</head>
<body>  
<div /> 
</body>

</html>
1
  • Не совсем то, что нужно, но натолкнули на правильное решение, с помощью CSS. Спасибо.
    – dante
    29 авг 2011 в 8:11
1

Приветствую @dante, прочитайте вот этот мануал. Всплывающие подсказки(tooltip) на jQuery - вот сие чудо.

1
  • Спасибо, я знаю как это сделать с подключением библиотеки jQuery, но мне нужно именно БЕЗ использования этой библиотеки. В вопросе я это указал.
    – dante
    29 авг 2011 в 6:52
1
<style>
.rollover{position:relative}
.rollover .tip{position:absolute;top:-20px;left:50%;width:150px;margin-left:-75px;background:#0cf;display:none}
.rollover:hover .tip{display:block}
</style>
<span class="rollover"><div class="tip">I'm popup</div>roll me over to see an interesting effect</span>

CSS, но не работает в IE6. Ну и в топку этого динозавра. =)

0

Решил с помощью CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style type="text/css">

a:before{
 content:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAaAFcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD1HQtC0mfQNPll0yxeR7WFmY20ZLExqSSSuc5JrR/4RzRv+gTYf+AkX/xNHh3/AJF3TP8Arzg/9FrWnTKMz/hHNG/6BNh/4CRf/E0f8I5o3/QJsP8AwEi/+JrTooAzP+Ec0b/oE2H/AICRf/E0f8I5o3/QJsP/AAEi/wDiaq+J1imj061uzjT7m8WK6BOFdSrbUbno0mxcfxZ287sHmtct4NNt9S0/Qre3jggk09ls0/dwRzm5BxwPl3DYWx6gkc5IhpXZ1/8Awjmjf9Amw/8AASL/AOJo/wCEc0b/AKBNh/4CRf8AxNQeGjDLYPc/O1/I+L1pUCyCUdVYdgM/KASNuCCQcnaoZKMz/hHNG/6BNh/4CRf/ABNH/COaN/0CbD/wEi/+JrTooGcN470nT7Hw08lrp1pFK0qLujtow2OvZfairnxH/wCRUb/rsn9aKEBp6DfWsHh/TY5bqGNxaQZV5AD/AKtexNaH9p2H/P8AW3/f1f8AGvnmQkSsASBnoKbub+8fzpCPoj+07D/n+tv+/q/40f2nYf8AP9bf9/V/xr533N/eP50bm/vH86AufQdxd6Td20lvc3FlNBKpV45XRlcEcggk5Bqvbx+HbSxWxtl0yC0VgywRCNUVt24EL0yGAPTrXgm5v7x/Ojc394/nTuF2fQaXmkpNJOtxZJNKAJHV1DPjpk5yQMnH1qX+07D/AJ/rb/v6v+NfO+5v7x/Ojc394/nSuFz6I/tOw/5/rb/v6v8AjR/adh/z/W3/AH9X/Gvnfc394/nRub+8fzoC56/8Qbu2ufC7JBcwyP5yHCSA+vpRXkKklwCSRRVRFc//2Q==");
    display: none;
}

a:hover{
    z-index: -1;
    position: relative;
}

a:hover:before{
    display: block;
    position:absolute;
}

</style>

<title>QQQ</title>
</head>

<body>
<br />
<a href="111111111.jpg">Ссылка</a>

</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.