tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
5
ZUGRIFFE
624
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 22.11.08 16:04 #1
    SilverVegeto Tutorials.de Gastzugang
    Hallo,
    weißt gar nicht genau wie ich das nennen soll aber ich habe auf http://trendyone.de/ gesehen das wenn man oben auf die kommenden Events fährt das Bild in Groß geöffnet wird.
    Weißt jemand wo ich diesen Script herbekomme?

    Danke
     
    Zitieren Zitieren
  2. 22.11.08 16:22 #2
    Maik Tutorials.de Gastzugang
    Hi,

    ein kurzer Blick in den Quelltext der genannten Seite verrät en Detail, wie dies umgesetzt wurde, und ein "Copyright-Hinweis" kann ich im angewendeten Scriptcode auch nicht entdecken.

    Ansonsten kannst du alternativ auch auf Walter Zorns Tooltip zurückgreifen.

    mfg Maik
     
    Zitieren Zitieren
  3. 22.11.08 17:12 #3
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Zitat Zitat von Maik Beitrag anzeigen
    Hi,

    ein kurzer Blick in den Quelltext der genannten Seite verrät en Detail, wie dies umgesetzt wurde, und ein "Copyright-Hinweis" kann ich im angewendeten Scriptcode auch nicht entdecken.
    Naja, kein Lizenzhinweis besagt ja nicht, dass es frei verfügbar ist, eher das Gegenteil

    Aber zum Glück gibt es ja den Walter
     
    Zitieren Zitieren
  4. 26.11.08 21:51 #4
    SilverVegeto Tutorials.de Gastzugang
    Also habe mir die Seite angeschaut doch habe ich mich jetzt für dieses Tutorial entschieden [LINK].
    Hintergrundinfo: Ich möchte Tool-Tip benutzen um eine schnelle Vorschau meiner Fotogallerie zu ermöglichen.

    Dazu hab ich jetzt nun 2 Fragen.

    1. In diesem Tutorial wird das Tool-Tip mit einer HTML Tabelle generiert, nun wollte ich das mit CSS lösen und habe folgendes versucht:
    (Leider wird dann gar kein Tool-Tip mehr angezeigt, obwohl ich es außerhalb vom Javascript getestet habe und es dann einwandfrei funktioniert. Natürlich dann ohne visibility: hidden;)

    CSS-Datei:
    PHP-Code:
    .css-tooltip-box
    {
          position: absolute;
          visibility: hidden;
          text-align: left;
          padding: 0px;
          border: 1px solid #B221B0;
          color: #D6ABD6;
          background-color: #481647;
          min-width: 50px;
          max-width: 600px;
          min-height: 50px;
          max-height: 600px;
          font-size: 11px;
          font-family: Arial;
    }

    .    css-tooltip-title
    {
          padding: 2px;
          color: #D6ABD6;
          background-color: #C716C5;
          font-size: 11px;
          font-family: Arial;
    }

    .    css-tooltip-inhalt
    {
          color: #D6ABD6;
          background-color: #481647;
          font-size: 11px;
          font-family: Arial;
    } 
    Javascript Teil Bereich:
    PHP-Code:
    function ToolTip(layerName, TTitel, TInhalt)
    {
            ContentInfo = '<div class="css-tooltip-box"><div class="css-tooltip-title">'+TTitel+'</div><div class="css-tooltip-inhalt">'+TInhalt+'</div></div>';
            document.getElementById(layerName).innerHTML = ContentInfo;
    } 
    2. Wenn ich nun Bilder habe die für den rechten oder unteren Bereich der Website zu groß wären, aber auf der gegenüberliegenden Seite (links oder oben) Platz hätten, könnte ich Javascript (anhand von dem Code den ich durch das Tutorial besitze) sagen das es die andere Seite zur Tool-Tip-Darstellung benutzen soll?


    Vielen Dank im Voraus!
     
    Zitieren Zitieren
  5. 26.11.08 22:30 #5
    Maik Tutorials.de Gastzugang
    Hi,

    es liegt nicht daran, dass du anstelle der Tabelle DIVs verwendest, sondern in der Klasse .css-tooltip-box visibility:hidden deklariert hast, womit die Box schlichtweg nicht angezeigt wird, denn zum Ein- und Ausblenden des Tooltips bezieht sich das Javascript auf das Element mit der ID #ToolTip.

    Mit diesem Testdokument kann ich keine "Arbeitsverweigerung" in den Browsern feststellen:

    HTML-Code:
    <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_SilverVegeto</title>

<style type="text/css">
<!--
.css-tooltip-box
{
  text-align: left;
  padding: 0px;
  border: 1px solid #B221B0;
  color: #D6ABD6;
  background-color: #481647;
  min-width: 50px;
  max-width: 600px;
  min-height: 50px;
  max-height: 600px;
  font-size: 11px;
  font-family: Arial;
}

.css-tooltip-title
{
  padding: 2px;
  color: #D6ABD6;
  background-color: #C716C5;
  font-size: 11px;
  font-family: Arial;
}

.css-tooltip-inhalt
{
  color: #D6ABD6;
  background-color: #481647;
  font-size: 11px;
  font-family: Arial;
}

#ToolTip {
 position:absolute;
 width: 100px;
 top: 0px;
 left: 0px;
 z-index: 4;
 visibility: hidden;
}
-->
</style>

<script type="text/javascript">
var Initialisierung = 0;
var Ex, Ey, TitelFarbe, TextFarbe, ContentInfo;

var TitelFarbe = "red";
var TextFarbe = "yellow";


function ToolTipBewegen(layerName, FromTop, FromLeft, e)
{
    document.getElementById(layerName).style.top = FromTop;
    document.getElementById(layerName).style.left = FromLeft + 15;
}


function Aktivieren()
{
    Initialisierung = 1;
}


function Deaktivieren()
{
    Initialisierung = 0;
}


function Starten(e)
{
    if(Initialisierung)
    {
        Ex = document.all ? window.event.x : e.pageX;
        Ey = document.all ? window.event.y : e.pageY;
        ToolTipBewegen("ToolTip", Ey, Ex, e);
        document.getElementById('ToolTip').style.visibility = "visible";
    }
    else
    {
        ToolTipBewegen("ToolTip", 0, 0);
        document.getElementById('ToolTip').style.visibility = "hidden";
    }
}

function ToolTip(layerName, TTitel, TInhalt)
{
    ContentInfo = '<div class="css-tooltip-box"><div class="css-tooltip-title">'+TTitel+'</div><div class="css-tooltip-inhalt">'+TInhalt+'</div></div>';
    document.getElementById(layerName).innerHTML = ContentInfo;
}
</script>

</head>
<body onmousemove="Starten(event);">
<div id="ToolTip"></div>

<a href="#" onMouseover="ToolTip('ToolTip','Titel des Tool-Tips','Hier können Sie beliebigen Text <i>inkl. HTML-Tags</i> notieren.'); Aktivieren();" onMouseout="Deaktivieren();">Fahren Sie zum Testen des Tool-Tips über diesen Text.</a>

</body>
</html>

    mfg Maik
     
    Zitieren Zitieren
  6. 26.11.08 22:42 #6
    SilverVegeto Tutorials.de Gastzugang
    Jetzt wird es angezeigt, vielen Dank Maik machst das wirklich immer wieder super

    Könnte mir nur noch jemand wegen meiner 2. Frage helfen?
     
    Zitieren Zitieren
« jQuery - Position von DIVs per Drag wechseln | jQuery: HTML dynamisch erzeugen »

Ähnliche Themen

  1. Bewegliches Bild mittels Mauszeiger(Actionscript3)
    Von spuncky im Forum Flash Plattform
    Antworten: 0
    Letzter Beitrag: 15.09.08, 17:29
  2. Bild am Mauszeiger, bild hockt nur in der Ecke
    Von Aser im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 02.10.06, 16:29
  3. Text verändern wenn Mauszeiger über Bild
    Von fiyahkid im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 09.07.06, 16:05
  4. Bild Öffnen aber immer die größe die das Bild hat soll das Fenster sein
    Von SnakeBite334 im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 04.05.05, 16:26
  5. will das n bild dem mauszeiger folgt
    Von microchip im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 03.05.04, 11:49