tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
7
ZUGRIFFE
788
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 07.06.08 22:39 #1
    Bobgar Bobgar ist offline Rookie
    Registriert seit
    Nov 2007
    Beiträge
    9
    Hi, ich bekomme diesen Tooltip nicht zum laufen. Ich habe bisher diesen code

    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <    html xmlns="http://www.w3.org/1999/xhtml">
    <    head>
    <    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <    title>Unbenanntes Dokument</title>
    <    script type='text/javascript' src='js/prototype.js'></script>
    <script type='text/javascript' src='js/prototip.js'></script>
    <link rel="stylesheet" type="text/css" href="css/prototip.css" />
    <script type="text/javascript" language="javascript">
                new Tip('demo_click1', "Tooltips can be set to show on click.", {
                    title: "Click",
                    closeButton: true,
                    showOn: 'click',
                    hideOn: { element: 'closeButton', event: 'click'},
                    stem: 'bottomMiddle',
                    hook: { target: 'topMiddle', tip: 'bottomMiddle' },
                    offset: { x: 0, y: -2 },
                    width: 'auto'
                });

                new Tip('demo_click2', "Click the element again to close this tooltip.", {
                    title: "Toggle",
                    style: 'protoblue',
                    showOn: 'click',
                    hideOn: 'click',
                    target: $('demo_click2').up('li'),
                    stem: 'bottomLeft',
                    hook: { target: 'topRight', tip: 'bottomLeft' },
                    offset: { x: -6, y: 0 }
                });
                </script>

    </head>
    <li class='box'>
                <div class='wrapper'>
                    <div class='demo' id='demo_click1' style='margin-right: 2px' new Tip(element, 'content');>asdasdasd</div>
                    
                  <div class='description'>Click</div>

                </div>

                
            </li>
    <body>
    </body>
    </html> 
    ich möchte den "Click" tip der dort zum testen ist.

    Danke für eure Hilfe.

    Lg
     
    Zitieren Zitieren
  2. 07.06.08 23:02 #2
    Maik Tutorials.de Gastzugang
    Hi,

    wenn du auf der Seite http://www.nickstakenburg.com/projects/prototip2/ den Quellcode der Demo-Varianten näher betrachtest, siehst du, dass die einzelnen Scripts zum Erzeugen der Tooltips im jeweiligen Listenpunkt .box, und nicht im Dokumentheader eingebunden sind.

    mfg Maik
     
    Zitieren Zitieren
  3. 08.06.08 09:17 #3
    Bobgar Bobgar ist offline Rookie
    Registriert seit
    Nov 2007
    Beiträge
    9
    also habs mir angeschat habs jetzt so geändert:

    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <    html xmlns="http://www.w3.org/1999/xhtml">
    <    head>
    <    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <    title>Unbenanntes Dokument</title>
    <    script type='text/javascript' src='js/prototype.js'></script>
    <script type='text/javascript' src='js/prototip.js'></script>
    <link rel="stylesheet" type="text/css" href="css/prototip.css" />


    </head>
    <li class='box'>
                <div class='wrapper'>
                    <div class='demo' id='demo_click1' style='margin-right: 2px'><img src='http://www.nickstakenburg.com/projects/prototip2/images/demos/click1.gif' alt=''/></div>
                    <div class='demo' id='demo_click2'><img src='http://www.nickstakenburg.com/projects/prototip2/images/demos/click2.gif' alt=''/></div>
                 

                </div>

                <script type="text/javascript" language="javascript">
                new Tip('demo_click1', "Tooltips can be set to show on click.", {
                    title: "Click",
                    closeButton: true,
                    showOn: 'click',
                    hideOn: { element: 'closeButton', event: 'click'},
                    stem: 'bottomMiddle',
                    hook: { target: 'topMiddle', tip: 'bottomMiddle' },
                    offset: { x: 0, y: -2 },
                    width: 'auto'
                });

                new Tip('demo_click2', "Click the element again to close this tooltip.", {
                    title: "Toggle",
                    style: 'protoblue',
                    showOn: 'click',
                    hideOn: 'click',
                    target: $('demo_click2').up('li'),
                    stem: 'bottomLeft',
                    hook: { target: 'topRight', tip: 'bottomLeft' },
                    offset: { x: -6, y: 0 }
                });
                </script>
            </li>

    <body>
    </body>
    </html> 
    Bin leider ein js .
     
    Zitieren Zitieren
  4. 08.06.08 09:51 #4
    Maik Tutorials.de Gastzugang
    Hi,

    mit dem nachfolgenden Quellcode bist du nun einen bedeutenden Schritt weiter

    Ich muss hier aber auch eine Lanze für dich brechen und zu deiner Entlastung einräumen, dass der Autor diverse erforderliche CSS-Formatierungen in der CSS-Datei http://www.nickstakenburg.com/projec.../css/style.css versteckt hat, die absolut unformatiert "einzeilig" daherkommt, sodass man sich darin erstmal einen Wolf nach den erforderlichen Code-Schnipseln sucht.

    Die drei Selektoren mit den CSS-Regeln hab ich hier im <style>-Tag untergebracht.

    Du musst halt schauen, welche der CSS-Eigenschaften tatsächlich benötigt werden, und welche getrost in die Tonne gekloppt werden können

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
 
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/prototip.js'></script>
<link rel="stylesheet" type="text/css" href="css/prototip.css" />
<style type="text/css">
<!--
.demos{
position:relative;
float:left;
margin-left:300px;
list-style-type:none;
margin-top:300px;
clear:both;
}
 
.demos .box{
list-style-type:none;
float:left;
width:82px;
padding:2px;
background:#ebebeb;
margin:0 6px 12px 0;
color:#505050;
position:relative;
clear:none;
}
 
.demos .demo{
position:relative;
float:left;
cursor:pointer;
border:1px solid #e1e1e1;
}
-->
</style>
 
</head>
<body>
 
<ul class="demos">
<li class='box'>
            <div class='wrapper'>
                <div class='demo' id='demo_click1' style='margin-right: 2px'><img src='http://www.nickstakenburg.com/projects/prototip2/images/demos/click1.gif' alt=''/></div>
                <div class='demo' id='demo_click2'><img src='http://www.nickstakenburg.com/projects/prototip2/images/demos/click2.gif' alt=''/></div>
 
 
            </div>
 
            <script type="text/javascript" language="javascript">
            new Tip('demo_click1', "Tooltips can be set to show on click.", {
                title: "Click",
                closeButton: true,
                showOn: 'click',
                hideOn: { element: 'closeButton', event: 'click'},
                stem: 'bottomMiddle',
                hook: { target: 'topMiddle', tip: 'bottomMiddle' },
                offset: { x: 0, y: -2 },
                width: 'auto'
            });
 
            new Tip('demo_click2', "Click the element again to close this tooltip.", {
                title: "Toggle",
                style: 'protoblue',
                showOn: 'click',
                hideOn: 'click',
                target: $('demo_click2').up('li'),
                stem: 'bottomLeft',
                hook: { target: 'topRight', tip: 'bottomLeft' },
                offset: { x: -6, y: 0 }
            });
            </script>
        </li></ul>
 
</body>
</html>
    Wenn du mit dem CSS-Code nicht klarkommen solltest, melde dich einfach nochmal

    mfg Maik
     
    Zitieren Zitieren
  5. 08.06.08 10:22 #5
    Bobgar Bobgar ist offline Rookie
    Registriert seit
    Nov 2007
    Beiträge
    9
    so klappt nun perfekt danke. der style den ich verwende ist default. jetzt hab ich ja son grauen border. Wie bekomme ich es hin, das ich ein bild als hintergrund verwende. (731x457) das ist die größe. der border soll weg sein. nur noch dieses bild quasi.
     
    Zitieren Zitieren
  6. 08.06.08 11:38 #6
    Maik Tutorials.de Gastzugang
    Hierfür gehst du in das Stylesheet prototip.css und nimmst für die Variante "default" die gewünschten Regeländerungen vor:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    /* the default style */
.prototip .default {
        [b]width: 731px;
        height: 457px;[/b]
        color: #808080;
        [B]background:url(URI_zur_Grafik);[/B] /* Hintergrundbild definieren */
}
.prototip .default .toolbar {
        [B]/*background: #f1f1f1;*/[/B] /* Hintergrundfarbe deaktivieren */
        font-weight: bold;
}
.prototip .default .title { padding: 5px; }
.prototip .default .content {
        padding: 5px;
        [B]/*background: #fff;*/[/B] /* Hintergrundfarbe deaktivieren */
}
    mfg Maik
     
    Zitieren Zitieren
  7. 08.06.08 11:53 #7
    Bobgar Bobgar ist offline Rookie
    Registriert seit
    Nov 2007
    Beiträge
    9
    danke für deine hilfe
     
    Zitieren Zitieren
  8. 08.06.08 11:56 #8
    Maik Tutorials.de Gastzugang
    Kein Ding, dafür bin ich schliesslich da

    mfg Maik
     
    Zitieren Zitieren
« Element nach Änderung von Styles neu rendern | Bild erst verdunkeln, Mouseover-Bild normal+eine Art Popup? »

Ähnliche Themen

  1. Tooltip
    Von son gohan im Forum Javascript & Ajax
    Antworten: 27
    Letzter Beitrag: 24.02.09, 22:46
  2. ToolTip
    Von TheRealLink im Forum PHP
    Antworten: 3
    Letzter Beitrag: 09.03.08, 13:29
  3. Tooltip
    Von MikeBi im Forum .NET Café
    Antworten: 3
    Letzter Beitrag: 08.02.08, 13:57
  4. Tooltip im IE7
    Von blubbbla im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 15.11.07, 11:24
  5. ToolTip
    Von lernen.2007 im Forum .NET Windows Forms
    Antworten: 0
    Letzter Beitrag: 24.12.06, 19:32