mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 09:43 Benutzername: Passwort: Auto-Login

Thema: tooltip, css und image map vom 03.01.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> tooltip, css und image map
Autor Nachricht
Certilion
Threadersteller

Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
Verfasst Mi 03.01.2007 09:09
Titel

tooltip, css und image map

Antworten mit Zitat Zum Seitenanfang

Hallo!
Ich habe eine Imagemap mit tooltipfenstern versehen (durch area title usw.). Jetzt würde ich diese gerne mit CSS definieren. Es sollte nichts im head der html-datei stehen (javascript-anweisungen o.ä.), da mit einer Datenbank gearbeitet wird und der head schon vordefiniert ist. Welche Möglichkeiten gibt es da? Dankeschön!
Lg
Steffi


Zuletzt bearbeitet von Certilion am Mi 03.01.2007 15:37, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Mi 03.01.2007 11:22
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo Steffi,

wenn deine Imagemap nur Rechtecke beinhaltet, kannst du eine solche Konstruktion waehlen:

Code:
<html>
<head>
   
<style type="text/css">
ul#mymap {
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -104px 0 0 -300px;
   padding: 0;

   background: url(http://www.unitedmedia.com/comics/dilbert/archive/images/dilbert20024434870103.gif);
   width: 600px;
   height: 208px;
}

ul#mymap li { list-style-type: none; }
ul#mymap a { position: absolute; }
ul#mymap a span { visibility: hidden; background: #f88; border: 1px solid red; }
ul#mymap a:hover span { visibility: visible; }

ul#mymap a#link1 { left: 5px; top: 10px; width: 190px; height: 180px; }
ul#mymap a#link2 { left: 210px; top: 10px; width: 190px; height: 180px; }
ul#mymap a#link3 { left: 410px; top: 10px; width: 190px; height: 180px; }
</style>

</head>
<body>
<ul id="mymap">
   <li><a href="http://www.google.de" id="link1"><span>Link1!</span></a></li>
   <li><a href="http://www.freshmeat.net" id="link2"><span>Link2!</span></a></li>
   <li><a href="http://www.bundesregierung.de" id="link3"><span>Link3!</span></a></li>
</ul>
</body>
</html>


Styles werden natuerlich ausgelagert!

Gruss
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Certilion
Threadersteller

Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
Verfasst Mi 03.01.2007 12:36
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo,
es werden leider nur Kreise benutzt, keine Rechtecke. Kann ich das bei diesem Code trotzdem mit der Liste machen?
Gibts eine Möglichkeit dem title eine Klasse zuzuweisen o.ä.?

Oder ist das eine Möglichkeit?
http://forum.de.selfhtml.org/archiv/2005/11/t119028/
Aber wie kann man das in eine Image-map einbauen OHNE javascript im head?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<div><img  src="Images/content/Team_Auditoren/deutschlandkarteneu.gif" alt="deutschlandkarte" width="569" height="843" border="0" usemap="#karte" />
<map name="karte" id="karte" >
<area shape="circle" coords="246,303,9" title="Dr. Michael Bock (MHW Managementberatung, Hannover)" href="#" />
<area shape="circle" coords="265,326,9" title="Dipl.-Ing. Stephan Eierund (SE-Cert GmnbH, Bad Salzdetfurth" href="#" />
<area shape="circle" coords="238,315,9" title="Dirk Gerath (Gerath Beratungen, Ronnenberg)" href="#" />
<area shape="circle" coords="249,394,9"  title="Gunnar Heunisch (Göttingen)" href="#"/>

<area shape="circle" coords="237,166,9" title="Dr. Boris Steuer (Haseldorf)"href="#"/>
<area shape="circle" coords="181,145,9" title="Jürgen Schlede (Age Planung Qualitätsmanagementberatung, Schiffdorf)"href="#"/>
<area shape="circle" coords="461,265,9" title="Hans Ulrich Prusko (QPE, Velten) "href="#"/>
<area shape="circle" coords="390,400,9" title="Peter Henschler (Kabelsketal) "href="#" />
<area shape="circle" coords="63,437,9"  title="Hans Peter Justen (TÜE, Frechen)"href="#"/>

<area shape="circle" coords="324,532,9"  title="Gerd Pohl(Rödental)"href="#"/>

<area shape="circle" coords="308,595,9"  title="Wolfgang Raab (Nürnberg)"href="#" />

<area shape="circle" coords="211,697,9"  title="Hardi Starnell (hs Service, Reutlingen) "href="#" />
<area shape="circle" coords="250,602,9" title="Christian Krull(WWT Consulting Ltd.,Wertheim)" href="#" />

</map>




</div>
</body>
</html>


Lg
Steffi


Zuletzt bearbeitet von Certilion am Mi 03.01.2007 15:36, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Mi 03.01.2007 18:04
Titel

Antworten mit Zitat Zum Seitenanfang

Hast du mein Beispiel ueberhaupt mal ausprobiert??? Das ist doch schon so ein Tooltip drin! Der einzige Nachteil ist, dass es - wie schon erwaehnt - nur fuer rechteckigen Bereiche funktioniert -- aber das ist doch eigentlich kein Ding, oder?

Soll ich dir deinen Source zurechtkopieren??? Lächel

Edit So:

Code:
<html>
<head>
   
<style type="text/css">
ul#mymap {
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -284px 0 0 -421px;
   padding: 0;

   background: url(Images/content/Team_Auditoren/deutschlandkarteneu.gif);
   width: 569px;
   height: 843px;
}

ul#mymap li { list-style-type: none; }
ul#mymap a { position: absolute; text-decoration: none; }
ul#mymat a { width: 9px; height: 9px;  }

ul#mymap a span { visibility: hidden; background: #f88; border: 1px solid red; }
ul#mymap a:hover span { visibility: visible; }

ul#mymap a#link1 { left: 246px; top: 303px; }
ul#mymap a#link2 { left: 265px; top: 326px; }
ul#mymap a#link3 { left: 238px; top: 315px; }
...
</style>

</head>
<body>
<ul id="mymap">
   <li><a href="#" id="link1"><span>Dr. Michael Bock (MHW Managementberatung, Hannover)</span></a></li>
   <li><a href="#" id="link2"><span>Dipl.-Ing. Stephan Eierund (SE-Cert GmnbH, Bad Salzdetfurth</span></a></li>
   <li><a href="#" id="link3"><span>Dirk Gerath (Gerath Beratungen, Ronnenberg)</span></a></li>
   ...
</ul>
</body>
</html>



Zuletzt bearbeitet von schachbrett am Mi 03.01.2007 18:12, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Certilion
Threadersteller

Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
Verfasst Fr 05.01.2007 08:06
Titel

Antworten mit Zitat Zum Seitenanfang

Danke! Nur noch ein Problem, der Text soll nur erscheinen, wenn man auf einen bestimmten Punkt in der imagemap klickt. So erscheint er aber, sobald einen Teil davon berührt. Der Text soll halt angezeigt werden, wenn man über einen Ort fährt...lg
steffi
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 05.01.2007 08:36
Titel

Antworten mit Zitat Zum Seitenanfang

Ups, war auchn Schreibfehler drinn:

Code:
ul#mymat a { width: 9px; height: 9px;  }

=>
Code:
ul#mymap a { width: 9px; height: 9px;  }

Versuchs mal so!
  View user's profile Private Nachricht senden
Certilion
Threadersteller

Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
Verfasst Fr 05.01.2007 09:37
Titel

Antworten mit Zitat Zum Seitenanfang

Den Schreibfehler hatte ich schon entdeckt *zwinker*
Zum besseren Verständnis mal folgender link: http://www.se-zert.de/index.php?page=Team&subpage=Auditoren
Da ist rechts in der sidebar eine "Übersichtskarte Auditoren". Um die handelt es sich. Noch erscheinen halt "normale" Tool-Tip-Fenster, die mit einer Image Map realisiert wurden. Diese sollen nun mit css deklariert werden (später soll noch ein Link darauswerden), wie gesagt. Das Problem ist jetzt bei der neuen version mit der liste immer noch, dass sich das "Tooltip" immer öffnet, wenn man zufällig drüberfährt. Es soll sich aber nur öffnen, wenn man auf den vorhandenen Ort mit dem Mauszeiger ist, wie es mit der Image Map jetzt auch ist. Kann man das irgendwie hinbekommen? (Die kleinen blauen Zielpunkte sind mit im Bild drin, wenn ich die als divs einzeln über das Bild setze und dann was mit hover mache bezogen auf das Bild oder so?....)*ächz*
lg
steffi


Zuletzt bearbeitet von Certilion am Fr 05.01.2007 09:38, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Certilion
Threadersteller

Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
Verfasst Mo 08.01.2007 10:27
Titel

Antworten mit Zitat Zum Seitenanfang

Ich habe jetzt folgendes css style:

Code:

#karte {
   display: block;
   width: 486px;
   height: 719px;
   margin: 15px 0px 20px 0px;
   background: url(deutschlandkarteklein.gif) no-repeat;
   }
   
   #karte li {
    list-style-type: none;
   }
   
   #karte a {
   display: block;
   position: absolute;
   font-size: 12px;
   font-family: Verdana;
   color: #000000;
   width: 160px;
   height: 30px;
   text-decoration: none;
   background: url(ziel.gif) no-repeat;
   background-position: 5px 5px;
   padding-left: 20px;
   visibility: visible;
   overflow: hidden;
   }
   
   #karte a span {
    visibility: hidden;
   }
   
   #karte a:hover {
   
   background: url(ziel.gif) #EFF5FF no-repeat left top;
   background-position: 5px 5px;
   border: 2px;
   border-bottom: 2px solid #FF9900;
   width: 135px;
   height: 45px;
   background-color: #999999;
   padding: 5px 5px 5px 25px;
   
   z-index: 51;
   }
   
   #karte a:hover span {
    visibility: visible;
   }
   
   #karte a:hover span a {
    visibility: hidden;
   }
   
   #michael {left: 205px; top: 265px;}


und dazu den folgenden html code
Code:

<div>
       <ul id="karte">
   <li><a href="www.se-cert.de" id="michael"><span><strong>Michael Bock</strong><br />(MHW Manage&shy;ment&shy;beratung, Hannover)<br /><a href="(www.google.de)">Zum Profil</a></span></a></li>
                  
                  

    </ul>
    </div>


Die Worte "Zum Profil" werden jetzt nicht in dem Kasten, also unter dem Namen und dem Ort dargestellt, sondern in einem "eigenem" Kasten. Das "Zum Profil" soll in dem gleichen Kasten sein und gleichzeitig ein Link sein (wie auch schon angelegt.) Wie muss ich das css verändern bzw. was muss ich in der id #karte a: hover span a hinzufügen, damit das klappt?
Außerdem soll sich der Kasten nur öffnen, wenn man direkt über den Ort fährt und nicht, wenn man nur in die NÄhe kommt. So wie hier eben:http://www.moryson.net/eintrag.cfm?eid=8
Danke!


Zuletzt bearbeitet von Certilion am Mo 08.01.2007 10:30, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen [css] Image-Map als HTML
CSS Hover-Image-Map anklickbar machen?
input type=image + image map
Image hover tooltip
image map
Rollover,wenn über Image-Map?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.