zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Realisierung von Tooltips in Javascript

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.08.2013, 19:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2013
Beiträge: 12
Apury befindet sich auf einem aufstrebenden Ast
Standard Realisierung von Tooltips in Javascript

Guten, angehenden Abend zusammen !

Ich habe ganz nach diesem Tutorial mal ein wenig mit CSS 3 basierenden Tooltips rum probiert. Der Tooltip soll für ein auf Wbb 3.1.7 basierendes Forum sein somit möchte ich das Script dann über Javascript in die index.html des Forums einbinden.

Meine Javascript kentnisse sind relativ mies aber ich denke mit hilfe bekomme ich dies hin! Nun aber erstmal zurück zu CSS.

Ich habe es nun hinbekommen das bild in einen tooltip einzubinden ich möchte den tooltip zwar noch etwas verschieben aber das wird kein Problem.

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tooltip</title>
<style type="text/css">
.container {
	width:400px;
	height:300px;
	background:#F0F0F0;
	border:1px solid #CCC;
	margin:10% auto;
	padding:20px;
}

a{ 
	margin-right:10px; 
}

.tooltip {position:relative; z-index:20px; }
.tooltip span { display:none; }
.tooltip:hover {z-index:21; }
.tooltip:hover span {
	display:block;
	text-align:center;
	padding:5px;
	font-size:11px;
	text-decoration::none;
	position: absolute;

</style>
</head>
<body>

	<div class="container">
		<a href="#" class="tooltip"> Test <span><img src="/items/item1.jpg">
		</span></a>
		
</body>
</html>
Meine Frage zu Javascript ist nun. Wie kann ich das ganze so schreiben, das ein link eine bestimmte deklaration in einer html datei aufruft.

Also hier ist mal ein beispiel. Ich selbt habe früher viel mit AutoIt rum gebastelt und kann mich d anoch an den "if" befehl erinnern. Auf das oben angewante code gewusel könnte das also nun so aussehen:

if href=http://blablabla/item1 = <a href="#" class="tooltip"> Test <span><img src="/items/item1.jpg">

Somit müsste der stammbaum der datein wie folgt aussehen:

<script><src="http://URL/js/tooltips.js"></script> in die index.html

Dann müsste ich die tooltips.js mit der tooltips.css verknüpfen und ab da ist dann die frage. Kann man das direkt in der tooltips.js definieren (ggf. über JQuery) bei welchem link welche html id abgerufen wird oder ist das noch mit html realisierbar so das man einfach über html eine abfrage macht?



In der kurzfassung: Ich brauche hilfe beim umsetzen von abhängigkeits tooltips in einem forum, da ich die beiträge nicht selbst schreibe kann ich nicht einfach tooltips einbinden, wie ich es sonst machen würde, wenn es ein Blog o.Ä währe.

Ich bedanke mich jetzt schon vielmals für links zu tutorials oder lesestoff der mir bei dem thema weiter hilft.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.08.2013, 20:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

was meinst du mit deklaration??
Irgendwie versteh ich dich nicht ganz...
Meinst du bei einem link soll eine Javascript aktion mit dem element ausgeführt werden oder wat? "bei welchem link welche html id abgerufen wird" wie genau meinst du das? :P
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.08.2013, 20:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2013
Beiträge: 12
Apury befindet sich auf einem aufstrebenden Ast
Standard

Ganz richtig. Ich möchte sozusagen automatisch generierte Tooltips, da ich das ganze in einem Forum anwenden möchte müssen sozusagen die Texte die "getooltip't" werden sollen von selbst erkannt werden und da wollte ich als auslöser einen link wählen also wenn ein Wort z.B einen link beinhaltet soll es einen tooltip auslösen.

Wenn ich davon ausgehe das ich 3 datein habe.

Eine datei die die bedingungen für das erstellen eines Tooltips auslöst (.js)
Eine datei die die tooltips beinhaltet (.html)
und eine datei die das design der tooltips festlegt (.css)

Wollte ich den tooltips in der .html ID's zuweisen damit ich dann in der .js datei auswählen kann wie dieser tooltip aussieht.

als konkretes beispiel:

Wenn der link: Home auf einem wort verlinkt ist: WortXYZ soll das "WortXYZ" einen Tooltip bekommen welcher ein Bild beinhaltet:
HTML-Code:
<a href="#" class="tooltip"> Test <span><img src="http://URL.com/items/item1.jpg"></span></a>
damit das script aber weiß, welchen tooltip bzw welches bild das ist braucht die HTML zeile da oben aber eine ID und ich denke, wenn ich die .CSS in die .HTML schreibe und dem .js sage das das wort X mit der ID=X ver"tooltip't" werden soll, funktioniert das ganze nur brauche ich jetzt den einstieg daran da ich die ganzen items erstmal designen muss und dann festlegen muss.

Mir fehlt sozusagen das wissen den ersten schritt zu machen bevor ich mich an die stundenlange einfüge arbeit setzen kann.
Mit Zitat antworten
  #4 (permalink)  
Alt 29.08.2013, 22:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Also ich bin immernoch nicht ganz schlau aus der erklärung geworden, aber naja ich versuch mal auf gut glück dein problem zu erkennen. Eigentlich brauchst du doch nur eine Variablenübergabe, oder? Um was für tooltips soll es sich denn handeln? Also du meinst du fährst über den Link Home und WORTXYZ soll als tooltip erscheinen oder wie? Und das wort soll variabel sein? Du kannst doch einfach den entsprechenden Text in das span schreiben? Oder willst du das selbe nur mit js machen? Also mit js einem link ein tooltip geben?

Sry ich bin gerade echt etwas begriffsstutzig

EDIT: Was soll sich denn bei dir von der variante im video unterscheiden?
EDIT 2: Ich habe mir deine Frage noch einmal durchgelesen - du meinst die Tooltipps sollen zum Beispiel den Titel eines Themas zeigen oder wie? Das könntest du ja auch mit php machen

Geändert von mymaksimus (29.08.2013 um 22:49 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 29.08.2013, 23:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2013
Beiträge: 12
Apury befindet sich auf einem aufstrebenden Ast
Standard

Erklären war nie meine stärke ._.

Also, nehmen wir mal ein beispiel das nicht von spielen kommt.

Nehmen wir an es gibt eine Seite auf der du ganz genaue informationen über Reifen bekommst. Du hast einen riesen text auf ein paar informative Stichworte beschränkt und diese als Bild gespeichert.

Das Bild als tooltip zu öffnen und einem wort zuzuweisen ist ja kein Problem.

Nun möchtest du aber in einem Forum wo Beiträge automatisch erstellt werden das eine bestimmte reifensorte automatisch dieses bild bekommt wenn der link zu der seite führt die oben genannt ist.

Also heißt die seite jetzt http://superreifeninfo/reifenX

dann soll bei "Der ReifenX ist toll, weil..." - "ReifenX" automatisch das Bild angehäftet bekommen.

Hier noch ein Link zu einem spielehersteller der ein script zur verfügung stellt:

http://us.battle.net/d3/static/js/tooltips.js
http://static.wowhead.com/widgets/power.js

Ich möchte einfach das wenn ein wort auf http://SeiteXYZ/XYZ weiter leitet Tooltip bild 1 angeheftet wird und wenn es auf http://SeiteXYY/XYY weiter leitet Tooltip bild 2 angeheftet wird.


Ich würde ja einfach aus den *.js der beiden beispiele kopieren aber leider verstehe ich diese nicht.
Mit Zitat antworten
  #6 (permalink)  
Alt 30.08.2013, 00:19
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

So wie du dir das Vorstellst wird das nichts. Du willst das ja auf ein Forum anwenden, da musst du schon auch PHP(serverseitige Sprache) mit ins Boot nehmen oder nach einem passenden Plug-In suchen, falls es dafür eines gibt.
Und wenn du nicht mal ein wenig Ahnung von Javascript und PHP hast, dann sehe ich ehrlich gesagt keine Lösung für dich.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #7 (permalink)  
Alt 30.08.2013, 00:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2013
Beiträge: 12
Apury befindet sich auf einem aufstrebenden Ast
Standard

Also die beiden Scripts die ich installiert haben gehen wunderbar und funktionieren soweit auch nur über ein webspace und javascript sowie css. Zumindest das was ich sehe.

Also auf deutsch. Es ist nicht möglich bei Link X tooltip X anzuzeigen ?

Geändert von Apury (30.08.2013 um 00:29 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 30.08.2013, 00:33
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Wenn man programmieren kann ist fast alles möglich.
Ohne Programmiersprache auf Serverseite sehe ich das nicht. Nur mit Javascript ist das nicht zu realisieren, so wie du dir das wünscht.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #9 (permalink)  
Alt 30.08.2013, 00:39
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Blinzeln

Wo anzeigen? Hä? Ich dachte du öffnest eine neue Seite? Du klickst auf link x und es wird auf eine andere Seite weitergeleitet. Was soll dann passieren?

Zitat:
Zitat von explanator Beitrag anzeigen
Wenn man programmieren kann ist fast alles möglich.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.08.2013, 01:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2013
Beiträge: 12
Apury befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Wenn man programmieren kann ist fast alles möglich.
Ohne Programmiersprache auf Serverseite sehe ich das nicht. Nur mit Javascript ist das nicht zu realisieren, so wie du dir das wünscht.
Ich kann das aber irgendwie nicht glauben. Ich finde in den js. datein von battle.net und wowhead keine server ip's oder andere domains die auf einen server deuten.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Erkennen ob JavaScript deaktiviert ist und anderen Inhalt anzeigen Ares Javascript & Ajax 7 02.02.2011 13:45
Wort in Javascript Code einfügen; dann Javascript Code ausgeben Sp33dy G0nz4l3s Javascript & Ajax 1 23.05.2008 10:37
Impressumsaufruf mit Javascript Sinclair Javascript & Ajax 6 19.05.2008 16:41
JavaScript Dateien dynamisch nachladen Dave.ch Javascript & Ajax 1 07.12.2007 01:16
Javascript und Sicherheit Kirsten Javascript & Ajax 2 26.03.2007 11:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:37 Uhr.