5x bewertet

Tooltip

von Nobi  |  03.01.2009 um 16:43 h
Javascript Anwendungen
Typ: Javascript Anwendungen
Stufe:Einfach
Daher ich oft gefragt wurde wie man diesen Effekt macht, erkläre ich euch das hier einmal. Nun werdert ihr ein Beispiel sehen wie dieser Effekt auch bei dir aussehen kann.

Bild

Wie man vielleicht erkennen kann, das kleine Viereck ist ein normales Bild auf der Website (kann natürlich jede größe haben) und wenn man mit der Maus drüberfährt erscheint dann das gewünschte Bild (in meinen Fall eine größere Version des kleinen Viereckes)

Tooltip - Datei + Erklärung
Als erstes braucht ihr die Tooltip - Datei diese könnt ihr hier herunterladen. Wenn ihr das gemacht habt dann öffnet sie mit einem Editor, ich verwende hier Dreamweaver 8 (vorgänger Version oder andere Editoren wie Phase5 gehen auch). Dann müsst ihr ein bisschen Scrollen bis ihr dahin kommt was das untere Bild anzeigt.

Bild

Hier könnt ihr ändern wie alles aussehen soll. Bei den Bild was nun kommt könnt ihr sehen was ihr durch verändern der Zahlen verändert. Den Rest der anderen Zahlen im oben gezeigten Bild braucht ihr nicht zu beachten es sind nur die drei Einstellungen wichtig die nun gezeigt werden.

Bild

Verwendung
Nachdem ihr alles schön umgeändert habt und abgespeichert habt müsst ihr die Datei nur noch auf euren FTP Server hochladen. Nun müsst ihr den Code nicht in den <head>-Bereich einfügen, sondern ihr müsst ihn bevor ihr den <body>-Bereich schließt reinkopieren.

<script type="text/javascript" src="URL zur Tooltip.js-Datei"></script>

Also sieht das ende eurer Website so aus: Code - </body> - </html>

Wenn ihr das gemacht habt fehlt euch nicht mehr viel ihr braucht dann nur noch folgenden Code:

<a href="#" onMouseOver="this.T_WIDTH=250;return escape(&#8242;<img src=&#8242;awards/icon_contest.gif&#8242; width=&#8242;250&#8242;>&#8242;)"><img src="awards/prev/icon_contest.jpg" border="0" alt=""></a>

Die erste URL im Code ist für das Hoverbild und die 2te ist das kleine Vorschaubild.
Ich hoffe ich konnte euch ein bisschen helfen, wenn ihr noch fragen habt stellt sie!



5 Kommentare




Fr34k

und dann meinen badge nehmen, tz xDDD
öhm ja, gutes tut^^
am 03.01.2009 um 22:18 Uhr


Emre

du, ich denke es ist schon von vorteil erstmal zu erklären was das überhaupt ist. wenn viele fragen, bleiben die wenigen die keine ahnung davon haben, abrupt alleine stehen. vom beispiel kann ich pers. auch nicht viel ablesen.

habs überflogen, gut erklärt.
am 03.01.2009 um 23:35 Uhr


Nobi

@ Fr34k:
ähm sry ^^ ab das damals so auf meiner alten Website schon gehabt bzw. auch so meine awards ausgestellt und hatte etz keine lust nochmal alles zu machen :) hoffe du findest das nicht schlimm wenn ja werde ich es sofort ändern :)

@ Emre: haste recht ^^ werde ich sofort machen :)

Danke
am 04.01.2009 um 01:26 Uhr


Apple

Sehr schönes Tut.Übersichtlich und sehr gut aufgebaut.Die Texte bei dir sind eh immer gut Smilie 6 Sterne :)
am 11.01.2009 um 17:39 Uhr


Nobi

@Apple: DANKEEEE :) freut mich ^^
am 13.01.2009 um 13:54 Uhr