Bild öffnen am Mauszeiger

S

SilverVegeto

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
 
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
 
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: 
.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: 
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!
 
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: 
<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
 
Jetzt wird es angezeigt, vielen Dank Maik machst das wirklich immer wieder super :)

Könnte mir nur noch jemand wegen meiner 2. Frage helfen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück