Forum PHP.pl > [JavaScript]Dymek z podpowiedzią

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Dymek z podpowiedzią

Lethys

2.07.2011, 18:25:59

CHciałbym zrobić dymek który pojawia się przy odpowiednim polu formularza.

Mam taki skrypt:

[PHP] pobierz, plaintext 
<html>
    <head>
        <title>Tooltip - przykład</title>
        <script type="text/javascript">
            function showTip(oEvent) {
                var oDiv = document.getElementById("divTip1");
                oDiv.style.visibility = "visible";
                oDiv.style.left = oEvent.clientX + 5;
                oDiv.style.top = oEvent.clientY + 5;
            }
 
            function hideTip(oEvent) {
                var oDiv = document.getElementById("divTip1");
                oDiv.style.visibility = "hidden";
            }
        </script>
    </head>
    <body>
        <p>Umieść kursor myszy na czerwonym kwadracie.</p>
        <div id="div1"
             style="background-color: red; height: 50px; width: 50px"
             onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>
 
         <div id="divTip1"
              style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
            <span style="font-weight: bold">Własna podpowiedź</span><br />
            W tym miejscu można umieścić bardziej szczegółowe informacje.
         </div>
    </body>
</html>
[PHP] pobierz, plaintext

Generalnie skrypt działą, ale tylko na jednego diva. A ja chce mieć dużo divów z podpowiedzią w tym stylu.

Próbowałem:

<script type="text/javascript">
function showTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "visible";
oDiv.style.left = oEvent.clientX + 5;
oDiv.style.top = oEvent.clientY + 5;
}

function hideTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
</script> skopiować to i nazwać jako "divTip2" i zrobić div2 ale wtedy div1 przestaje działać i działą tylko druga podpowiedź.

Jak zrobić kilka takich podpowiedzi na jednej stronie?

Mam formularz rejestracji i chcę przy każdym polu mieć podpowiedź.

morbic

2.07.2011, 18:35:43

Kod

<html>
    <head>
        <title>Tooltip - przykład</title>
        <script type="text/javascript">
            function showTip(oEvent, tipID) {
                var oDiv = document.getElementById(tipID);
                oDiv.style.visibility = "visible";
                oDiv.style.left = oEvent.clientX + 5;
                oDiv.style.top = oEvent.clientY + 5;
            }

            function hideTip(oEvent, obj) {
                var oDiv = document.getElementById(tipID);
                oDiv.style.visibility = "hidden";
            }
        </script>
    </head>
    <body>
        <p>Umieść kursor myszy na czerwonym kwadracie.</p>
        <div id="div1"
             style="background-color: red; height: 50px; width: 50px"
             onmouseover="showTip(event, 'divTip1')" onmouseout="hideTip(event, 'divTip1')"></div>

         <div id="divTip1"
              style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
            <span style="font-weight: bold">Własna podpowiedź</span><br />
            W tym miejscu można umieścić bardziej szczegółowe informacje.
         </div>


         <div id="div2"
             style="background-color: red; height: 50px; width: 50px"
             onmouseover="showTip(event, 'divTip2')" onmouseout="hideTip(event, 'divTip2')"></div>

         <div id="divTip2"
              style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
            <span style="font-weight: bold">Własna podpowiedź</span><br />
            W tym miejscu można umieścić bardziej szczegółowe informacje.
         </div>
    </body>
</html>

itd..

Lethys

3.07.2011, 10:44:08

No niby są dwa divy z "chmurkami" ale:

po:

1. Nie znikają kiedy się zabierze kursor z ich obszaru.
2. Jak się najedzie na 2 diva to już 1 nie chce się wyświetlić mimo, iż jest kursor na 1 divie

lobopol

3.07.2011, 11:08:47

Może jestem dziwny, ale do czegoś takiego użyłbym jQuery, znacznie prościej coś takiego napisać albo użyć gotowej wtyczki typu http://visionwidget.com/inspiration/web/49...ip-plugins.html

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.