zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Image Map & Tooltip Javascript

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.02.2011, 14:44
Benutzerbild von pkipper
Will keinen Titel
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Winterthur
Beiträge: 164
pkipper befindet sich auf einem aufstrebenden Ast
Standard Image Map & Tooltip Javascript

Servus Leute,

Ich habe da mal wieder eine kleine mühsame Frage, und zwar geht es um die Kombination von einem Image Map und einem Javascript für Tooltips. (Es führt designtechnisch leider kein Weg um die Image Map herum )

Für den Aufbau des Javascripts benötige ich eine <a href="#"></a>-Zeile, da sich das Javascript auf dieses stützt. Nun ist das Problem ja folgdendes dass durch das image mapping keine wirkliche solche Zeile zu stande kommt, sondern nur eine Referenz von X und Y-Punkten als Angabe für die Form des Links und einer integrierten href (ohne a tag)...

Beispiel:
HTML-Code:
<img src="http://xhtmlforum.de/images/hauptbild.jpg" alt="Hauptbild für Navigationsgebiete" width="1200" height="600" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="350,50,350,191,402,190,402,200,447,200,446,119,462,119,463,49" href="#" />
</map>
Gibt es eine Möglichkeit ein a-tag mit einer image-map zu verbinden? (So wie man ein Bild mit der Map verbinden kann)

Ich weiss die Fragenstellung ist ein wenig sehr kompliziert, aber ich hoffe dennoch dass vielleicht jemand eine Idee dazu hätte.

Liebe Grüsse,

Phil
__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.02.2011, 14:49
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Wieso glaubst du, dass du einen Link, der zum Seitenafang springt, brauchst um JS einzusetzen? Warum benutzt du nicht einfach einen Eventhandler?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.02.2011, 14:50
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard

Kann man denn den Tooltip nicht auf area mappen lassen, anstelle von a?

Was ist das denn für ein Tooltip?
Mit Zitat antworten
  #4 (permalink)  
Alt 21.02.2011, 15:04
Benutzerbild von pkipper
Will keinen Titel
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Winterthur
Beiträge: 164
pkipper befindet sich auf einem aufstrebenden Ast
Standard

@protonenbeschleuniger:

Da der Tooltip anhand des Link-tags ermittelt wo er aufpoppt. Es gibt so wenige Informationen auf der Seite dass es reicht wenn die Infos per Tooltip aufpoppen und keine wirkliche Verlinkung von Nöten ist (also leere Links).

Von JS an sich verstehe ich leider zu wenig als dass ich es von grund auf schreiben könnte. Ich verstehe aber genug sodass ich einige Dinge abändern und anpassen kann. Ich würde allerdings trotzdem gerne wissen wie du das mit dem Eventhandler meintest (Neugierig bin ich immer)

PS hier das Skript:
Code:
$(document).ready(function(){
 
	$(".popup a").hover(function() {
	$(this).next("div").stop(true, true).animate({opacity: "show", top: "50"}, "slow");
	}, function() {
	$(this).next("div").animate({opacity: "hide", top: "60"}, "fast");
	});
 
});

@uspri:

Das ist eine gute Idee, das habe ich so rum noch nicht probiert. Irgendwie probiert man die offensichtlichsten Dinge immer erst zuletzt

Das script basiert auf jquery und ist ein nur sehr kleines! Skript. Eine Doku- oder Donwloadseite gibts leider nicht mehr, sondern nur noch die Demo Seite

Der Vorteil ist dass es ein <div>-Tag einschliesst und ich somit ein CMS in die <div>-Tags einbauen kann.
__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.

Geändert von pkipper (21.02.2011 um 15:09 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.02.2011, 15:14
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von pkipper Beitrag anzeigen
@protonenbeschleuniger:

Da der Tooltip anhand des Link-tags ermittelt wo er aufpoppt.
Wieso nicht anhand des Links in der Image Map? Wenn ich dich richtig verstehe soll dort das tooltipp aufgehen
Mit Zitat antworten
  #6 (permalink)  
Alt 21.02.2011, 15:15
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard

Versuche das doch einfach mal.

Anstelle von:
$(".popup a").hover(function() {

einfach ein
$("area").hover(function() {

Mal schauen, ob es geht?
Mit Zitat antworten
  #7 (permalink)  
Alt 21.02.2011, 16:12
Benutzerbild von pkipper
Will keinen Titel
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Winterthur
Beiträge: 164
pkipper befindet sich auf einem aufstrebenden Ast
Standard

So,

Funktionieren tut das ganze zwar jetzt. Allerdings ist das Markup nun ein absoluter Horror!!! Damit es so funktioniert, wie ich es gerne hätte, muss ich zwangsläufig div-tags innerhalb der map schreiben (igitt-igitt!! ).

Ich bin mir nicht sicher ob man das anders lösen kann, denn egal was ich bis anhin versucht habe, es hat mir entweder die Site zerfetzt oder es hat schlichtweg aufgehört zu funktionieren... Vielleicht habt Ihr ja ein paar geniale Ideen?

Hier eine kleine Testseite die ich für Euch gebastelt habe (Es handelt sich dabei nur um ein Testbild, also bitte keine Comments über Design ).

Testseite: Link

Validator: Link (Achtung hässlich )

Ich freue mich über jede eurer Ideen.

Liebe Grüsse,

Phil
__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.

Geändert von pkipper (21.02.2011 um 16:20 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 21.02.2011, 16:26
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard

Du könntest z.B. in dem alt einen Wert hinterlegen, dann diesen Abfragen beim Hover und ein Div, welches dann außerhalb der Map liegt, damit ansprechen und den Tooltip anstoßen. Müsste ich aber auch erst zusammenbauen. Aber wenn ich das Beispiel so sehe, dann frage ich mich, warum das eine Imagemap sein muss? Du kannst doch das Bild in einem Container hinterlegen, dann die Links da mittels display:block; und position:absolute; drüberlegen und entsprechend ausrichten, schon kannste das alles so belassen, wie es ist.
Mit Zitat antworten
  #9 (permalink)  
Alt 21.02.2011, 16:33
Benutzerbild von pkipper
Will keinen Titel
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Winterthur
Beiträge: 164
pkipper befindet sich auf einem aufstrebenden Ast
Standard

Hi uspri,

hört sich fantastisch komplex an Werde wohl noch einiges daran basteln...

Was den Image Map angeht so gibt es viele Elemente im Bild welche Schrägen oder Überlappungen mit sich bringen. Dementsprechend ist die Lösung mit den positionierten Containern leider nicht umsetzbar. (War überigens auch meine erste SEHR EINFACHE Lösung... Bis der Kunde meinte dass er es gar nicht toll fände wie "ungenau" die Links seien )
__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.
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
einfache Image Map mit CSS?!? heiko0610 CSS 1 11.12.2008 09:00
IMAGE MAP mit Zoom Ansicht funktioniert nicht... Hat jemand eine Idee? fromthemoon CSS 2 21.05.2008 23:30
Imagemap Zugriff bei einer Gallery Sarah14 Javascript & Ajax 3 12.11.2007 15:06
CSS Image Gallery & JavaScript Stalafin CSS 1 18.09.2006 09:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:50 Uhr.