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 that you have read and understand our privacy policy and code of conduct.

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