Antworten auf deine Fragen:
Neues Thema erstellen

fehler im <head> wegen tooltip

S

susiH

Aktives Mitglied

hi leute, ich wollte in meine seite einen tooltip einbauen.allerdings lässt sich der nicht so anpassen, wie ich das will

HTML: 
<!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>susi.artmessengers.de</title>

<link rel="shortcut icon" href="http://www.psd-tutorials.de/forum/images/favicon.ico" /> 
<link rel="stylesheet" href="style.css" type="text/css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#scrollbar1').tinyscrollbar();    
        });
    </script>
    
    <script type="text/javascript">
<!-- tooltip und jquery slider -->

$(document).ready(function() {
    //Tooltips
            $(".tip_trigger").hover(function(){
                tip = $(this).find('.tip');
                tip.show(); //Show tooltip
                    }, function() {
                            tip.hide(); //Hide tooltip
                }).mousemove(function(e) {
                        var mousex = e.pageX + 20; //Get X coodrinates
                        var mousey = e.pageY + 20; //Get Y coordinates
                        var tipWidth = tip.width(); //Find width of tooltip
                        var tipHeight = tip.height(); //Find height of tooltip

                            //Distance of element from the right edge of viewport
                           var tipVisX = $(window).width() - (mousex + tipWidth);
                        //Distance of element from the bottom of viewport
                           var tipVisY = $(window).height() - (mousey + tipHeight);

                        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                            mousex = e.pageX - tipWidth - 20;
                        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                            mousey = e.pageY - tipHeight - 20;
                        }
                        //Absolute position the tooltip according to mouse position
                        tip.css({  top: mousey, left: mousex });
});

</script>
    
</head>
<body>


<div id="hintergrund">
<img src="http://www.psd-tutorials.de/forum/images/footer.png" width="100%" alt="" /></img>
</div>

<div id="content">  <!-- ANFANG CONTENT -->

<!-- navigation -->
<div id="navigation">


<a href="#" 
onmouseover="
home1.src='images/home_hover.png';"
onmouseout="
home1.src='images/home.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/home.png" border="0" alt="logodesign" name="home1"></img></a>


<a href="#" 
onmouseover="
flyersnow.src='images/flyersnowaustausch.png'; 
logodesign1.src='images/logodesign_hover.png';"
onmouseout="
flyersnow.src='images/bildchen.png';
logodesign1.src='images/logodesign.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/logodesign.png" border="0" alt="logodesign" name="logodesign1"></img></a>


<a href="#" 
onmouseover="
illustrationen1.src='images/illustrationen_hover.png';"
onmouseout="
illustrationen1.src='images/illustrationen.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/illustrationen.png" border="0" alt="logodesign" name="illustrationen1"></img></a>

<a href="#" 
onmouseover="
webdesign1.src='images/webdesign_hover.png';"
onmouseout="
webdesign1.src='images/webdesign.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/webdesign.png" border="0" alt="logodesign" name="webdesign1"></img></a>

<a href="#" 
onmouseover="
printdesign1.src='images/printdesign_hover.png';"
onmouseout="
printdesign1.src='images/printdesign.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/printdesign.png" border="0" alt="logodesign" name="printdesign1"></img></a>

<a href="#" 
onmouseover="
bildbearbeitung1.src='images/bildbearbeitung_hover.png';"
onmouseout="
bildbearbeitung1.src='images/bildbearbeitung.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/bildbearbeitung.png" border="0" alt="logodesign" name="bildbearbeitung1"></img></a>
</div>


<div id="raster">
    <div id="scrollbar1">
        <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
        <div class="viewport">
             <div class="overview">
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name="flyersnow" border="0"/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>


            </div>
        </div>

    </div>    
    </div><!-- ENDE raster -->
</div> <!-- ENDE CONTENT -->
</body>
</html>

ich kann den tooltip nicht anpassen. ich möchte den nämlich fast direkt am mauszzeiger haben...
aber egal was ich hier eigebe, es ändert sich nichts
HTML: 
                        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                            mousex = e.pageX - tipWidth - 20;
                        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                            mousey = e.pageY - tipHeight - 20;
 
Zuletzt bearbeitet:

Digicam

Digicam

weitestgehend nur noch lesend

AW: fehler im <head> wegen tooltip

Schau mal hier:

Extrem flexibel und sehr einfach.
Ich arbeite gern damit.
 
J

jimmyjammyj

Guest

AW: fehler im <head> wegen tooltip

Hallo,

PHP: 
var mousex = e.pageX + 20; //<-- *** Du must diese Zahl (20) ändern auf z.B. 10 ***
var mousey = e.pageY + 20; //<--
var tipWidth = tip.width();
var tipHeight = tip.height();

var tipVisX = $(window).width() - (mousex + tipWidth);
var tipVisY = $(window).height() - (mousey + tipHeight);

if ( tipVisX < 20 ) {
    mousex = e.pageX - tipWidth - 20; //<-- *** Auch hier, (das ist wenn deine maus sich (relativ zum browser) unten rechts befindet). ***
} if ( tipVisY < 20 ) {
    mousey = e.pageY - tipHeight - 20; //<-- 
}

Du hast übrigens 2x jQuery eingebunden :)

Gruß Jimmy
 
S

susiH

Aktives Mitglied

AW: fehler im <head> wegen tooltip

der tooltip ist jetzt näher am mauszeiger. aber ein problem hab ich noch...
der tooltip ändert nicht die ausrichtung vom mauszeiger, wenn der nichts anzeigen kann. so werden die tooltips dann von der scrollbar und bildern verdeckt.

hier nochmal der code der html

HTML: 
<!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>susi.artmessengers.de</title>

<link rel="shortcut icon" href="http://www.psd-tutorials.de/forum/images/favicon.ico" /> 
<link rel="stylesheet" href="style.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

    $(".tip_trigger").hover(function(){
            tip = $(this).find('.tip');
            tip.show(); //Show tooltip
                }, function() {
                        tip.hide(); //Hide tooltip
                }).mousemove(function(e) {
                    var mousex = e.pageX + 5; //<-- *** Du must diese Zahl (20) ändern auf z.B. 10 ***
    var mousey = e.pageY + 5; //<--
    var tipWidth = tip.width();
    var tipHeight = tip.height();

    var tipVisX = $(window).width() - (mousex + tipWidth);
    var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 5 ) {
            mousex = e.pageX - tipWidth - 5; //<-- *** Auch hier, (das ist wenn deine maus sich (relativ zum browser) unten rechts befindet). ***
        } if ( tipVisY < 5 ) {
    mousey = e.pageY - tipHeight - 5;}  
});
            $('#scrollbar1').tinyscrollbar();    
        });

</script>


</head>
<body>


<div id="hintergrund">
<img src="http://www.psd-tutorials.de/forum/images/footer.png" width="100%" alt="" /></img>
</div>
<div id="container">
<div id="content">  <!-- ANFANG CONTENT -->

<!-- navigation -->
<div id="navigation">


<a href="#" 
onmouseover="
home1.src='images/home_hover.png';"
onmouseout="
home1.src='images/home.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/home.png" border="0" alt="logodesign" name="home1"></img></a>


<a href="#" 
onmouseover="
flyersnow.src='images/flyersnowaustausch.png'; 
logodesign1.src='images/logodesign_hover.png';"
onmouseout="
flyersnow.src='images/bildchen.png';
logodesign1.src='images/logodesign.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/logodesign.png" border="0" alt="logodesign" name="logodesign1"></img></a>


<a href="#" 
onmouseover="
illustrationen1.src='images/illustrationen_hover.png';"
onmouseout="
illustrationen1.src='images/illustrationen.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/illustrationen.png" border="0" alt="logodesign" name="illustrationen1"></img></a>

<a href="#" 
onmouseover="
webdesign1.src='images/webdesign_hover.png';"
onmouseout="
webdesign1.src='images/webdesign.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/webdesign.png" border="0" alt="logodesign" name="webdesign1"></img></a>

<a href="#" 
onmouseover="
printdesign1.src='images/printdesign_hover.png';"
onmouseout="
printdesign1.src='images/printdesign.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/printdesign.png" border="0" alt="logodesign" name="printdesign1"></img></a>

<a href="#" 
onmouseover="
bildbearbeitung1.src='images/bildbearbeitung_hover.png';"
onmouseout="
bildbearbeitung1.src='images/bildbearbeitung.png'; ">
<img src="http://www.psd-tutorials.de/forum/images/bildbearbeitung.png" border="0" alt="logodesign" name="bildbearbeitung1"></img></a>
</div>


<div id="raster">
    <div id="scrollbar1">
        <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
        <div class="viewport">
             <div class="overview">
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name="flyersnow" border="0"/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der text der </span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>

<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>
<a href="#" class="tip_trigger"><img src="http://www.psd-tutorials.de/forum/images/bildchen.png" alt="" name=""/><span class="tip">der text</span></img></a>


            </div>
        </div>

    </div>    
    </div><!-- ENDE raster -->
</div> <!-- ENDE CONTENT -->
</div>
</body>
</html>

und nochmal ein link zur seite
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 121 (Mitglieder: 1, Gäste: 120)
Robots: 282

Statistik des Forums

Themen
118.618
Beiträge
1.538.362
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben